ࡱ > t v q r s '` bjbjLULU 0 .? .? N 3 P P P P t t t _ _ _ 8 _ ` L$ ހ t a Nb " pb pb b n r o l o 8 $ R h t 'p k z n 'p 'p P P pb b Uy Uy Uy 'p R P pb : t b Uy 'p Uy Uy { t #| b a %v _ ys | { E} 0 ހ { , V v > V #| #| V t | Uy 'p 'p 'p 3y " 'p 'p 'p ހ 'p 'p 'p 'p L$ L$ L$ ; P_ D L$ L$ L$ P_ , h P P P P P P Introduction to Cascading Style Sheets (CSS)
Note: This material relies on previous HTML Workshops
Introduction
Cascading Style Sheets (CSS) is a language that allows you to define how you want your html document to look. This concerns features such as typeface, background, link colors, margins, and placement of objects on a page. Display instructions for these features are called style rules in CSS lingo.
Why style sheets? In the early days of HTML, one could define the various parts of a document (such as headings, body text, bold, etc.), but it was up to the browser to interpret what that was supposed to look like. Internet Explorer would display an
heading tag with a particular font, size, color, etc., and Netscape would choose a different combination, and so on. What this meant was that you could make your page look great in one browser, then look at it in another browser and everything would change. Then Netscape and IE started to add special display features to their browsers that developers would use, but those features simply would not work across all browsers. Companies were losing the point about the web being a place where people could view a document across all kinds of computers and browsers without having major differences.
There were certain display features, such as margins, that were not possible to create unless you created strange workarounds with the available tags, such as tables. These workarounds resulted in problems such as longer download times and very messy coding. Then, whenever there was a change to a website, such as your boss saying, Lets change our website color scheme, this meant editing many, many pages.
The W3C decided to tackle these problems by developing the CSS standard and urging all browser companies to comply with the standards. For the first few years companies resisted this call to order and there was a problem with browser compatibility with style sheet features. For example a style sheet command might work in Netscape 5.0 but not Netscape 4.0 and not in any version of Internet Explorer. These days this scenario is rapidly changing as companies are complying with the style sheet standards.
Why use them?
1. Style sheets make managing the look of multiple web pages MUCH easier by separating CONTENT from DISPLAY information.
2. They make web pages faster to download, very important when you are trying to reach people with older computers and modems.
3. The W3C is slowly phasing out old ways of coding HTML in its standards, for example the use of the tag. Professional standards are moving toward style sheets.
Where do I use CSS?
CSS style rules can be coded in three places:
Inline - right in the HTML tag
Internal Style sheet - at the beginning of an html document between the tags, and enclosed by the tags.
External Style Sheet - in a separate document that is used as a reference for multiple html pages, and there is a kind of link (example below) in the html pages that tells the browser where to look for the instructions:
You can have all three instances of style sheets in or linked to one HTML document. Styles are applied through four levels, the top levels overriding the levels underneath it. The browser will look for styles to apply in the inline style first, then the internal and finally the external style. In some cases when there are no styles applied, the browser will give the HTML document the browser default. Think about it this way: the closer the style rule is to the actual thing it is styling, the more power it has.
Inline style instructions: Big boss (right inside the HTML)
Internal sheet style instructions: Medium boss (at the top of the HTML page)
External sheet style instructions: Little boss (in a separate .css page)
Browser default: Littlest boss (set in your computer)
CSS Syntax
There are two parts to a style rule. The selector determines what HTML or div tag you are styling, and the declaration is made up of one or more property:value pairs, ending in a semi-colon and enclosed in curly brackets. In this case a property is a display feature such as color, and a value is what you want that property to look like. For example,
h1{color:red;}selectorpropertyvaluedeclaration
means I want my
headers text color to be red.
You can have more than one declaration for each selector. Just separate them with semi-colons. We also recommend you put each new rule on a new line, for easy reading. Put the ending curly bracket after the last one.
h1 {color: red;
background: yellow;}
The above declaration means I want all my
headers text color to be red and set in a background that is yellow.
This is the pattern that you will use to compose ALL of your style rules:
The thing you are talking about {the aspect of that thing: exactly what you want it to be;}
Now, think about some more examples of selector : declarations. What kinds of things can you change on a webpage? List them here:
Creating custom styles: classes and ids
Another brilliant part of CSS is the ability to distinguish unique sections in your HTML code, or to group several sections of HTML together under one set of rules. You do this with ids and classes.
ids
ids are customized styles created by you that work with div tags. All content enclosed within that div tag will follow the style rules set by your customized style. The way to do this is to create a set of declarations in your CSS. For example, lets say you want your navigation section to be all blue text in a 10pt font (different from your regular text which is black and 12pt by browser default). For this navigation section your declaration would be:
{color: blue;
font-size: 10pt;}
But what about your selector? Here is where you give it a custom name, with a numeral sign in front:
#nav {color: blue;
font-size: 10pt;}
The # sign means this is an id and the name of this selector is nav. The above styling code would go in your
TIP: When writing code, write the brackets first. That way you wont forget to put t h e c l o s i n g t a g o n l a t e r , a f t e r y o u v e t y p e d t h e c o n t e n t o f t h e t a g . F o r e x a m p l e , b e f o r e t y p i n g i n t h e r e s t , t y p e : <