CSS Tutorial for Beginners
CSS stands for Cascading Style Sheets, and it is essentially the language used for styling the contents of an HTML page. I won’t go into the history, reasoning and technical aspects of why CSS is so important. But, instead I will briefly sum up in a list of three reasons what the real purpose behind designing with CSS styles is.
For simple to complicated websites, the content within the site can be completely separated from the design of the site. This is important for a couple obvious reasons: you can update content without changing the style, and you can change the style (colors, fonts, layouts) without having to make any changes to the content.
You can make one change to a style sheet, and it will simultaneously change every part of your content that takes its orders from that style sheet. Let’s put this into perspective-changing one piece of CSS code, can change the colors, layout, fonts, and more of many, many, many pages all at one time. For a great illustration of this quality taking effect, please visit and read the information on the home page of:
http://www.csszengarden.com
Main Format
Cascading Style Sheets are composed of two main parts: Selector & Declaration.
This is an example of a simple style sheet:
H2 { Font-weight: bold;}
The Selector is “H2”
The Declaration is “Font-weight: bold”
If you attach this style sheet to any HTML document, all of the content held between the <H2> </H2> tags will be bold. There are many different types of declarations and selectors, and you will probably not memorize all of them. Having some kind of online resource, or text reference will help you when you’re in the process of creating your site. Also, Dreamweaver will automatically list the selector or declaration items if you type in part of it, Dreamweaver also has some unique visual aids and guides when working with CSS.
Attaching CSS
When you write up all of the style sheets, using the particular selectors (H2, H1, P, etc.) and declarations (font-weight: bold, font-size: 12px, etc) you will then save this document as a CSS file. CSS files contain no head tags, no paragraph tags; basically they are not formatted the way that HTML pages are formatted. Just the styles, that’s it.
You save the file will a .css extension, and then proceed to attach it to the HTML documents you want to be affected by it.
You would attach a style sheet as show in red and within the head portion of the HTML:
The code shown in green is the way in which you would attach a style within the HTML document, and requires no linking whatsoever.
<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="MainStyle.css" TITLE="Cool">
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML>
Now, you can probably see why putting a style attribute (declaration on a selector) within the body of the text defeats the purpose and greatness of CSS. It only affects the one piece of text that the style in surrounding.
SelectorsIf you are new to CSS, you are probably wondering…What I can use these style sheets on, so far I’ve only see P and H1… You can style almost any standard HTML selector, some examples include:
H1, H2, P, em
In addition to these selectors, you can actually create selectors yourself, and identify images or content as the selector! The two examples of this are:
ID Selectors have a unique value over all other selector elements. An example of what the CSS code would look like using an ID selector:
#Days { font-family: verdana; color: #ffffff }
There are two ways to specify the ID within the HTML code.
You can identify this ID with another element-
<p id=”Days”>Monday, Tuesday, Wednesday</p>
Or as its own DIV, which is also its own unique element-
<Div id= “Days”>Monday, Tuesday, Wednesday </Div>
Class Selectors similar to ID selectors, but their formatting is different, and they hold a slightly less importance than ID selectors when it comes time for the HTML to choose the order of the styles.
An example of what the code would look like:
.days {font-family: verdana; color: #ffffff}
There are also two ways to specify the class within the HTML code.
You can identify the class with another element:
<p class=”Days”> Monday, Tuesday, Wednesday</p>
Or as its own DIV, which is a unique element being styled by the class selector
<Div class=”Days”>Monday, Tuesday, Wednesday </div>
Here are some resources to help you better understand the many different class selectors and declarations. It is composed of many pages, but it is useful to get a general idea of some of the possibly attributes and selectors that can be made using CSS.
http://www.w3schools.com/css/css_reference.asp
I will continue the CSS Tutorial for Beginners in a “Part 2.” Cascading Style Sheets can be very confusing and overwhelming if you are new to them. When I first attempted to teach myself CSS, I spent hours upon hours, days upon days, trying to find resources online that provided me with in depth knowledge on the subject.
Hopefully, I can help someone avoid all that trouble. Please check out the links in the top five sections, this week (10/9/06-10/16/06) is all about CSS, and they are very useful. If you have any questions, or would like some advice on CSS, please post a comment or shoot me a message!
