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
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
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: <br/>p { color: red; }<br/> In a separate file referenced with the link element (within the element):
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
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; }
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
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; }
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/
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.
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;
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;
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;
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;
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%;
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;
CSS Training course CSS: Positioning An overview • Displays • The Box model ◦ Internet Explorer • Padding • Margins • Dimensions • Floats • Positioning ◦ z-index • Overflow
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.)
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
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
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.
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;
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.
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).
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
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
CSS Training course CSS: Example 2 Positioning • Centring the page • Floating the content and subcontent • Highlighting the headings • Clearing the footer
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);
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;
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:
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 %)
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;
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');
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
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
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/
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.
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: 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 ...
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; }
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/
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
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:
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
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/)
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)
cole007
uxaustralia
haru860
yuyaink
edp2022_team4
hatena
kiaking
meganerinmiller
aguringo
sysbird
akinen
448jp
chrislema
addyosmani
phodgson
bkeepers
akmur
trishagee
lara
cherdarchuk
sstephenson
shpigford
destraynor
denniskardys