Intro to CSS Christy

What is CSS?  Cascading Style Sheets  Separates content from presentation  Defines how to display HTML elements  Provides control and flexibility  External style sheets are saved at.css files

Types of CSS  Inline:  Style applied to HTML elements individually  Has most control over the element  Internal:  Style is defined in the element  Defines the elements on the page it is defined  Overrides external, overridden by Inline  External:  Style defined in external file  HTML files link to css file  Overridden by Internal and Inline

Cascading Order 1.Browser default 2.External style sheet 3.Internal style sheet 4.Inline style sheet Number 4 has most control.

CSS Vocab  Rule: Single statement identifying what should be styled and how styles should be applied  Selector: Tells which section of the document the rules covers  Declaration: Property and value.  Property: Specific and definable style effects  Value: Defines how property should be set Rule: selector {property:value; property:value;} p {color:blue;}

CSS Syntax  Inline Content  Internal p {color:blue;}  External p {color:green; font:arial, sans-serif;}

Common CSS Properties color:#333333; background-color:#000000; front-family:verdana, geneva, sans-serif; font-size:22px; padding:0; border:thin #0f00f0 dotted; /* comments */

Colors  Color Names : 16 valid color names blueredyellowblack greenorangepurplenavy  Hex Values : 16mil colors, 150 supported by all browsers Combination of numbers and letter a-f #000000#FF0000#00FF00#0000FF #FFFF00#00FFFF#FF00FF#FFFFFF

Fonts  Use the font-family property  Group according to family  font-family: verdana, helvetica, arial, sans- serif;  font-family: times, “times new roman”, serif;  font-family: “courier new”, courier, monospace;  Put into quotes where there are spaces “times new roman”, ”courier new”  Sans-serif vs. Serif

Element  Defines a section in an HTML document  Typically used with block-elements to format them with style

Box Model  A block-level element can be manipulated using a combination of position, margin, border, padding height, and width declarations padding height width margin content border

Block-level and Inline Elements  Block-level elements  By default have a width of 100% of the page  Can be used as containers of elements – can contain inline elements and other block-level elements  CSS can define the width, height, padding and position on the page independent of the location in the code  EX:,,,,,  Inline elements  Located inside other elements – can only contain inline  CSS can define the coloring and font properties  EX:,,

Resources  W3Schools.com  YouTube Videos  Library Books  About.com  Wikipedia