Date post: | 01-Jan-2016 |
Category: |
Documents |
Upload: | maryann-carr |
View: | 225 times |
Download: | 0 times |
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