Cascading Style Sheets (CSS) Introduction
From Academic Computing
Contents |
[edit] Purpose
To introduce the CSS rules - lines of style code that control the look and layout of web pages.
[edit] Prerequisites
This is an advanced level hypertext workshop and students must have previous experience creating web pages with markup (HTML or XHTML). Students should attend (or have equivalent knowledge of) the XHTML Introduction and at least two of the Intermediate level XHTML workshops.
[edit] What is CSS?
Cascading Style Sheets (CSS) are guidelines for how a web page/web site should look. CSS gives the web developer a simple way to control design for hundreds of pages from one source.
For instance, if I wanted every web page in my site to have the same background color, I could do two things. I could put the BGCOLOR attribute on every page, or I could use a single style sheet to set the background color. Using the style sheet allows me to change the background color on every page to something else, just by changing the CSS instruction (rule). Without CSS, I'd have to open up every page and change the value for the BGCOLOR attribute.
The real benefit of CSS is going to become more apparent as you go through this handout. Besides making it easier to control lots of web pages, CSS reduces the need to put formatting tags/attributes on your individual pages. This means that your .html pages will have less code. Less code means smaller file sizes. Smaller file sizes means faster loading pages. Also, with less code, your .html file will look less cluttered, which may encourage you to update it more often. At the very least, it will be easier to update.
Like I said before, the benefits of CSS will come to light soon. The next section explains the proper way to write CSS instruction. It is different than normal HTML and it's important, so read the Syntax section carefully.
[edit] Style Sheet Syntax
CSS has a particular syntax, and if it isn't followed your style sheets may not work. CSS instruction is written in lines, called rules. A rule is made up of three parts:
SELECTOR {property:value}
In most cases, the selector will be the tag that you want to control, but it isn't limited to that. The property is the CSS attribute, and the value specifies how the property should behave. The property/value combination is called a declaration.
The terms are a little unusual, but I think an example will make it much easier to understand. This particular CSS rule would set the default font color on a web page to purple.
BODY {color:purple}
When you are working with a selector, you can use more than one declaration (property/value combo). Just put a semi-colon ";" in between each declaration. To make the CSS code easier to read and edit, I recommend putting each delcaration on a separate line. All of the declarations for a single selector are enclosed within the curly brakets { }.
BODY {color:purple;
background-color:yellow;
margin-left: 50px;
margin-right: 50px}
[edit] Grouping Selectors
Selectors can be grouped together so that you don't have to retype some of the declarations. For instance, the CSS rule below will control H1, H2, and H3 tags. They will all have the same style, but they will have different sizes.
H1, H2, H3 {color:#000066;
background-color:transparent;
text-align:center;
font-style:italic}
[edit] Contextual Selectors
You can also set selectors so that they work only when they are contained within another selector. For instance, the <B> tag will bold some text, but the following CSS rule will make the <B> tag highlight the text in yellow, ONLY when the <B> tag is contained within a paragraph (set of <P>...</P> tags).
P B {color:#000000;
background-color:yellow;
font-weight:bold}
[edit] Methods of Using CSS
There are three main ways that you can use CSS to control web pages: Linked, Embedded, and Inline. You can use one method, or you can use combinations of two or three methods. Multiple methods working together is why you have "cascading" in cascading style sheets.
[edit] Linked Styles
Linked styles allow the user to control multiple web pages with one external style sheet.
[edit] Embedded Styles
Embedded styles allow the user to control one web page.
[edit] Inline Styles
Inline styles allow the user to control one section of one web page.
[edit] Linked Style Sheets
A linked style page is ideal when you want to create a consistent look through all of the pages in your web site. Background colors, font colors, font styles, heading styles, etc. are all common HTML elements that should be the same for every page. For instance, this handout is on the web. All (well, almost all) of the workshop handouts are controlled with a style sheet. The headings are all the same color, the paragrahps all have the same margin space, and so on.
A linked style sheet makes it easy to set and change style elements on an unlimited number of pages. If you want to change the background and font colors of all of you web pages, you can just change your one style sheet. If you aren't using CSS, then you'd have to open up each page and change the BGCOLOR and TEXT attributes in the <BODY> tag. Within seconds, I could change all of the titles and subtitle colors on all Academic Computing workshop handouts.
Creating a linked style sheet is very easy. Open up a blank page in the same text editor that you use to create your HTML pages. Now, start typing some CSS rules. When you are done, save the file in the same location as your .html files, but name this one as xxxxx.css. Call it anything you want (no spaces, no capital letters), but make sure you end it in the .css extention. Just like .html files, save .css files as text type.
BODY {color:purple;
background-color:yellow;
margin-left:50px;
margin-right:50px}
After that, you need to add one line of HTML to the HEAD section of your html page(s) that you want to control with your new style sheet. Enter the following code to link the html page to the css page.
<LINK REL="stylesheet" TYPE="text/css" HREF="xxx.css">
REL= Relationship lets the browser know that the linked file is a stylesheet.
TYPE= Specifies the Internet media type of the linked resource. The type of file we're linking to is a text-based, css file.
HREF= Specifies the name and location of the file you are linking to. If the .css file is in the same folder as the .html file, then all you need is the name of the .css file. If your css file is stored in a subfolder, then you'd have to put the path of that file. ex: HREF="styles/xxxxx.css".
Once you've got at least one .html file, a .css file, and they are linked together, start adding some CSS rules to the .css file. You can check out the CSS samples for some ideas.
[edit] Embedded Styles
Embedded styles are useful when you want to control just one or two pages. Say you've got a pretty large web site that you are controlling with a linked stylesheet, but you want your online resume to be different. In that case, embedded styles will work.
Embedded styles are also very easy. You write your CSS rules in the same fashion as in linked styles, but instead of putting them on a separate file, you put them in the HEAD section of the page you want to control. You also put a set of <STYLE> tags in the head section to mark off your CSS rules.
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY {color:purple;
background-color:yellow;
margin-left:50px;
margin-right:50px}
-->
</STYLE>
</HEAD>
The remark tags (<!-- ... -->) are used for the benefit of older web browsers that can't read CSS. The remark tags will hide the css code, so that the page will still display, without displaying your actual CSS. New broswers will accept the CSS just fine even if you put the remark tags.
You probably also have a set of <TITLE> tags and maybe some <META> tags in your HEAD section. Whether you put the STYLE rules before or after these elements doesn't matter, as long as they are all in the HEAD section.
Once again, you can check out the CSS samples for some ideas on using embedded styles.
[edit] Inline Styles
Inline styles are used to control one section of a single web page. For instance, say you want to put a special, attention-grabbing message on your main web page. You'll only need the message there for a week or so, so you don't want to add CSS rules to your linked style sheet or you embedded styles. You can use inline styles.
<TAG STYLE="property1:value1;property2:value2">...</TAG>
To create inline styles, you put the style declarations as values to a STYLE attribute. The STYLE attribute is contained in the html tag you want to control. The inline style below would give you an attention-grabbing look:
<H1 STYLE="color:yellow;background-color:red"> Under Construction!<BR> Check back Friday for the new site. </H1>
In this example, the inline styles will only affect this one H1 element. All of your other H1 elements will have the style set by the external style sheet and/or the embedded styles. Stylesheets are cascading, too. That means that if I set the H1 elements to be centered in my linked or embedded styles, this particular element would be centered, yellow text, and a red background. I don't have to duplicate my declarations.
[edit] Styles with CLASS
It is time to learn a new attribute. The CLASS attribute is used to define a set of elements that are to be controlled by CSS. Got it? Once again, an example is in order.
What if you want to use that attention-grabbing message (from the example of inline css) on several pages throughout your web site. You could do inline styles each time, but then that would be more work than what you really want to take on. Also, if you ever wanted to change the look of these messages, you'd have to open each page that contained one and edit the inline styles. Or, you can use a .selector (dot-selctor) with your style declarations, then refer to it with a CLASS attribute. Put this style rule on an external style sheet:
.attention {color:yellow;
background-color:red;
font-size: 14pt;}
Now that you've got that, go to your html page (any page that is LINKed to this .css file) and put this in:
<P CLASS="attention"> Check out this hot, new release! </P>
That new .selector doesn't have to go in a paragraph tag. You can put it in all kinds of tags, including the Headline tags <H1> - <H6> and <DIV> tags. You can make up whatever you want for a .selector, just make sure that you don't use any spaces or capital letters.
[edit] CSS Samples
The most challenging part of using CSS will be getting used to the proper names for the different declarations (properties and values). Listed below are some specific CSS rules. You can find a more detailed list of CSS rules by checking out the links in the CSS resources.
[edit] Web Page Backgrounds
BODY {background-color:blue;
background-image:url(image.gif);
background-repeat:repeat-y;
background-attachment:fixed}
[edit] Links
A:link {color:blue;
background-color:transparent;
text-decoration:none}
A:active {color:blue;
background-color:red;
text-decoration:none}
A:visited {color:ltblue;
background-color:transparent;
text-decoration:none}
A:hover {color:purple;
background-color:transparent;
text-decoration:underline}
[edit] Paragraphs
P {color:#000066;
background-color:transparent;
text-indent:.5in;
line-height:1.5}
P A {color:blue;
background-color:red;
text-decoration:underline}
.quote {color:#000066;
background-color:transparent;
font-size:11pt;
font-style:itlaic;
line-height:normal}
[edit] Headings
H1 {color:#000066;
background-color:transparent;
margin-left:100px;
text-align:center;
text-transform:uppercase}
H2, H3 {color:#000066;
background-color:transparent;
margin-left:100px;
text-align:left;
font-style:italic}
H4 {color:#000066;
background-color:#d7d7d7;
font-size:12pt;
font-weight:bold;
font-style:normal}
[edit] Lists
UL LI {color:#660000;
background-color:transparent;
list-style-type:disc;
list-style-image:url(image.gif)}
UL LI LI {color:#660000;
background-color:transparent;
list-style-type:circle}
OL LI {color:#660000;
background-color:transparent;
list-style-type:upper-roman}
OL LI LI {color:#660000;
background-color:transparent;
list-style-type:lower-alpha}
A few of the declarations above don't work with Netscape, just Internet Explorer. Don't let that stop you from using them though. If you check out the Master List in the CSS Resources, you'll find a list of some common CSS declarations, and the browsers they work with or don't work with.
