|
This site provides users with the information about css tutorial, what is css, how to use css, css syntax, css class, css id, external style sheet, internal style sheet, inline styles, embedded css, tips, tricks, guide, and more.
If you think that this site is helpful, please recommend your friends to visit our site.
Introduction
CSS, Cascading Style Sheets, is simply text files with a file extention ".css". They are composed of lines of code that tell browsers how to display an HTML page. They give the designer more control over the appearance of a webpage by allowing to specifically define styles for elements, such as fonts, on the page. By using CSS, the website designers can separate HTML content from its appearance and style from structure and as a result, lots of time will be saved.
Syntax
A CSS syntax has three main parts. They are a selector, a property, and a value.
Syntax:
selector { property: value }
Let's see an example as follows:
h1,h2 { color: black }
The above tells the browser to render all occurences of the HTML h1 and h2 elements in black.
If you want to apply more than one property, you need to separate each declaration with a semi-colon. The following is an example:
h1 { color:black; font-family:arial,helvetica,"sans serif" }
Id and Class
In addition to setting a style for a HTML element, you can also specify your own selectors which are called "id" and "class".
The id selector is used to specify a style for a SINGLE, unique element and it uses the id attribute of the HTML element, and is defined with a "#". Let's have a look at the following example:
#test1
{
text-align:left;
color:blue;
}
The class selector is used to specify a style for a group of elements. You can set a particular style for many HTML elements with the same class. It uses the HTML class attribute, and is defined with a ".". The following is en example:
.left {text-align:left;}
You should know from the above that all HTML elements with class="left" will be left-aligned.
You can also specify that only specific HTML elements should be affected by a class as in the following example.
p.left {text-align:left;}
Note: all p elements with class="left" will be left-aligned.
How to implement CSS?
There are three ways that you can insert CSS. They are external style sheet, internal style sheet, and inline style. Let's look at them one after another in the following:
1. External Style Sheet
You can use an external style sheet when you want to the style to be applied to many pages. In this way, you can change the look of an entire website by changing only one file. You should know that each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section like the following:
<head>
<link rel="stylesheet" type="text/css"href="test.css" />
</head>
The following is what is insde the test.css:
hr {color:blue;}
p {margin-left:l0px;}
body {background-image:url("images/test.gif");}
2. Internal Style Sheet
You should use an internal style sheet when you want a single document to be a unique style. You can define internal styles in the head section of an HTML page by using the <style> tag. The following is an example:
<head>
<style type="text/css">
hr {color:blue;}
p {margin-left:10px;}
body {background-image:url("images/test.gif");}
</style>
</head>
3. Inline Styles
For using inline styles, you need to use the style attribute in the relevant tag. The style attribute can contain any CSS property. The following shows how to change the color and the left margin of a paragraph:
<p style="color:blue;margin-left:10px">This is a test.</p>
Some useful examples:
1. Image float
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<div>
<img src="test.gif" width="100" height="90" />
Make Money
</div>
This demo shows that the image, "test.gif" (with text under it) floating to the right and you will see that the text is PUSHED AWAY, not covered. This technique is very useful for one of the Adsense formats, making text go around the image.
</body>
</html>
Conclusion
This is only a very simple CSS tutorial, the purpose of which is to get you started with CSS programming. If you need more information, you can either contact us or just find it over the internet.
|
