CSS - PowerPoint PPT Presentation

slide1 n.
Skip this Video
Loading SlideShow in 5 Seconds..
CSS PowerPoint Presentation
play fullscreen
1 / 88
Download Presentation
Download Presentation


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

  1. CSS Cascading Style Sheets

  2. Resources • www.w3schools.com/css/css_reference.asp (list of all CSS properties) • www.w3schools.com/css/ • www.glish.com/css/ • www.html.net/tutorials/css/ • blog.html.it/layoutgala/ • Great Book “CSS: The Missing Manual” - by David Sawyer McFarland

  3. Style and CSS Basics • Goal is to separate Style from Structure • Style rules express the style characteristics of an element • A set of style rules in an external document is a style sheet • Example of Style Section (sets <p> elements in the document to 24 point blue) <head> <style> P {color: blue; font-size: 24pt;} </style> …

  4. Style and CSS Basics • A style rule is composed of two parts • Selector • Declaration h1 {color: red;} Declaration Selector

  5. Style and CSS Basics • A declaration is composed of two parts • Property • Value • Syntax is Property and colon, then value and semicolon to allow multiple declaration h1 {color: red;} Value Property

  6. Style and CSS Basics • Style rules can be applied to an element • Style rules can be a section in a document • Style rules can be in a document external to the Web pages to which it can be applied

  7. Style and CSS Basics • Style rules can be applied to an element similar to an element attribute • Example <div style="font-family: 'Trebuchet MS'; Color: Navy; ">

  8. Style and CSS Basics • Example of a Style Section to be used for a Web page that sets h1 and h2 to a particular font and color of navy—Type Selector <style> h1 , h2 { font-family: 'Trebuchet MS'; Color: Navy; } </style>

  9. Style and CSS Basics • Example of an external style sheet—referred to as a cascading style sheet—note that the content is the same as a Style Section but in a file with a .css extension <style> h1 , h2 { font-family: 'Trebuchet MS'; example.css Color: Navy; } </style>

  10. Style and CSS Basics • Referencing an external cascading style sheet <head> <title…. <link href="example.css" rel="stylesheet" type="text/css" /> </head>

  11. Style and CSS Basics • Grouping Selectors h1 {color: red;} h2 {color: red;} can be grouped with elements separated by commas h1, h2 {color: red;}

  12. Style and CSS Basics • Combining Declarations p {color: blue;} p {font-size: 12pt;} can be expressed as follows p {color: blue; font-size: 12pt;}

  13. Style and CSS Basics • Using Descendant Selectors • Selects only <b> elements that are within <p> elements p b {color: blue;} can be more than 2 selector elements ulli b {color: blue;}

  14. Style and CSS Basics • Using the Class Attribute Selector .quote {color: blue; margin: 30px;} Reference the class <p class="quote"> This…. Note that this allows any element to use the style whereas a general style for an element applies to every instance of the element Flag Character Declaration Class Name

  15. Style and CSS Basics • Making Class Selectors More Specific h1.quote {color: blue; margin: 30px;} restricts the use of the quote to the <h1> element

  16. Style and CSS Basics • Using the id Attribute Selector #preface {color: blue; margin: 30px;} reference the element <p id="preface"> This…. Note that the id value uniquely identifies this one <p> element to which the rule applies Flag Character Declaration Class Name

  17. Style and CSS Basics • CSS font measurement units

  18. Style and CSS Basics • CSS font measurement units (cont)

  19. Style and CSS Basics • Absolute Font Size Keywords • xx-small • x-small • small • medium • large • x-large • xx-large • Relative Font Size Keywords • smaller • larger

  20. Style and CSS Basics • Fonts • Family {font-family: san-serif;} • arial, courier ….. • Shortcut property designation • p {font: 12pt arial bold;} • Text Spacing Properties • text-align • text-indent • … • Text –decoration properties • none, underline, overline, line-through, blink

  21. Style and CSS Basics • Fonts • Vertical alignment {vertical-align: super;} • baseline, sub, super, top, text-top, middle, bottom, text-bottom, percentage • Transforming case {text-transformation: uppercase} • capitalize, uppercase, lowercase, none

  22. Style and CSS Basics • Visual Formatting Model • Block elements • <body> ,<h1>, <div> <p>… • Allows specification of margin, border, and padding for all block-level elements • Inline elements • List-item

  23. Style and CSS Basics

  24. Style and CSS Basics • Box specification example p {margin-left; 2 em; margin-right; 2 em; padding-left; 2 em; padding-right; 2 em; border-right; solid thin black; background: white}

  25. Style and CSS Basics • Special Box Properties • width • height • float • clear div {float: left; width: 200px;}

  26. CSS for Styling CS380

  27. The good, the bad and the… ugly! <p> <font face="Arial">Shashdot.</font> News for <b>nerds!!</b>You will <i>never</i>, <u>EVER</u> be <font size="+4" color="red">BORED</font> here! </p>HTML • Tags such as b, i, u, and font are discouraged in strict XHTML • Why is this bad? Slashdot. News for nerds!! You will never, EVER be BORED here! output CS380

  28. Cascading Style Sheets (CSS) • Describes the appearance, layout, and presentation of information on a web page • HTML describes the content of the page • Describes how information is to be displayed, not what is being displayed • Can be embedded in HTML document or placed into separate .css file CS380

  29. Basic CSS rule syntax selector { property: value; property: value; ... property: value; }CSS • ACSS file consists of one or more rules • Each rule starts with a selector • A selector specifies an HTML element(s) and then applies style properties to them • a selector of * selects all elements p { font-family: sans-serif; color: red; }CSS

  30. Attaching a CSS file <link> <head> ... <link href="filename" type="text/css" rel="stylesheet" /> ... </head>HTML • A page can link to multiple style sheet files • In case of a conflict (two sheets define a style for the same HTML element), the latter sheet's properties will be used <link href="style.css" type="text/css" rel="stylesheet" /> <link href="http://www.google.com/uds/css/gsearch.css" rel="stylesheet" type="text/css" /> HTML CS380

  31. Embedding style sheets: <style> • CSS code can be embedded within the head of an HTML page • Bad style and should be avoided when possible (why?) <head> <style type="text/css"> p { font-family: sans-serif; color: red; } h2 { background-color: yellow; } </style> </head> HTML CS380

  32. Inline styles: the style attribute • Higher precedence than embedded or linked styles • Used for one-time overrides and styling a particular element • Bad style and should be avoided when possible (why?) <p style="font-family: sans-serif; color: red;"> This is a paragraph</p> HTML This is a paragraph output CS380

  33. CSS properties for colors p { color: red; background-color: yellow; } CSS This paragraph uses the style above output CS380

  34. Specifying colors • color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow • RGB codes: red, green, and blue values from 0 (none) to 255 (full) • hex codes: RGB values in base-16 from 00 (0, none) to FF (255, full) p { color: red; } h2 { color: rgb(128, 0, 196); } h4 { color: #FF8800; } CSS This paragraph uses the first style above This h2 uses the second style above. This h4 uses the third style above. output

  35. Grouping styles • A style can select multiple elements separated by commas • The individual elements can also have their own styles p, h1, h2 { color: green; } h2 { background-color: yellow; } CSS This paragraph uses the above style. output This h2 uses the above styles. CS380

  36. CSS comments /*…*/ • CSS (like HTML) is usually not commented as rigorously as programming languages such as Java • The // single-line comment style is NOT supported in CSS • The <!-- ... --> HTML comment style is also NOT supported in CSS /* This is a comment. It can span many lines in the CSS file. */ p { color: red; background-color: aqua; } CSS CS380

  37. CSS properties for fonts Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#font) CS380

  38. font-family • Enclose multi-word font names in quotes p { font-family: Georgia; } h2 { font-family: "Courier New"; } CSS This paragraph uses the first style above. This h2 uses the second style above. output CS380

  39. More about font-family • We can specify multiple fonts from highest to lowest priority • Generic font names: • serif, sans-serif, cursive, fantasy, monospace • If the first font is not found on the user's computer, the next is tried • Placing a generic font name at the end of your font-family value, ensures that every computer will use a valid font p { font-family: Garamond, "Times New Roman", serif; } CSS This paragraph uses the above style. output CS380

  40. font-size • units: pixels (px) vs. point (pt) vs. m-size (em) 16px, 16pt, 1.16em • vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger • percentage font sizes, e.g.: 90%, 120% p { font-size: 24pt; } CSS This paragraph uses the style above. output CS380

  41. font-size • ptspecifies number of point, where a point is 1/72 of an inch onscreen • pxspecifies a number of pixels on the screen • emspecifies number of m-widths, where 1 em is equal to the font's current size p { font-size: 24pt; } CSS This paragraph uses the style above. output CS380

  42. font-weight, font-style • Either of the above can be set to normal to turn them off (e.g. headings) p { font-weight: bold; font-style: italic; } CSS This paragraph uses the style above. output CS380

  43. CSS properties for text Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#text) CS380

  44. text-align • text-align can be left, right, center, or justify blockquote { text-align: justify; } h2 { text-align: center; } CSS The Gollum’s Quote We wants it, we needs it. Must have the precious. They stole it from us. Sneaky little hobbitses. Wicked, tricksy, false! output CS380

  45. text-decoration • can also be overline, line-through, blink, or none • effects can be combined: text-decoration: overline underline; p { text-decoration: underline; } CSS This paragraph uses the style above.output CS380

  46. The list-style-type property • Possible values: i. none : No marker ii. disc (default), circle, square iii. Decimal:1, 2, 3, etc. iv. decimal-leading-zero: 01, 02, 03, etc. v. lower-roman: i, ii, iii, iv, v, etc. vi. upper-roman: I, II, III, IV, V, etc. vii. lower-alpha: a, b, c, d, e, etc. viii. upper-alpha: A, B, C, D, E, etc. x. lower-greek: alpha, beta, gamma, etc. others: hebrew, armenian, georgian, cjk-ideographic, hiragana… ol { list-style-type: lower-roman; } CSS CS380

  47. Body styles • Applies a style to the entire body of your page • Saves you from manually applying a style to each element body { font-size: 16px; }CSS CS380

  48. Cascading Style Sheets • Properties of an element cascade together in this order: • browser's default styles • external style sheet files (in a <link> tag) • internal style sheets (inside a <style> tag in the page's header) • inline style (the style attribute of the HTML element) CS380

  49. Inheriting styles • when multiple styles apply to an element, they are inherited • a more tightly matching rule can override a more general inherited rule body { font-family: sans-serif; background-color: yellow; } p { color: red; background-color: aqua; } a { text-decoration: underline; } h2 { font-weight: bold; text-align: center; } CSS • This is a heading • A bulleted list output A styled paragraph. Previous slides are available on the website. CS380

  50. Styles that conflict • when two styles set conflicting values for the same property, the latter style takes precedence p, h1, h2 { color: blue; font-style: italic; } h2 { color: red; background-color: yellow; } CSS This paragraph uses the first style above. output This heading uses both styles above. CS380