Definition CSS “Short for Cascading Style Sheets, a new feature being added to HTML that gives both Web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any Web page. The term cascading derives from the fact that multiple style sheets can be applied to the same Web page.” -Webopedia.com Style Sheets Contents Basics “STYLE” as attribute “STYLE” as tag External CSS

Style Sheets: The Basics A Style sheet is essentially a series of definitions for how something will appear on your web page. It can be used to define something as simple as the color of text or as complex as the line height of a paragraph and the amount of space between letters. It can also be used position images and text absolutely on the page. The largest advantage of CSS is that you can control the appearance of many pages by just changing the file that contains the style definitions. That will be covered in “External CSS.” Mastering CSS will give you almost absolute control over how your page looks. And in Web Design, looks are half the battle.

Style Sheets: The Basics The syntax of CSS is different than HTML and Javascript. The basic definition looks like this: A colon(:) is used instead of an equal sign(=). So the example definition is stating that the color of what is being defined will be red. A series of definitions are divided by semi-colons(;) like this: These definitions can be placed inside the STYLE attribute inside of a tag or set up as “classes” inside of a area. color:red color:red; font-size:12; background-color:green

Style Sheets: “STYLE” Attribute The STYLE attribute can be placed in almost any tag from to to. The first example is of using it in the tag to control text. On the left is the code, on the right is the result. Hello World! Hello World

Style Sheets: “STYLE” Attribute I am now going to put that text inside of a table that also has a style attribute. Almost any tag can take the STYLE attribute, you just need to know what aspects of a tag you can change. Go to the links page of the class website to find good references of all the definitions and what they can be set to. Hello World!

Style Sheets: “STYLE” Tag Instead of using the STYLE attribute inside of every tag you want to change, you can declare a “class” of definitions that can be referred back to anywhere in the document. You must start with creating an area for those classes in between the within the like so: This is where you will declare your classes.

Style Sheets: “STYLE” Tag Once again, we return to the importance of syntax. There are some strange symbols and punctuation used in declaring a class, and you must be precise or else it will not work. Here is the anatomy of a class declaration:.classname{color:#89FF00; font-size:30} Inside of the STYLE tags.

Style Sheets: “STYLE” Tag Once again, we return to the importance of syntax. There are some strange symbols and punctuation used in declaring a class, and you must be precise or else it will not work. Here is the anatomy of a class declaration:.classname{color:#89FF00; font-size:30} Inside of the STYLE tags. The period is necessary

Style Sheets: “STYLE” Tag Once again, we return to the importance of syntax. There are some strange symbols and punctuation used in declaring a class, and you must be precise or else it will not work. Here is the anatomy of a class declaration:.classname{color:#89FF00; font-size:30} Inside of the STYLE tags. The period is necessary You can name your class whatever you like

Style Sheets: “STYLE” Tag Once again, we return to the importance of syntax. There are some strange symbols and punctuation used in declaring a class, and you must be precise or else it will not work. Here is the anatomy of a class declaration:.classname{color:#89FF00; font-size:30} Inside of the STYLE tags. The period is necessary You can name your class whatever you like All the definitions must be inside curly braces.

Style Sheets: “STYLE” Tag Once again, we return to the importance of syntax. There are some strange symbols and punctuation used in declaring a class, and you must be precise or else it will not work. Here is the anatomy of a class declaration:.classname{color:#89FF00; font-size:30} Inside of the STYLE tags. The period is necessary You can name your class whatever you like Definition 1 All the definitions must be inside curly braces.

Style Sheets: “STYLE” Tag Once again, we return to the importance of syntax. There are some strange symbols and punctuation used in declaring a class, and you must be precise or else it will not work. Here is the anatomy of a class declaration:.classname{color:#89FF00; font-size:30} Inside of the STYLE tags. The period is necessary You can name your class whatever you like Definition 1 Divided by semi-colon All the definitions must be inside curly braces.

Style Sheets: “STYLE” Tag Once again, we return to the importance of syntax. There are some strange symbols and punctuation used in declaring a class, and you must be precise or else it will not work. Here is the anatomy of a class declaration:.classname{color:#89FF00; font-size:30} Inside of the STYLE tags. The period is necessary You can name your class whatever you like Definition 1Definition 2 Divided by semi-colon All the definitions must be inside curly braces.

Style Sheets: “STYLE” Tag Once again, we return to the importance of syntax. There are some strange symbols and punctuation used in declaring a class, and you must be precise or else it will not work. Here is the anatomy of a class declaration:.classname{color:#89FF00; font-size:30} Inside of the STYLE tags. The period is necessary You can name your class whatever you like Definition 1Definition 2 Divided by semi-colon All the definitions must be inside curly braces. You can put as many definitions into one class as you want. In addition, you can make as many classes as you want inside the tags.

Style Sheets: “STYLE” Tag Once you have declared your class, you can use it in the body of your page. Since this class is for text, I’m going to use the tag..classname{color:#89FF00; font-size:30} Hello World!

Style Sheets: “STYLE” Tag Once you have declared your class, you can use it in the body of your page. Since this class is for text, I’m going to use the tag..classname{color:#89FF00; font-size:30} Hello World! The text that you wish to change the style of must be within the tags.

Style Sheets: “STYLE” Tag Once you have declared your class, you can use it in the body of your page. Since this class is for text, I’m going to use the tag..classname{color:#89FF00; font-size:30} Hello World! The text that you wish to change the style of must be within the tags. CLASS is the attribute you use to name the class you are using

Style Sheets: “STYLE” Tag Once you have declared your class, you can use it in the body of your page. Since this class is for text, I’m going to use the tag..classname{color:#89FF00; font-size:30} Hello World! The text that you wish to change the style of must be within the tags. CLASS is the attribute you use to name the class you are using And, of course, you put the name of the class you want to use as the value The CLASS attribute can be used in as many different tags as STYLE. If you have declared a class for some aspect of your page, you can almost always put the CLASS attribute in the tag.

Style Sheets: External CSS By creating a class inside of your HTML document, you can use those definitions throughout the page and change the appearance of many elements just be changing one definition. However, if you have an external style sheet, you can change the appearance of many pages by just changing one definition in one file. This requires the creation of a.css file. The process is very similar to how you save an HTML file. And please remember, for this to work, the.css file needs to be in the same folder as the.html pages that are using its classes.

Style Sheets: External CSS To create an external style sheet: 1.Open a new notepad document. 2.Put in your class declarations just like you would inside of the tags (but you don’t put any HTML tags inside the document). Like so:

Style Sheets: External CSS 3. Then go to file->save. Make sure that you save your file as filename.css. Remember, the file name can be anything, you just have to remember to save it with a period (.) then css.

Style Sheets: External CSS 4.Finally, instead of putting in the HEAD, you put this very important line. Don’t worry about exactly what it means, just copy it exactly (but with the correct “filename.css”). 5.You may now use the classes in your.css file on any of your pages so that they have a uniform look and feel. If you decide to change what it looks like, you only need to change the definition in the.css file and it will change all of the pages using that class. Have fun. Hello World! Make sure you enter the file name as you saved it. Use the class that’s in the.css file just like normal.