|
| |||
MAIN MENUCascade Style Sheets (CSS) IntroductionCSS Selectors Where CSS definitions are embed in HTML page CSS attributes CSS & MySpace WHERE TO PLACE ITCSS can be added to your pages at 3 different levels.It is possible to create CSS styles that only work for the single tag it is defined for. Single tag CSS is used when the style is used in a single place on the entire site. Usually a certain style appears more than once on your pages, and thus you should use the second technique: adding styles that are defined once for the entire page. If, however, that certain style is used on more than a single page, you should use the third - and most powerful - technique described: adding styles that are defined once for the entire site. SINGLE TAGSCSS can be defined for single tags by simply adding style="styledefinition:styleattribute;" to the tags.Look at this example:
You should limit your use of single tag CSS. If you define your styles for each and every tag they're used on, you will lose much of the power associated with CSS. For example, you will have to define the style over and over again whenever it's used, rather than just defining it once and then referring to that one definition whenever it's used. Furthermore, if you wanted to change a certain style, you'd have to change it all over in your document, rather than in one place. SINGLE PAGESCSS can be defined for entire pages by simply adding a style definition to the head section.Look at this example:
In the above example, although we used the sublines style twice, we only had to define it once: in the <head>section. By defining styles for entire pages, you will gain the freedom to easily change the styles even after the entire page has been made. This is an obvious advantage for you as a designer. But the advantage is on the visitors side as well. Since the styles are only defined in one place, the page size will be smaller, and thus faster to load. There is a way to emphasize these advantages even more: using external CSS styles that work for entire sites. ENTIRE SITESCSS can be defined for entire sites by simply writing the CSS definitions in a plain text file that is referred to from each of the pages in the site.Rather than writing the entire CSS definition on each page, as in the previous examples, you can write it to a text file that is only loaded on the first page that a visitor sees at your site. When the visitor jumps to other pages, the CSS text file will be cached and thus doesn't have to be transferred via the internet for subsequent pages. This means that your pages will load faster while at the same time you will have extreme flexibility to change the style for your entire site even after it has been made. Look at this example: File: example.html
The above example is the exact same as we used for CSS defined for entire pages, with one important exception: There is no style definition on the page. Instead we added a reference to an external style sheet:
This means that the browser will look for a file called whatever.css and insert it at the place where the reference was found in the html document. So in order to complete our example we need to have a file called whatever.css that looks like this: File: whatever.css
Now if you just add the line <link rel=stylesheet href="whatever.css" type="text/css"> to the <head> of all your pages, then the one style definition will be in effect for your entire site. Imagine the power and flexibility this gives you to make changes to the layout even after the site is done. But also realize how using an external style sheet will guarantee that all pages are following the same thread. There won't be single pages that you forgot to update when you decided to change the style for your headers. At this point of the tutorial you should know:
All we need now is a walkthrough of the various style attributes that can be assigned. We will divide them into three categories:
| ||||||||||||||
| go home Contact tables graphics Profile videos Extended network graphics Animated icons | ||||||||||||||
