|
|
|
|
Lesson One | |
|
Cascading style sheets help HTML look more elegant. HTML is somewhat limited as to what it can do. CSS adds more functionality to HTML tags, making them more dynamic. CSS is considered to be part of the extensible hypertext mark-up language, or XHTML. In order to render your CSS properly, you need to set your DTD. A DTD, document type definition, is a text document that contains the rules for how a mark up language works. To set up your DTD properly, you need to make it look like the line below: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml-strict.dtd"> Once you have that set, you can start adding CSS to your pages. There are three ways to do this: inline, embedded, and external. We'll begin with inline. Inline style sheets are added to the HTML tags. In the example below, the text that is within the H1 tags will be altered according to the what the style has been set to: <H1 style="font:small-caps bold italic 2.5em Georgia, 'Times New Roman', Times, serif; color: red;"> This may seem like it adds more clutter to your HTML than need be, but you will be able to take advantage of what cascading style sheets has to offer. Looking at the code above, what we're doing is setting the font to small capital letters that are bold and italicized. The 2.5em is saying that the width of each letter is relative to the width of the letter M in that font. Georgia, 'Times New Roman', Times, and serif are the default fonts that will be rendered by the browser. Notice between "font" and "small" there's a colon (:). This acts as an equals sign (=). The semi colon (;) separates one style from another. The color was set to red. Although you can use whatever values you want to set the color, there are some things you should be aware of when it comes to style sheets. You can use either of the four formats: #RRGGBB (this can be shortened if using doubles like #22CC99 would be #2C9), rgb(R#,G#,B#) where you'd use the number 0-255 (rgb(155,42,255)), rgb(R%,G%,B%) where the percentage is between 0-100% (rgb(20%,20%,80%)), and the plain and simple color name (purple). One word of warning, there are only a few colors that are browser-safe. For hex values, stick with 00, 33, 66, 99, CC, and FF. For numeric, try using 0, 51, 102, 153, 204, and 255. For percentages, use 0, 20, 40, 60, 80, and 100. To keep your tags from being too cluttered, you can use embedded style sheets. Embedded style sheets are added to the <HEAD> of an HTML document. To do this, you need to set up the style within its own block. Below is an example of how to use embedded style sheets:
<style type="text/css" media="all"> The type="text/css" defines all the styles use in this document will be cascading style sheets, and media="all" applies the style sheet to the document, regardless of what machine is used. This cleans things up a bit, but your document is still a lot longer than without the style sheets. To remedy this, we will take a look at external style sheets. To enable the use of external style sheets, we need to create a way to get the information from the external file. This can be done in the <HEAD> section of an HTML document in one of two ways; either to link to the file or to import it. Let's see how this works: <link rel="stylesheet" href="filename.css" type="text/css" media="all" /> // links to the style sheet or @import url(filename.css); // imports the style sheet Now that you have either of these added to the <HEAD> of your document within the <STYLE> tags, you can take all the styles that you have in there and create a text file with just those lines in it. This cleans up your page and adds only a small amount of new text. Notice with the link we added a space and a slash ( /) at the end of the tag. Seeing as there's no closing tag for a link, we need to add this as a way of making the tag self-closing. Now, we need to define the HTML tags we are using. If you look our example above, we showed three lines using different colors that we called selectors. Selectors are references to the HTML tags that are being given a new style. As you can see above, we have an HTML selector, a class selector, and an ID selector. The first we'll define is the HTML selector. To define an HTML selector, use the property of the HTML tag, followed by an opening curly bracket ({), the text that creates the style, then end it off with a closing curly bracket (}). This will not override the original tag, it adds to it. <B> will still make text bold, <P> will still create a paragraph, and <I> will still italicize text. Next, we'll look at defining class selectors. When defining class selector, you give it a unique name that will act as an independent identifier to be used by the style attribute or the tags you want to use them in, followed by an opening curly bracket ({), the text that creates the style, then end it off with a closing curly bracket (}). You can make the class selector dependent on particular tags by adding to the HTML selector to the front of it. As an example, H2.formText {color: green;} would add the color green to the H2 tag with the class name "formText". To do this, you would type <H2 class="formText">. A few rules to follow: use only letters and numbers, the first character cannot be a number, and don't use spaces. Also, a class name cannot be a JavaScript reserved word. For a list of those words, click here. Finally, we'll look at defining ID selectors. An ID selector is defined and used in a similar way as a class selector, except it begins with the pound character (#). The only big difference is that JavaScript uses these to identify unique objects on a screen, so you can only use these once per page. ID selectors can also be dependent on particular tags by adding to the HTML selector to the front of it, as in H2#formText {color: green;}. You can have the same style for different tags. Say you want H2 and H4 headings along with any bold text to have the same color. You'd type H2,H4,B {color: green;}. If you wanted to use these with your form class selector, you'd type H2,H4,B.formText {color: green;}. The !important declaration can be added to a property value to give it precedence when determining the cascade order, which the declaration gets applied. To do this, you create your declaration, then, after the style properties, type !important. When you're finished, it should look like this: H2#formText {color: green !important;}. Always make sure that you locate the !important statement BEFORE the semicolon (;) and not after or the declaration, and possibly the whole rule will be ignored. When you have a tag or tag set surrounded by another tag set, they are considered nested. The outer one is the parent and the inner one is the child. That would make two tags inside the parent tag siblings and if they were next to each other they'd be adjacent siblings. Selectors specifying styles for these tags are called contextual selectors. There are four types of contextual selectors: descendant, child, adjacent, and universal. First, we'll look at descendant selectors. Descendant selectors let you specify individual styles depending on their parent selector or their place in a list of selectors. The last selector will receive the style if, and only if, it is the descendant of the preceding selector. To define a descendant selector, you'd type: #copy b i {...}. Then, you would add the style to your document like this: <div id="copy"><b><i>...</i></b></div>. The i style will be applied if, and only if, the i selector occurs as a descendant of the b or div selectors. This is an incredibly powerful tool in Web design as you'll see when we discuss layout techniques and moving HTML code around in your page in later lessons of this tutorial. Next, we'll look at child selectors. A child selector is the direct descendant of the parent selector. You do this by adding a right facing chevron (>) between the parent and child selectors. Here's how it's done: b>i {...}. Now, if, and only if, your document looks like this: <b><i>...</i></b>, the style will be applied. Next, we'll look at adjacent sibling selectors. Adjacent sibling selectors lets you define the first occurrence of the tag that appears immediately after another tag. This is done by adding a plus sign (+) between each element. Here's how it would look: b + i {...}. This style would apply if, and only if the second element occurred immediately after the first one like this: <b>...</b><i>...</i>. Now, we'll look at the universal selector. The universal selector acts more like a grandparent/grandchild type way. This selector uses an asterisk (*) between each element. You would code it like this: #copy * i {...}. This style would apply if, and only if the first element is no more than one level up from the second one like this: <div id="copy"><b><i>...</i></b></div>. In addition to selectors is setting styles based on an element's attributes. There are four ways to do this, either by attribute, exact value, a value in space-separated list, or if it begins with a value in a hyphen-separated list. Below are examples of each: img[onclick] {...} // sets styles based on existance of an attribute a[href='index.html'] {...} // sets styles based on attribute's exact value img[alt~='Illustration'] {...} // sets styles based on attribute's value within a space-separated list p[lang|='en'] {...} // sets styles based on attribute's value being first in a hyphen-separated list Question: WOW!! You just said a mouthful. I'm glad I came here to learn about cascading style sheets. What's next, some other programming language? Answer: Hold on there cowboy! Just because this lesson had a lot of information doesn't mean we're done. Next, we'll learn how to take full advantage of the basics. |
|
|
If you have a questions about any of the lessons, feel free to ask. | |