Cascading Style Sheets - CSS

Cascading Style Sheets - CSS • basics

CSS use in html • Internally • <head>…<style>…css…</style>…</head> • <tag style=”…”> • Externally • <link rel="Stylesheet" href= "ICS255.css" media="screen">

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”

3 ways to apply a style • 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)

SillyPhrase Animal The fox jumped over the lazy dog Thefox jumped over the lazy dog

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

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

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

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

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

SillyPhrase Thefox jumped over the lazy dog 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

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 <h1> tags

Thefox 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

Next… • 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

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

Cascading Style Sheets - CSS

Cascading Style Sheets - CSS

Presentation Transcript

CSS : Cascading Style Sheets

CSS - Cascading Style Sheets

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets CSS

CSS Cascading Style Sheets

CSS: Cascading Style Sheets

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

CSS: Cascading Style Sheets

CSS - cascading style sheets