The CSS Newbie Guide Cascading Style Sheets

Cascading Style Sheets or CSS for short, optimizes your website and allows for faster loading pages, and cleaner code. Years ago when you wanted to make a color change to your website site wide, it meant having to edit each and every page on your website. This was time consuming and super annoying to Web Dseigners. However, CSS came along and changed everything in the world of web design. Now, if you want to make a quick color change it is simple and can be done in one page, and the changes will be site wide. Another great feature of using CSS it allows you more freedom with your page layout design. Yes, it sure does, and if anyone tells you differently they are likely just a CSS hater. I can say that CSS has changed my web design habits for the better, and it is coding I could not do without these days. CSS is worth learning, and those that have not yet taken the chance to change their websites over to using CSS, what are you waiting for? Try it you just might like it and start writing your own article about it.

What is CSS Element Rules

CSS defines how the rules of elements in an HTML page should be displayed by a browser. It offers control over the elements of your pages. Using CSS allows you to go beyond standard HTML. You have more control which allows you to design a far better custom page that works across most browsers. Easily set margins, multiple background colors, borders, and font styles of a web page that can be defined and manipulated using style sheets. Style sheets allow you to set the rules for a web page.

First you need to how to include a style sheet on your web page. There are several ways to include style sheet information in your Web pages. You can write it directly into the page, using the <STYLE> _ </STYLE> tags, or link to it externally. This means you link to a stored style sheet using the <LINK> tag.

To use the <LINK> tag, use the following code. <LINK REL=STYLESHEET HREF="stylesheetname">

It's really that simple. Be sure to include REL=STYLESHEET so the browser will know the linked document is a style sheet and treat it accordingly. One of the nicest features of HTML is, no matter what kind of style sheet you use, whether internal or external, the rule syntax is the same.!

<STYLE>...</STYLE> What does this CSS Style information mean to me?

Provides a means to include rendering and display information using style sheet notation. Cascading Style Sheets (CSS) are currently the most widely supported standard, and all references of style sheets refer to CSS1 & CSS2. Information in the <STYLE> tag works with the clients default configuration as well as any externally referenced style sheets to provide an overall set of style rules for a given Web page.

The above cascading style sheet image sample shows us some code. This code can look very scary to some, but once you get the hang of it you'll be very excited about this not so scary CSS code. First I want to just mention that we can go into our HTML editors today and design a web page. Most editors today will use CSS coding. While we are designing our web pages we do not realize that he web editor is building us a CSS style sheet. You may not know this but it is you that designed that style sheet!

CSS Sample Example It Can Be Easy To Understand

We will explain it in simple terms. Lets say you highlighted some text in your web page and decided that you wanted that text to be red in color and to be larger. While the text is highlighted you choose the the color red for that font, and they you go and set the font size to be larger. What you did not see is behind the scenes is that a new style was made and it may look something like this.

.style1 {
color: #ff0000;
font-size: Larger;}

What the above is saying to us is that style 1 will have the color #ff0000 which is the HTML color for red. Next we will see font size which we set to larger. Later while working on my web page text I get to my sixth paragraph and I need to use that red larger text style again. What I can do is very simple. Highlight the text I would like to make larger and red, and then simply CHOOSE the style 1 and it will go right ahead and do that for me.

In the code view of my page this is what I'm likely to see for that text.
<p>Here is my paragraph and I want the next three words to be red and large
<span class="style 1"> so this is </span> what it will look like.</p>

The CSS Guts Standard Code for CSs

Now lets learn more about the actual usage attributes and syntax of CSS in our web page.

ATTRIBUTES:

Type="text"
Specifies the type of the style sheet in use. The type for CSS sheets is text/css. You can see your type to work for your environment. Example is shown here.

Media=screen | print | projection | braille | speech | all
Identifies the ideal environment for the Web page to be conveyed in. The default is all, and screen will be used in most cases because Web pages are most often viewed on a computer screen. However, pages designed for presentations would use the project value, while those meant to be read by a text-to-speech reader would use the speech value. Currently, this attribute provides information only an does not affect the way the style sheet is interpreted or the page rendered. You may include more than one media type, each separated by commas.

Style Sheet Syntax:

As we mentioned style sheets are composed of rules. Lets say that we want all of our Heading 3 areas on our web pages to use the font called Garamond. We would have to set some style rules for this to happen. Style rules take the following format:

H3 {font-face: Garamond}

Breaking down the preceding example, as style rule has two parts.

• Selector: Written to the left of the curly braces, the selector specifies the HTML element that will be used to invoke the style rule. In the example, H3 is the selector.


• Declaration: Written within the curly braces, the declaration specifies how the selector should be rendered. In the example, {font-face: Garamond} is the declaration. A declaration has two parts.


• The Property: specifies which aspect of the HTML element should be modified. In the example, font-face is the property.


• The Value: specifies how the property should be rendered. In the example Garamond is the value.

CSS Video Tutorial Dreamweaver Site Design and CSS

Learn how to edit CSS sheets with our Dreamweaver Video Tutorials. Do you want to learn more about CSS and using it in the wonderful HTML web design editor called Dreamweaver? It is a program I use seven days a week twelve hours a day, and I have to say I simply adore it. If you have earlier or newer versions of Dreamweaver you can still follow along, but sadly some earlier versions are not CSS savvy. Do not let this stop you from watching because you will learn something helpful here. Find out more at our Video tutorials page.