Site Development
Downloads
Help!!
Home
What Is CSS?CSS stands for "Cascading StyleSheets". CSS is a coding language separate and different from HTML. It works alongside HTML to provide a high level of control over how web pages look. To give you an example, only seven lines of CSS style all of the paragraphs on this whole site. Only seven lines. It picks the font, size, boldness, color, margins, etc. If I wanted to change the text color, I could do so by editing only one short line of code to change the whole site. This is the true power of CSS. It can do more than HTML and it can be applied as specifically or universally as needed. Font Color ExampleCascading Stylesheets are special instructions that are put in the <head> of your HTML files. We'll learn how to make one "external" Cascading Stylesheet to control several pages in a later lesson in this series. For now, we'll be putting our CSS code between <style> and </style> tags that are placed in the <head> of our pages. Lets make an example that will make all of the text in our <h3> headers pure blue and leave other headers and text alone. We'll begin by adding the <style> tags:
<html> Notice that both the opening and closing <style> tags are placed in the <head> of the HTML code. This tells the browser that the code between the tags will be written in CSS and not HTML. To be even more specific, add the TYPE attribute to the opening <style> tag. This attribute tells the browser that a specific styling language, CSS, is being used. There are other styling languages, but CSS has achieved almost universal dominance and acceptance. It is supported to one degree or another by all current browsers. Now, lets add the CSS code to make the <h3> text pure blue:
<html> Click here to see how the "style rule" we just made looks when rendered in a browser. One important thing to note is that one line of code will color all the <h3> text on the page. You don't have to code <font> tags inside each set of <h3> tags. You don't have to code <font> tags at all. In fact, you don't have to code anything except the <h3> tags themselves. Just one line of CSS code and they are all colored automatically. The Style RuleLets talk about a few things. First study the style rule itself:  The whole statement above is called a CSS "style rule". All style rules have an element. The element is what is to be styled. All of your HTML tags can be styled to some degree or another. There are other elements beside HTML tags that can be styled. We'll go into these later. The current style rule's element is "h3" meaning the <h3> tag. You don't include the angle brackets ( < > ) in style rules. You just type in the tag element you want to style. Next, notice the use of curly braces, sometimes called "curly brackets". The style rule's declarations are always put inside curly braces. There can be several declarations in one rule. We're just starting with one for simplicity. We'll move on in the next lesson. The style rule's declaration has two parts: a property and a value. These work a lot like HTML attributes and values, but there are a lot more properties and values to work with in CSS. A property is the characteristic you want to change, like "color" in our example. A value is what you want the property to be. We used a value of "blue". A hexadecimal color would be more appropriate (#0000ff for pure blue). The property and value are always separated (delimited) by a colon ( : ). There is no space between the property and the colon, but you can add a space between the colon and the value to make your code a little easier to read. When you make a syntax error, like adding an inappropriate space or mispelling a property or value, Netscape will ignore the entire style rule. Internet Explorer is a bit more forgiving and will ignore only the declaration in error. Try to get a copy of Netscape 4.x to view your pages in. If you don't see a style being applied in your rendered pages, check the syntax first. Don't forget to look for extra spaces and spelling. What You'll LearnFor now, play around with coloring your text with CSS. Try out using different tags for elements. For extra emphasis try adding color to <i> tags: i {color: red} Now your italicized text will be red as well as italicized. Play around coloring <blockquote>, <p>, etc. until you're comfortable with making the <script> tags in the <head> of your pages. The big keys are to remember the curly braces and the colon between the property and value. And remember, do not include the angle brackets in the style rule's element. Leave the angle brackets for the actual tags in your <body>. In the next few lessons you'll learn how to style fonts and links. You will also learn how to make "custom classes" that you can apply to any tags and content. |
To Next Beginning CSS Lesson
Back To Beginning CSS Index