Scribd
Upload
32 views

CSS: Controlling Presentation: INFO 1300 September 23, 2009

This document discusses using CSS to control presentation and styling of HTML elements. It covers using IDs and classes to uniquely or commonly style elements, inheritance of styles, and adding structure with div and span tags. The key points are: - IDs uniquely identify a single element, classes identify groups of elements to style the same. - Styles cascade down the document tree from parent to child elements. - Div and span tags add structure to group elements for styling whole sections. - CSS rules have specific selectors and properties to target elements, IDs, classes, etc. for styling.

Uploaded by

Mark Lu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

CSS: Controlling Presentation: INFO 1300 September 23, 2009

This document discusses using CSS to control presentation and styling of HTML elements. It covers using IDs and classes to uniquely or commonly style elements, inheritance of styles, and adding structure with div and span tags. The key points are: - IDs uniquely identify a single element, classes identify groups of elements to style the same. - Styles cascade down the document tree from parent to child elements. - Div and span tags add structure to group elements for styling whole sections. - CSS rules have specific selectors and properties to target elements, IDs, classes, etc. for styling.

Uploaded by

Mark Lu
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

CSS: Controlling presentation

INFO 1300 September 23, 2009

So far
h1 { color : #A0BBF2; } p { font-size: 12px; font-family: Verdana, sans-serif; } body { background-color: black; } CSS rules let you style HTML elements

What if you wanted to style an element uniquely


All paragraphs are red All paragraphs are red But one is blue All paragraphs are red All paragraphs are red

What if you wanted to have differently styled groups of an element


These paragraphs are red These paragraphs are red These paragraphs are blue These paragraphs are red These paragraphs are red These paragraphs are blue These paragraphs are blue

Styling an element use uniquely with an id

This a <p>, But it has different styling than other <p>

Lets look under the hood

Using ID for unique styling


#idName {property: value; property:value}!
#contactinfo {color: orange}!

Remember: an ID can only be used in ONE place in an HTML document. But the same ID can be used in multiple HTML documents. And a CSS file using a ID as a selector can be linked to by multiple HTML documents.

Styling a group of elements the same with a class

This a <h2> and a <p>, both have color:green

Lets look under the hood

Using classes to styled a group of elements the same

Of course you can make this element specific

Class Syntax
.className {property: value; property:value}!
.contactinfo {color: orange}!

element.className {property: value}!


p.contactinfo {color: orange}!

A class can be used as many times as you wish in a document

Class vs. id
Use class when you want to affect two or more XHTML elements <p class="caption"> Mod Crusher's Club Jacket </p> .. <p class="caption"> Scooters Outside a Mod Hangout </p>

Use id when you want to affect only one, single element


<p id="pointers"> Learn more about Mods at these sites. </p>

So why is it a cascading style sheet

Understanding XHTML Structure

From this

To this

Tree structure reflects nesting. The children of a parent are those tags nested within it.

Styles are inherited or cascade through the tree


Understanding inheritance
body {color: red} p {color: blue}

What if we want to style a whole branch (or subtree)

Use div and span to add structure


Group together parts of the document that represent logical information units Then using id or class, style those units

Adding to the tree

div vs. span


<div class="imagebox"> <img src="modsscooters.jpg" height="112" width="84" alt="" /> <p class="caption"> Scooters Outside a Mod Hangout</p> </div>
<p> <span id="opening">A Mod was a product of working class British youth of the mid-sixties.</span> They portrayed an image of being stuck up, emulating the middle classes, snobbish and phoney. .. </p>

Div is a block-level element. It groups items that should be styled together. Like <p>.

Span is an in-line element. It is used to style inside block-level elements. Like <em>.

<div> allows us to put a new invisible parent in the tree


Group a set of elements in some logical structure (cat group, dog group) Then use class to style those groups

Dogs and Cats

Some selector variations


Element: p { font-size: 1em; } Descendent: p em { font-weight: bold; } Class: p.urgent { color:red; } ID: h1#page-title { font-size: 250%} Multiple: h1, h2, h3, h4, h5, h6 { text-align: center; }

It starts to get hard to figure out what rule applies


Generally the most specific rule matches (e.g., class is more specific than element) If no match then use inhertance HF page 322 (simple) HF page 417 (the gory details)

Caveat on CSS
Beware, or you will rip your hair out

Develop CSS file step-by-step, debugging as you go Test in multiple browsers

Review
CSS defines rules that change how content is presented
With picky syntax

Lots of properties are available for styling


Color; links

You can select different (sets of) HTML elements to be styled

You might also like