CSS terms
/* comment */
Comment
background shorthand
body {background:#ffffff url('ing_tree.png') no-repeat right top;}
text color
body {color:blue;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}
set text direction
div {direction:rtl;} (Right to left text)
declaration
property and value color:blue
set font size with em
1em = 16px pixels/16=em ht {font-size:2.5em;} /* 40px/16=2.5em */
external style sheet
<link rel="stylesheet" type="text/css" href="ystyle.css">
Cascading order
Browser default External style sheet Internal style sheet (in the head section) Inline style (inside an HTML element)
selector
HTML element you want to style
combination of percent and em
WORKS IN ALL BROWSERS body {font-size:100%;} h1 {font-size:2.5em;}
text décoration remove
a {text-decoration:none;}
Styling link - unvisited
a:link {color:#FF0000;}
styling link - visited
a:v
shorthand order
background-color background-image background-repeat background-attachment background-position
background image no repeat
background-image:url('gradient2.png'); background-repeat:no-repeat;
background image repeat x or y
background-image:url('gradient2.png'); background-repeat:repeat-x;
background image location
background-image:url('ing_tree.png'); background-repeat:no-repeat; background-position:right top;
background color
body {background-color:#000000;}
background image
body {background-image:url('paper.gif');}
CSS
cascading style sheets
font size absolute
ets text to a specified size, does not allow user to change text size in all browsers, absolute size in useful when physical size of output is known
set font size with pixel
h1 {font-size:40px;}
text décoration add
h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;}
font family
hold several font names as a fallback system start with what you want and end with a generic family p{font-family:"Times New Roman", Times, serif;}
text alignment
ht {text-align:center;} p.date {text-align:right;}
Align text with image bottom
img.bottom {vertical-align:text-bottom;}
Align text with image top
img.top {vertical-align:text-top;}
font style
mostly for italics p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
text indentation
p {text-indent:50px;}
Word Spacing
p {word-spacing:30px;}
text transformation capitalize
p.capitalize {text-transform:capitalize;}
text transformation lowercase
p.lowercase {text-transform:lowercase;}
font weight
p.normal {font-weight:normal;} p.thick {font-weight:900;}
font variiant - small caps
p.small {font-variant:small-caps;}
text transformation uppercase
p.uppercase {text-transform:uppercase;}
relative size
sets teh size relative to surrounding elements, allows a user to change the text size in browsers
class selector
specify a style for a group of elements. Set particular style for many HTML elements with the same class. ".center" or "p.center" for a specific element
id selector
specify a style for a single element #paral (Don't start with a number)
