◦ 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
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" />
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
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
<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; }
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; }
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/
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.
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;
paragraph (or any block-level element) can be: • left • center • right • justified Justified text rarely works on the web. For example: text-align: center;
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;
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;
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%;
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;
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.)
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
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
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.
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;
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.
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).
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
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
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;
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 %)
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;
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
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
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/
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.
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 ...
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; }
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/
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]-->
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
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
elsh
taigakiyokawa
ashapiro
amishiratori
lratmansunu
cyberagentdevelopers
shihorishimazu
nathanacurtis
base
inesmontani
0opacity_
xuechunwu
hannesfritz
swwweet
philhawksworth
jnunemaker
chriscoyier
tammyeverts
pauljervisheath
speakerdeck
bermonpainter
tammielis
palkan
keathley
