CSS 101

CSS 101 WebComm School – 10/24/07

Huh? CSS? Does not stand for C orn S mut S idedish

Well, what is it then? Stands for C ascading S tyle S heets Simple language that defines how a website should look Separates the presentation of a website from the content It’s a web standard, and it’s here to stay! If done correctly, it will save you a lot of time and effort!

Where did this come from? Håkon Wium Lie proposed idea in 1994 W3C created, continues work on CSS CSS 1 published December 1996 CSS Working Group created in early 1997 CSS 2 published May 1998 CSS 3 has been under development for the past 8 years

Any problems with CSS? 11 years later, and Internet Explorer still does not correctly support CSS 1 No browser has full support for CSS 2 CSS doesn’t always have the best way of doing things, but it is the best we’ve got

How do I use it? Included into a web page in 3 ways External style sheet (best) Internal style sheet (not as good) Inline style (basically breaking the purpose of CSS) Style sheets will cascade , or overwrite similar styles to create one master set of styles Inline overwrites internal, which overwrites external, which overwrites browser default

How do I add CSS to my page? External <link href=“styles.css" rel="stylesheet" type="text/css" media=“screen" /> Internal <head> <style type=“text/css”> /* styles go here */ </style> </head> Inline <p style=“ /* styles go here */ ”>Text</p>

CSS Syntax Selector { property: value; } Selector is what you want to define (HTML element, for example) Property is the CSS style you want to change, with a Value that you set it at

CSS Selectors 3 types of selectors Tag selectors ID selectors Class selectors Selectors should never start with a number, nor should they have spaces in them

Tag Selectors Can be any type of HTML element body p div … and more! p { background-color: red; } Makes the background of all paragraphs red

ID Selectors You can give an ID to any element to style it differently than other similar elements IDs must be unique! You can not have two elements on one page with the same ID! p#special { background-color: blue; } One paragraph with id=“special” will now be blue

Class Selectors Can give multiple elements a class to style them differently p.semispecial { background-color: green; } Any paragraph with class=“semispecial” will now be green—can be multiple ones on a page

Descendant Selectors You can chain selectors together! Just put a space between them body #container p.warning a { color: red; } What element(s) will be affected by this style?

Grouping Selectors You can group selectors together as well with commas p.warning, p.special { color: red; } Now both classes, warning and special, will have red text.

Selectors, cont. Name selectors based on what the define, not on what they look like! Is anything wrong with this code? <div class=“red”> <h1>Warning!</h1> <p>A hurricane warning is in effect. Stay indoors.</p> </div> ------------------------------------------------------ .red { color: red; }

CSS Properties Literally hundreds of properties to choose from to change your webpage’s design You can change many things: Font and text properties Background colors, images Positioning Borders Margin, padding

CSS 101

Related slideshows

More Related Content

CSS 101