Cascading Style Sheets (or making your websites look pretty)

C347897e302f76529f911e2c576227a4?s=47 cole007
November 06, 2012

Cascading Style Sheets (or making your websites look pretty)

Notes from a day workshop on CSS I delivered in 2009

C347897e302f76529f911e2c576227a4?s=128

cole007

November 06, 2012
Tweet

Transcript

  1. CSS Training course CSS Cascading Style Sheets (or making your

    websites look pretty) Cole Henley Net Resources Palmerston Place
  2. CSS Training course Benefits of CSS? • Management of style

    ◦ Central control of your website's appearance ◦ Changes applied globally • Browser targeting of a website's appearance • Device targeting of a website's appearance • Content kept clean, meaning improvements in ◦ SEO ◦ Accessibility ◦ Usability • Style switching
  3. CSS Training course What we will cover • Applying styles

    • Defining style rules • Formatting text • Controlling layout • Embellishing your page with colour and images • Organising your style sheets
  4. CSS Training course Background 1998: Table based layouts

  5. CSS Training course Background 1998: Table based layouts (continued) Tables

    are bad • Inaccessible • Inappropriate • Inflexible • Invalid
  6. CSS Training course Background CSS Zengarden http://www.csszengarden.com/

  7. CSS Training course Background CSS Zengarden (continued)

  8. CSS Training course Cascading Style Sheets What is CSS? •

    Style sheets • The Cascade • Style Rules
  9. CSS Training course CSS: Style Sheets The three layers of

    the web (Web Standards): http://reference.sitepoint.com/css
  10. CSS Training course CSS: Style Sheets Where to put your

    styles? Within your HTML document using the style attribute: <p style=”color: red;”>This is a paragraph</p> Within your HTML document using the style element: <style type="text/css"> p { color: red; } </style> In a separate file referenced with the link element (within the <head> element): <link href="style.css" type="text/css" rel="stylesheet" />
  11. CSS Training course CSS: The Cascade • HTML 'tree'/DOM (nesting

    of elements) • Specifying rules • Inherited rules
  12. CSS Training course CSS: The Cascade The HTML tree In

    other words structured HTML pages featuring nested elements: <ul> <li> <span>This is a span</span> </li> </ul>
  13. CSS Training course CSS: Style rules Specifying rules CSS has

    its own rules/language selector { property: value; } For example p { color: red;} This will take a p (paragraph) element and give its text the color red
  14. CSS Training course CSS: Style rules Specifying rules (continued) In

    any declaration can assign multiple CSS properties, for example: p { color: red; background-color: green; }
  15. CSS Training course CSS: Style rules Selectors Global Rules (*

    wildcard) * { color: red;} HTML Elements: p { color: red;} Id Selector: p#strapline { color: red;}
  16. CSS Training course CSS: Style rules Selectors (continued) Class selectors:

    p.warning, .error { color: red;} Grouping selectors: p, li, span.error { color: red;} Descendants selectors (the cascade): p { color: blue; } div p { color: red;}
  17. CSS Training course CSS: Style rules Selectors (continued) Attribute selectors:

    a[href] { color: red;} input[type=”submit”] { color: red;} Pseudo-selectors: a:link a:visited a:hover a:active
  18. CSS Training course CSS: Style rules Selectors (continued) Inherited rules

    in the Cascade <div> <p>This is a piece of text</p> </div> <p>This is another piece of text</p> For example div p { color: red;} p { color: blue;}
  19. CSS Training course CSS: Style rules Specificity • CSS rules

    feature specificity. • When multiple rules apply to a particular HTML element specificity decides which rule takes precedence over others. • An id selector is more specific than a class selector which is more more specific than an element selector. http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
  20. CSS Training course CSS: Style rules Specificity (continued) For example...

    <body id=”home”> <div id=”caution” class=”warning”> <p>This is some text</p> With the following CSS rules: p { color: black; } div.warning p { color: red; } div#caution p { color: yellow; } body#home div p { color: white; }
  21. CSS Training course CSS: Style rules Specificity and importance Sometimes

    we want to override specificity for a particular CSS rule. For example... <body id=”home”> <div id=”caution” class=”warning”> <p class=”error”>This is some text</p> We can do this with the declaration !important: body#home div p { color: blue; } p.error { color: red !important; }
  22. CSS Training course CSS: Text formatting An overview • Font

    families • Size • Weight • Alignment • Decoration • Style • Indenting • Line height • CSS Shorthand
  23. CSS Training course CSS: Text formatting Font families font-family: arial;

    Font family is used to establish fonts used for a page or particular HTML element. Default usually Time Roman/Times New Roman. CSS relies on the fonts available on the users computer, so we use font stacks to set preferences and fall back fonts in case a user doesn't have the preferred font . For example: font-family: Helvetica, arial, sans-serif; See http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
  24. CSS Training course CSS: Text formatting Size Font-size is used

    to specify the size/height of a piece of text, expressed as . • Percentages • Ems. Relative font size, 1 em = 100% (scale with font-size) • Pixels (doesn't scale) • Pts (typographic scale) • Text (xx-small, x-small, small, medium, large, x-large and xx-large) For example font-size: 0.8em; If parent is 12pt then 0.8em = 9.6pt.
  25. CSS Training course CSS: Text formatting Weight Font-weight is a

    typographic term referring to density of a font. Most common is bold or normal. Options are • numeric range (0-900) • relative weight (lighter, normal, bold, bolder) Most browsers only render normal and bold. For example: font-weight: bold;
  26. CSS Training course CSS: Text formatting Alignment Text-align within a

    paragraph (or any block-level element) can be: • left • center • right • justified Justified text rarely works on the web. For example: text-align: center;
  27. CSS Training course CSS: Text formatting Decoration Text-decoration is embellishment

    of a particular block of text. The range of decoration are: • none • overline – line over the text • line-through – line through the text • underline – horizontal line below the text (hyperlinks) • blink – flashing of content (unadvisable) For example: text-decoration: underline;
  28. CSS Training course CSS: Text formatting Style and indent Font-style

    is used to define italic text with the options being normal or italic. For example: font-style: italic; Text-indent is used to indent the first line of text. Negative and positive values can be specified: text-indent: 20px; text-indent: -20px; text-indent: -9999px;
  29. CSS Training course CSS: Text formatting Line height In typography

    leading named by the use of lead blocks to space out text. In effect the line-spacing of a block of text line-height, is relative to the size (x-height) #of font for that element. Like font-size, can be specified in px, em or pt. For example, single, 1.5 and double line- height would be: line-height: 1em; line-height: 1.5; line-height: 12px; line-height: 120%;
  30. CSS Training course CSS: Text formatting CSS Shorthand There are

    a number of CSS rules where you can use shorthand to define a range of different properties within a single expression. font: font-weight font-style font-size/line-height font- family; You do not have to specify all these parameters. For example: font: bold italic 75%/1.5em Georgia, Times, Times New Roman, serif; font: italic 1em/1.5em Georgia, serif; font: 1em Georgia, serif;
  31. CSS Training course CSS: Example 1 Formatting fonts • Show

    structure and hierarchy • Give your text breathing space • Provide emphasis
  32. CSS Training course CSS: Positioning An overview • Displays •

    The Box model ◦ Internet Explorer • Padding • Margins • Dimensions • Floats • Positioning ◦ z-index • Overflow
  33. CSS Training course CSS: Positioning Displays Display defines the display

    behaviour for an element. Main types of display are: • block • inline • list-item Also • none (hides the element) • plus many others (inline-block, table, table-cell, etc.)
  34. CSS Training course CSS: Positioning The document flow The document

    flow is how text flows and is structured on a page. Block level elements are structured elements within the flow. They group together pieces of text, for example: • div • heading • paragraphs Inline elements are elements that are within the text flow. For example: • strong • span • hyperlinks
  35. CSS Training course CSS: Positioning The document flow (continued) Block

    and inline example:
  36. CSS Training course CSS: Positioning The document flow (continued) Changing

    a block to inline: li { display: inline; }
  37. CSS Training course CSS: Positioning The Box model The box

    model primarily refers to block-level elements (inline elements in later browsers though)
  38. CSS Training course CSS: Positioning The Box model (continued)

  39. CSS Training course CSS: Positioning Padding and margins Define individually:

    margin-left: 25px; Define with shorthand: margin: 1em; padding: 25px 0 10px 0; margin: 25% 0 10%; Automatic: margin: 0 auto;
  40. CSS Training course CSS: Positioning Dimensions Specify height and width

    of an element: height: 1em; width: 200px; Can also specify minimum and maximum values: min-height: 3em; max-width: 480px; Generally, dimensions can only be applied to block-level elements Height in Internet Explorer 6 and lower is treated as min-height
  41. CSS Training course CSS: Positioning Floats Floats are used to

    place elements in relation to each other. Floats remain in the document flow but move (float) items in relation to their parent/ containing element. (Non-floated) text will wrap around a floated element.
  42. CSS Training course CSS: Positioning Floats (continued) Elements can be

    floated left, right or none. For example: float: left; float: right; Adjacent floated elements can be used to control page layout. You may want to clear a floated element. To do this use the clear CSS property: clear: right; clear: both;
  43. CSS Training course CSS: Positioning Floats (continued) Can be applied

    to div elements to control page layout
  44. CSS Training course CSS: Positioning Positioning Positioning also controls how

    the element relates to the document flow. • static (default) • fixed • absolute • relative Position is declared as follows: position: fixed; Anything other than static is considered to be positioned.
  45. CSS Training course CSS: Positioning Positioning (continued) A positioned element

    can be offset using top, right, bottom and left: top: 5px; left: 1em; right: 100%; A positioned element can be (layered) using the z-index property: z-index: 10; Z-index provides a relative index (eg 100 will appear above 0).
  46. CSS Training course CSS: Positioning Positioning (continued) Absolute positioning Absolute

    position removes an element from the document flow, positioning the element in relation to its most immediate positioned parent element. Default is to top and left
  47. CSS Training course CSS: Positioning Overflow Overflow is used to

    determines what happens when a specific height and width is specified for an element and the content of that element is greater than (overflows) the available area • visible (default) • auto: applies scrollbars if content overflows, otherwise • scroll: applies scrollbars whether content overflow or not • hidden: crops any overflowed content
  48. CSS Training course CSS: Example 2 Positioning • Centring the

    page • Floating the content and subcontent • Highlighting the headings • Clearing the footer
  49. CSS Training course CSS: Embellishing (the pretty bit) An overview

    • Colors ◦ Formats (hexa, rgb, name) • Borders • Backgrounds • List items/bullets • Transparency
  50. CSS Training course CSS: Embellishing (the pretty bit) Colo(u)rs By

    keyword: color: white; color: red; By hexadecimal: color: #fff; color: #ff0000; By decimal: color: rgb(255,0,0);
  51. CSS Training course CSS: Embellishing (the pretty bit) Borders •

    Border color • Border width • Border style Can be applied to one or each of top, right, bottom and left. For example: border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: black;
  52. CSS Training course Can use shorthand, for example: border-bottom: 2px

    solid black; border: 1px solid dotted; Remember the box! In Internet Explorer 6 and earlier borders are included in the calculation of width:
  53. CSS Training course CSS: Embellishing (the pretty bit) Backgrounds We

    can specify a background color as per color, for example: background-color: black; Additionally, can apply images to the background: background-image: url('image.jpg'); We can also choose how this background image is presented: • background-repeat (for tiling: repeat-x, repeat-y or repeat) • background-attachment (scroll or fixed) • background-position (left/center/right top/center/bottom px or %)
  54. CSS Training course CSS: Embellishing (the pretty bit) Backgrounds (continued)

    Again, we can used shorthand, for example: background: red; background: red url(image.png) center top no-repeat; Can use background images for image replacement of text, for example page headings: height: 44px; margin: 10px; text-indent: -999em; background: url('title.png') center top no-repeat;
  55. CSS Training course CSS: Embellishing (the pretty bit) List items

    You can specify a custom image for list item bullets with list-style-image: list-style-image: url('bullet.png');
  56. CSS Training course CSS: Embellishing (the pretty bit) Transparency With

    most modern browsers we can apply transparency to elements using CSS: • using images featuring alpha transparency (gif and png files) • alpha color values, eg rgba(0,0,0,0.5) http://24ways.org
  57. CSS Training course CSS: Example 3 Embellishing your website •

    Add some colour • Add a background image to the body • Add a background image to the header and footer • List items • Use image replacement for the page heading
  58. CSS Training course CSS: Organising your style sheets An overview

    • Reset.css ◦ @import • Organising your styles • Print stylesheets • Commenting your styles • Frameworks • Targeting IE and conditional comments
  59. CSS Training course CSS: Organising your style sheets Reset.css Different

    browsers render HTML in different ways by default. Resetting the default CSS provides a clean slate to work with. At simplest: * { margin: 0; padding: 0; font-size: 100%; font-weight: normal; font-style: normal; } Various reset stylesheets available: • Eric Meyer: http://meyerweb.com/eric/tools/css/reset/ • Yahoo! Reset: http://developer.yahoo.com/yui/reset/ • Dave Woods: http://www.dave-woods.co.uk/index.php/css-reset/
  60. CSS Training course CSS: Organising your style sheets @import We

    can import multiple CSS files using @import: @import: 'reset.css'; @import url('reset.css'); Can also express which context imports should be applied to: @import: 'reset.css' screen; @import: 'reset.css' print; Internet Explorer less than 8 will not understand though.
  61. CSS Training course CSS: Organising you style sheets Organising your

    styles (continued) This can also be achieved when linking to a style sheet in HTML: <link href="style.css" type="text/css" rel="stylesheet" media="screen" /> As we can add multiple imports, we can organise our stylesheets to perform different things for different context. Some examples: • typography CSS file (used for all contexts) • layout CSS file (used for screen display only) • print CSS file ...
  62. CSS Training course CSS: Organising your style sheets Print styles

    Can target style sheets for printers: <link rel="stylesheet" href="print.css" type="text/css" media="print" />
  63. CSS Training course CSS: Organising your style sheets Commenting your

    styles Key part of organising your styles is using comments. These can be achieved using opening and closing 'tags' of /* and */ For example: /* layout for column one */ div#subcontent { width: 400px; float: right; }
  64. CSS Training course CSS: Organising your style sheets Frameworks Number

    of frameworks available to provide quick layouts and styles to your website. Easy to implement, freely available and tested in most browsers but less flexibility than writing your own css. Example frameworks • 960 grid system http://960.gs/ • Blueprint CSS http://www.blueprintcss.org/ • Yahoo! CSS framework: http://developer.yahoo.com/yui/grids/
  65. CSS Training course CSS: Organising your style sheets Frameworks (continued)

    CSS Frameworks provide rapid way for implementing structured design layouts: http://960.gs/demo.html
  66. CSS Training course CSS: Organising your style sheets Targeting IE

    with conditional comments Your biggest headache with CSS will be with Internet Explorer. Ways round. Certain hacks in your CSS can solve but better to write specific style sheets for each browser. Conditional comments enables you to target HTML content (including CSS links) to specific versions of Internet Explorer. For example: <!--[if IE]> <![endif]--> <!--[if IE 7]> <![endif]--> <!--[if lte IE 5.5]> <![endif]--> <!--[if gt IE 6]> <![endif]-->
  67. CSS Training course CSS: Organising your style sheets Targeting IE

    with conditional comments (continued) Browser/version targeted designs: http://www.stuffandnonsense.co.uk/
  68. CSS Training course CSS: Help Common CSS issues and solutions

    • IE 6 double margin bug (http://www.positioniseverything.net/explorer/doubled- margin.html) • haslayout (http://www.satzansatz.de/cssd/onhavinglayout.html) • IE 6 3px text jog (http://positioniseverything.net/explorer/threepxtest.html) • IE6 duplicate characters bug (http://positioniseverything.net/explorer/dup- characters.html) • Pattern tap (http://patterntap.com/)
  69. CSS Training course CSS: Help Handy tips to improve your

    CSS • Avoid DIVITUS and use semantic markup • Use shorthand • Validate your HTML and CSS • Use meaningful (not presentational) classes and Ids • Use the tools available (especially Firebug and WDT) • KISS (Keep It Separate Stupid) • Embrace progressive enhancement
  70. CSS Training course CSS 3: The Future … The Future's

    bright (and shiny) • Rounded corners • Border styles • Shadows • Columns • Opacity • Multiple Backgrounds • More selectors http://www.css3.info/preview/ Some support already: http://westciv.com/wiki/Experimental_CSS_compatibility_table
  71. CSS Training course Further Resources Inspiration • CSS Zen Garden

    (http://www.csszengarden.com/) • Web Design Meltdown (http://www.designmeltdown.com/) • Pattern tap (http://patterntap.com/) Reference • W3Schools (http://www.w3schools.com/Css/) • Sitepoint (http://reference.sitepoint.com/css) • A List Apart (http://www.alistapart.com/topics/code/css/) • Max Design (http://css.maxdesign.com.au/)
  72. CSS Training course Problem solving • Quirks mode (http://www.quirksmode.org/) •

    Position is Everything (http://www.positioniseverything.net/) Tools • Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm) • Firefox web developer toolbar (https://addons.mozilla.org/en-US/firefox/addon/ 60) • Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) • IE tester (http://www.my-debugbar.com/wiki/IETester/HomePage)
  73. CSS Training course Books • The Zen of CSS Design

    by Dave Shea • Web Standards Solutions by Jeffrey Zeldman/Dan Cederholm • CSS Mastery by Andy Budd • Transcending CSS by Andy Clarke (advanced) • .Net magazine (monthly, UK-based web standards magazine)