Cascading Style Sheets (or making your websites look pretty)

Slide 1

Slide 1 text

CSS Training course CSS Cascading Style Sheets (or making your websites look pretty) Cole Henley Net Resources Palmerston Place

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

CSS Training course Background 1998: Table based layouts

Slide 5

Slide 5 text

CSS Training course Background 1998: Table based layouts (continued) Tables are bad • Inaccessible • Inappropriate • Inflexible • Invalid

Slide 6

Slide 6 text

CSS Training course Background CSS Zengarden http://www.csszengarden.com/

Slide 7

Slide 7 text

CSS Training course Background CSS Zengarden (continued)

Slide 8

Slide 8 text

CSS Training course Cascading Style Sheets What is CSS? • Style sheets • The Cascade • Style Rules

Slide 9

Slide 9 text

CSS Training course CSS: Style Sheets The three layers of the web (Web Standards): http://reference.sitepoint.com/css

Slide 10

Slide 10 text

CSS Training course CSS: Style Sheets Where to put your styles? Within your HTML document using the style attribute:

This is a paragraph

Within your HTML document using the style element: p { color: red; } In a separate file referenced with the link element (within the element):

Slide 11

Slide 11 text

CSS Training course CSS: The Cascade • HTML 'tree'/DOM (nesting of elements) • Specifying rules • Inherited rules

Slide 12

Slide 12 text

CSS Training course CSS: The Cascade The HTML tree In other words structured HTML pages featuring nested elements:

This is a span

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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; }

Slide 15

Slide 15 text

CSS Training course CSS: Style rules Selectors Global Rules (* wildcard) * { color: red;} HTML Elements: p { color: red;} Id Selector: p#strapline { color: red;}

Slide 16

Slide 16 text

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;}

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

CSS Training course CSS: Style rules Selectors (continued) Inherited rules in the Cascade

This is a piece of text

This is another piece of text

For example div p { color: red;} p { color: blue;}

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

CSS Training course CSS: Style rules Specificity (continued) For example...

This is some text

With the following CSS rules: p { color: black; } div.warning p { color: red; } div#caution p { color: yellow; } body#home div p { color: white; }

Slide 21

Slide 21 text

CSS Training course CSS: Style rules Specificity and importance Sometimes we want to override specificity for a particular CSS rule. For example...

This is some text

We can do this with the declaration !important: body#home div p { color: blue; } p.error { color: red !important; }

Slide 22

Slide 22 text

CSS Training course CSS: Text formatting An overview • Font families • Size • Weight • Alignment • Decoration • Style • Indenting • Line height • CSS Shorthand

Slide 23

Slide 23 text

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/

Slide 24

Slide 24 text

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.

Slide 25

Slide 25 text

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;

Slide 26

Slide 26 text

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;

Slide 27

Slide 27 text

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;

Slide 28

Slide 28 text

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;

Slide 29

Slide 29 text

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%;

Slide 30

Slide 30 text

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;

Slide 31

Slide 31 text

CSS Training course CSS: Example 1 Formatting fonts • Show structure and hierarchy • Give your text breathing space • Provide emphasis

Slide 32

Slide 32 text

CSS Training course CSS: Positioning An overview • Displays • The Box model ◦ Internet Explorer • Padding • Margins • Dimensions • Floats • Positioning ◦ z-index • Overflow

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

CSS Training course CSS: Positioning The document flow (continued) Block and inline example:

Slide 36

Slide 36 text

CSS Training course CSS: Positioning The document flow (continued) Changing a block to inline: li { display: inline; }

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

CSS Training course CSS: Positioning The Box model (continued)

Slide 39

Slide 39 text

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;

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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.

Slide 42

Slide 42 text

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;

Slide 43

Slide 43 text

CSS Training course CSS: Positioning Floats (continued) Can be applied to div elements to control page layout

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

CSS Training course CSS: Example 2 Positioning • Centring the page • Floating the content and subcontent • Highlighting the headings • Clearing the footer

Slide 49

Slide 49 text

CSS Training course CSS: Embellishing (the pretty bit) An overview • Colors ◦ Formats (hexa, rgb, name) • Borders • Backgrounds • List items/bullets • Transparency

Slide 50

Slide 50 text

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);

Slide 51

Slide 51 text

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;

Slide 52

Slide 52 text

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:

Slide 53

Slide 53 text

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 %)

Slide 54

Slide 54 text

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;

Slide 55

Slide 55 text

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');

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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/

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

CSS Training course CSS: Organising your style sheets Print styles Can target style sheets for printers:

Slide 63

Slide 63 text

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; }

Slide 64

Slide 64 text

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/

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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:

Slide 67

Slide 67 text

CSS Training course CSS: Organising your style sheets Targeting IE with conditional comments (continued) Browser/version targeted designs: http://www.stuffandnonsense.co.uk/

Slide 68

Slide 68 text

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/)

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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/)

Slide 72

Slide 72 text

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)

Slide 73

Slide 73 text

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)