cascading style sheets (css) html and css 2012 brian davison
TRANSCRIPT
Cascading Style Sheets (css)
HTML and css
2012 Brian Davison
Adding style
CSS Co Ltd
Orchid Beauty
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