CSS (Cascading Style Sheets)
CSS assists in the separation of STYLE and STRUCTURE. Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document. (Wikipedia)
CSS can be applied three ways:
INLINE: Coded into HTML elements.
EMBEDDED: Coded into the <head> element.
EXTERNAL: Coded in an external document that is linked to by each HTML page.
This link is placed within the <head> element:
<link href=”styles.css” rel=”stylesheet” type=”text/css” media=”all” />
CSS Sytax : The Selector and the Declaration Box
Selectors (HTML,Group, Classes & ID)
Grouping Selectors
h1,h2,h3,h4,h5,h6 { font-size: 20px; }
http://www.w3schools.com/css/css_grouping_nesting.asp
Classes & IDs
We use ‘class’ to style any number of elements we want. CLASS = used for more than one element.
.blueTest { color: blue; }
We us ‘id’ to style an individual element per page. ID = a unique individual element such as a header or footer.
#header { height: 182px; }
http://www.w3schools.com/css/css_id_class.asp
Using Colornames or Hex number values.
http://www.w3schools.com/tags/ref_colornames.aspWith CSS we can use Color Names such as: BlanchedAlmond, SlateGray, Sienna, OrangeRed
However, it there are more options available using Alpha-numeric combinations known as Hexadecimal Colors (A-F combined with 0-9):
#FFFFFF = white
#000000 = black
#A52A2A = brown
HEX Shorthands: For hexcolors with three matching pairs of letters or numbers you can write a single character for that pair:
#FFFFFF = #FFF
#AA9977= #A97
color: #00000;
font-size: 24px;
font-family: Arial,Helvetica,sans-serif;
font-weight: bold;
letter-spacing: 0.5em;
background-color: #FF0000;
background-image: url(‘images/header_image.jpg’);
background-repeat: no-repeat; (other values: repeat-x, repeat-y)
width: 500px;
height: 100px;
Margins & Padding (Short Hand and Long Hand)
Remember: All of these examples work the same for ‘margin’ and ‘padding’
margin: 50px;
margin: 20px 10px;
margin: 20px 10px 15px 32px;
margin-top: 20px;
margin-right: 10px;
(etc…)
CSS BOX MODEL
