FREE CSS TUTORIAL
Sample of the pdf document
CSS is an excellent addition to plain HTML.
With plain HTML you define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will therefore have to work your way through the document and change it.
With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site.
Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site.
Finally, CSS can be written so the user will only need to download it once - in the external style sheet document. When surfing the rest of your site the CSS will be cached on the users computer, and therefore speed up the loading time.
The only reason not to use CSS in your design is not knowing how!
With plain HTML you define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will therefore have to work your way through the document and change it.
With CSS you define the colors and sizes in "styles". Then as you write your documents you refer to the styles. Therefore: if you change a certain style it will change the look of your entire site.
Another big advantage is that CSS offers much more detailed attributes than plain HTML for defining the look and feel of your site.
Finally, CSS can be written so the user will only need to download it once - in the external style sheet document. When surfing the rest of your site the CSS will be cached on the users computer, and therefore speed up the loading time.
The only reason not to use CSS in your design is not knowing how!
SELECTORS
Selectors are the names
that you give to your different styles.
In the style definition you define how each selector should work (font, color etc.).
Then, in the body of your pages, you refer to these selectors to activate the styles.
For example:
In the style definition you define how each selector should work (font, color etc.).
Then, in the body of your pages, you refer to these selectors to activate the styles.
For example:
|
In this case B.headline is the selector.
The above example would result in this output:
|
TAG SELECTORS
The general syntax for an HTML selector is:
HTMLSelector {Property:Value;}
For example:
HTMLSelector {Property:Value;}
For example:
|
Click here to open a window that shows the result of the above example.
HTML selectors are used when you want to redefine the general look for an entire HTML tag.
CLASS SELECTORS
The general syntax for a Class selector is:
.ClassSelector {Property:Value;}
For example:
.ClassSelector {Property:Value;}
For example:
|
Click here to open a window that shows the result of the above example.
Class selectors are used when you want to define a style that does not redefine an HTML tag entirely.
When referring to a Class selector you simply add the class to an HTML tag like in the above example (class="headline").
SPAN and DIV as
carriers
Two tags are particularly useful in combination with class selectors: <SPAN> and <DIV>.
Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles.
Two tags are particularly useful in combination with class selectors: <SPAN> and <DIV>.
Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles.
|
<DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice when defining layers on your pages.
ID SELECTORS
The general syntax for an ID selector is:
#IDSelector {Property:Value;}
For example:
#IDSelector {Property:Value;}
For example:
|
Click here to open a window that shows the result of the above example.
ID selectors are used when you want to define a style relating to an object with a unique ID.
This selector is most widely used with layers (as in the above example), since layers are always defined with a unique.............
Click here for Download PDF / FREE
0 commentaires: