cascading style sheets (css) html and css 2012 brian davison

Cascading Style Sheets (css)

HTML and css

2012 Brian Davison

Adding style

CSS Co Ltd

Orchid Beauty

Oceanscape

Separating content from style

ContentContent

ContentContent

Content

Style

<link rel="stylesheet" type="text/css" href="standard.css" />

Rules, Selector, Properties, Value• A css rule will set the property to a particular value for a set of html

elements specified by the selector.• Here is a rule.• It will set the text color to red for all p elements.

p { color: red; }

Selectors• Each rule will affect a set of elements. You can select based on:

– The HTML element name

p, table, body, a, h1– An id value (the id must be unique) as in <table id=‘menu‘>

table#menu or #menu– The class as specified <table class=‘c0‘>

table.c0 or .c0– A nesting of selectors

table#staff td– A list of selectors

p, table#staff td

Selecting by element

body {

background: #fff url(images/dragon.gif) no-repeat bottom right;

font: georgia, sans-serif;

line-height: 1.2;

color: #555753;

}

p {

text-align: justify;

font-size: 1.8em;

}

h1 {

font: italic normal 4.4em georgia, sans-serif;

color: #ee2450;

}

th {

color: #ee2450;

font-style: italic;

font-size: 2.2em;

}

td {

text-align: center;

}

Selecting by id

Finds only the element with this id

#special {

font-style: italic;

color: #660000;

margin-left: 100px;

}

Selecting by class

Finds all elements with this class

.word {

font-size: 1.8em;

text-shadow: 5px 5px 10px blue;

}

.number {

font-size: 1.8em;

text-shadow: 5px 5px 10px #ee2450;

}

Values and what they meanPossible values Meaning

#fff, #555753, red, blue, etc. Colors – 3 character and 6 character hex values RGB. 00 is the lowest, FF is the highest

georgia, sans-serif, mono-space, arial

Font families. Georgia is specific, sans-serif is generic

justify, left, right, center Ways to align text in a box.

#fff url(dragon.png) no-repeat bottom right;

Use white background, anchor an image to the bottom right of the page.

1.4em, 75% Change the size relative to the current size of the font

Demo

Where to find answers