Download
cascading style sheets css n.
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets - CSS PowerPoint Presentation
Download Presentation
Cascading Style Sheets - CSS

Cascading Style Sheets - CSS

104 Vues Download Presentation
Télécharger la présentation

Cascading Style Sheets - CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Cascading Style Sheets - CSS • basics

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

  3. 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”

  4. 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)

  5. SillyPhrase Animal The fox jumped over the lazy dog <p id=”sillyphrase”>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p>

  6. 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 <b> tags

  7. 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 {…}

  8. SillyPhrase <p id=”sillyphrase”>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p> Animal The fox jumped over the lazy dog .animal { color: blue;font-weight: bold;} #sillyphrase { background-color: green; }

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

  10. SillyPhrase <p id=”sillyphrase”>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p> Animal The fox jumped over the lazy dog .animal { color: blue;font-weight: bold;} #sillyphrase { background-color: green; }

  11. SillyPhrase <p id=”sillyphrase”>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p> 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

  12. 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

  13. 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

  14. <p>The<span class=”animal”>fox</span> jumped over the lazy <span class=”animal”>dog</span></p> animal The fox jumped over the lazy dog p .animal { color: yellow;} p.animal { background-color: red;}

  15. 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

  16. 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

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