| Cascading Style Sheets (CSS) are another way for | | | | please visit W3School's CSS Reference Page |
| web designers to tell the web browser how the | | | | Sometimes one could not just define HTML tags but |
| website should look. HTML does this already but CSS | | | | can set up generic descriptions. For example you |
| has greater advantages. | | | | want all font to be a certain size and color but you |
| With HTMl you would normally describe a paragraph | | | | want headers to have a different color and to be |
| with the tag followed by the specifiers such as color, | | | | bold. You would do this by the use of "selectors." |
| size, face, et ct. If you wanted other changes to the | | | | You would define one as follows: |
| font, they aren't logically a font tag specifier. They | | | | .header{font-size:larger;font-weight:bolder; |
| would have their own tag such as for bold or for | | | | } |
| italics. | | | | Note specifically that there is a period in front of a |
| CSS defeats the poor logic behind the original design | | | | word. The word is clearly not a tag. You may use |
| of the people who created HTML. In CSS you could | | | | any word you wish. The period tells the browser to |
| describe font for a paragraph by using something like | | | | look for HTML tags with the word embedded inside |
| the | | | | the "class" specifier. When it finds the word it uses |
| nt-family:arial;font-weight:bold; | | | | that design instead of the default. |
| } | | | | Besides advanced design capability, there are other |
| As you can see, we defined the paragraph tag with | | | | practical purposes for CSS. When you write HTML it |
| the "p" before the "{," described what the text | | | | will take up space. Of course web page will have a |
| should look like then how the font should be | | | | file size, right? Well, as people look at your site they |
| manipulated and closed everything with "}." This is | | | | download the information and it takes up "bandwidth" |
| more logical being that the look of the writing was | | | | and certain webhosts may limit this. Not only that but |
| described by "text" specifiers--text being defined as | | | | even if you host your site with your own server |
| the written word and therefore its look--and the | | | | then you would worry about bandwidth because it |
| typesetting and size manipulated by "font" | | | | increases employment expenses as well as many |
| specifiers--font being defined as a complete set of | | | | other problems. CSS helps because it reduces the |
| type of one size and face. | | | | many HTML tags defining the same basic design into |
| Now let's dissect the above. To start a CSS entry, | | | | just defined once. Also, because of that it reduces |
| we must tell the web browser what we are defining. | | | | the many web pages file size saving bandwidth. On |
| This would normally be an HTML tag. The one above | | | | top of that, web visitors can download the CSS file |
| defines the paragraph tag "p" but you could also do | | | | once to view all pages. Lastly, the separate CSS file |
| the span tag "span" or any table tag such as "td." | | | | can be set to define all web pages on your site. That |
| After telling what we are defining, we must open the | | | | means you make one change on a single document |
| script dialog. We do this by putting "{." We may then | | | | and your whole web site will look different. Now |
| enter our definitions. | | | | that's fantastic! |
| HTML is very limited in definitions. One may only | | | | To recap, with CSS one can describe how many |
| specify bold, size, and color. With CSS we may | | | | things should look. HTML can only describe one thing |
| define not just bold but how bold. We may define | | | | at a time. CSS can be embedded anywhere inside a |
| not just size in terms of pitch but also, percentages, | | | | webpage. HTML must be embedded right next to |
| pixels, width, height, et ct. We may also define the | | | | what it describes. CSS can not only describe many |
| what the text does such as letter spacing or even | | | | things but on many number of pages; HTML cannot. |
| blinking. | | | | You could create a single document with the |
| Type all the specifiers you'd like in the form shown | | | | extension ".css" which will control all your web pages |
| above. Name of the specifier and the specification | | | | on your site; HTML cannot. If you need to make |
| separated by a colon then ended with a semicolon. | | | | changes to your site, it will only take one change |
| Each entry should be on a separate line and all closed | | | | with CSS in one place but many on all pages with |
| off with a "}." For a list of available CSS specifiers | | | | HTML. |