Cascading Style Sheets - CSS basics

CSS use in html Internally … …css… … Externally

Selectors terminology to remember! Selectors “select” items on the page such as: all H1 tags & all H2 tags 1 tag with the ID “fred” all tags classified “cats”

Selectors = What/how to “select” the tags you want to apply style attributes to 3 CSS Selectors tagname (aka element name).classname (class attribute) #idname (id attribute) 3 ways to apply a style

SillyPhrase Animal The fox jumped over the lazy dog

Selectors: (3 ways to apply a style) IDs - can only be used ONCE Class - can be used many times tag - all of that tag, ex: b is all tags SillyPhrase Animal The fox jumped over the lazy dog

similar to Java/C/JavaScript syntax ;;;; /* block comments, no line comments*/ Selector { property: value; } is a tagname, #idname, or.classname Selector1 selector2 selector3 {…} CSS Syntax

The fox jumped over the lazy dog SillyPhrase Animal The fox jumped over the lazy dog.animal { color: blue;font-weight: bold;} #sillyphrase { background-color: green; }

Do nothing - exist so you can use class=”” Two for technical reasons Block tags - take 100% width: Inline tags - “flow” within: Modern browsers handle this old problem but you shouldn’t push your luck

SillyPhrase Animal The fox jumped over the lazy dog.animal { color: blue;font-weight: bold;} #sillyphrase { background-color: green; }

SillyPhrase Animal The fox jumped over the lazy dog.animals is applied to everything that has the class= “animals” #sillyphase could be made RED, and then the fox and dog (animals) would inherit the RED color.animals are black, no matter what color #sillyphrase is The fox jumped over the lazy dog

Backgrounds background-color: #ff00ff background-image: url( ) background-repeat: repeat-x, repeat- y, repeat, no-repeat, inherit background-position: x y; background-attachment: scroll, fixed

Typical Selector Use classes are the most flexible multiple selectors (or complex query).classname {…properties...}.classname h1 {…properties...} all class=”classname” tags filter search results: all tags

The fox jumped over the lazy dog animal The fox jumped over the lazy dog p.animal { color: yellow;} p.animal { background-color: red;}

Naming Conventions If you didn’t notice… it is all LOWERCASE + no spaces on names background color = background-color colors in CSS named (a short list) red, blue, green… #99CC33 → #9C3

Use CSS references / tools Most HTML tags come with built-in properties, which you can override with CSS Use LIVE CSS editor to learn (Firefox) part of the Web Developer Tool add- on FireBug for Firefox & Google Chrome Next…

CSS3 properties Draft finalized end of 2005? still in draft 2010… Browser support initially limited Problems: buggy limited support POORLY designed standard