css: separating design and content

CSS: Separating Design and Content

Kevin CampbellKatya Sadovsky

What We’ll Do

• What is CSS?• View some code and talk basics• Why use CSS?

– Advantages to Workflow– Cost Savings

• Implementations• Resources

CSS INTRO

What are Cascading Style Sheets?• Cascading Style Sheets, or CSS, are a series of instructions that specify

how markup elements should appear on a Web page.• Properties:

– Separates design elements from structural logic– You get control and maintain the integrity of your data– Reduces HTML complexity

• History– Created by Hakon Wium Lie of MIT in 1994– Has become the W3C standard for controlling visual presentation of web pages:

• 17 dec 1996 CSS1• 12 may 1998 CSS2• 19 jul 2007 CSS2.1• CSS3 on its way

• For the purposes of this presentation, I will focus on CSS level 2 specification.

Why CSS?

• Advantages to Workflow• Cost Savings

Advantages of CSS

• Workflow– Faster downloads– Streamlined site maintenance– Global control of design attributes– Precise control (Advanced)

• Positioning• Fluid layouts

Advantages of CSS - Cost Savings

• Cost Savings– Reduced Bandwidth Costs

• One style sheet called and cached– Higher Search Engine Rankings

• Cleaner code is easier for search engines to index• Greater density of indexable content


• Faster download = better usability– Web usability redesign can increase the sales/conversion

rate by 100% (source: Jakob Nielson) – CSS requires less code– Tables require spacer images– Entire table has to render before content– CSS can control the order that elements download

(content before images)

http://www.useit.com/alertbox/20030107.html


• Increased Reach– CSS website is compatible w/ many different

devices– In 2008 an est. 58 Million PDA’s will be sold

(Source: eTForecast.com)– 1/3 of the world’s population will own a wireless

device by 2010

CSS isn’t perfect (yet)

• CSS support in browsers is still uneven• Make sure your CSS properties are supported• Internet Explorer is still not CSS compliant

– Some of the areas not supported:• Child selectors• Attribute selectors• Counters

APPLYING CSS

Linking CSS to your HTML• Embedded style sheets

– In the HTML header between <style></style>– Applied for the whole HTML file

• External style sheets– Can be applied for multiple HTML files

• Element linked style sheets– On location HTML element linking, only applied to the element it is bound to– Similar to the font elements formatting rules– Use the style attribute:

<h1 style=“font-size: 20px;”>Intro</h1>

• Imported style sheets– In external style sheets multiple style sheets can be linked:

• @import url(other.css);– The import has to precede all other CSS elements in the documents

Applying CSS to HTML

• Style rules can be applied in 3 ways:

Inline Styles:

<H1 STYLE=“color: blue; font-size: 20pt;”>A large purpleHeading</H1>

For individual elements using the STYLE attribute

Embedded style sheets:

<HTML><HEAD><TITLE>Stylin’!</TITLE><STYLE TYPE=“text/css”>

H1 {color: purple;}P {font-size: 10pt; color: gray;}

</STYLE></HEAD>…</HTML>

External style sheets:

<HEAD><LINK REL=stylesheet” TYPE=“text/css” HREF=“styles/mystyles.css”></HEAD>

This is true “separation” of style and content. Keeping all your styles in an external document is simpler

Let’s See Some Code

• Sample Style sheet• Rule Structure

Brief overview of the CSS2 syntax

Ruleset syntax: selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*

S* = [ \t\r\n\f]+ declaration = property ':' S* value;

Example:.uportal-text-small {

color : Black;font-family : Verdana, Geneva, Arial, Helvetica;font-size : 10px; }

selector

declaration

property

Selectors

• Class Selectors<H1 CLASS=“warning”>Danger!</H1><P CLASS=“warning”>Be careful…</P>…….In your HTML code -H1.warning {color: red;}

OR to an entire class….warning {color:red;}

Selectors

• Element Selectors – (refer to HTML tags)H1 {color: purple;}H1, H2, P {color: purple;}

• Contextual – (refer to HTML, but in context)LI B {color: purple;}

ADVANCED CSS

Selectors & cascading• Selectors are a way to match styles to elements in the document tree• Different types of selectors:

– Universal selector – Type selectors – Descendant selectors – Child selectors – Adjacent sibling selectors – Attribute selectors – ID selectors – Pseudo-elements– Pseudo-classes

• Spaces matter!– P#myid – selects a P element with id equal to “myid”– P #myid – selects an element with id equal to “myid” that is a descendant of P

Selectors & cascadingPattern Meaning

* Universal selector: matches any element.

E Type selector: matches any E element (i.e., an element of type E; e.g. H1 or P).

E F Descendant selector: matches any F element that is a descendant of an E element.

E > F Child selector: matches any F element that is a child of an element E.

E + F Adjacent siblings selector: Matches any F element immediately preceded by an element E.

E[foo] Attribute selector: matches any E element with the "foo" attribute set (whatever the value).

E[foo="warning"] Attribute selector: matches any E element whose "foo" attribute value is exactly equal to "warning".

E[foo~="warning"] Attribute selector: matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning".

E[lang|="en"] Attribute selector: matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en“ (e.g. en-US).

DIV.warning HTML only. The same as DIV[class~="warning"].

E#myid ID selector: matches any E element ID equal to "myid".

E:lang(c) Pseudo-class selector: matches element of type E if it is in (human) language c (the document language specifies how language is determined).

E:first-child Pseudo-class selector: matches element E when E is the first child of its parent.

E:link, E:visited Pseudo-class selector: matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).

E:active, E:hover, E:focus Dynamic Pseudo-class selector: matches E during certain user actions.

E:first-line, E:first-letter Pseudo-element selector: matches the first formatted line or letter of element E.

Simple example of selection<html> <head> <title>CSS pelda</title>

<style type="text/css"></style> </head><body><h1>Osztaly kivalasztas pelda</h1><p class="fontos">Ez a bekezdes pirossal fog megjelenni.</p><p>Ennek a bekezdesnek a betuszine: #00a000.</p><p class="fontos">Ez szinten piros</p><p>Ez a zoldes arnyalat</p><p>Szinten zoldes arnyalat</p><h1 class="fontos">PIROS!!!</h1><p id=”idfontos">Szinten piros</p></body>

Cascading and Inheritance

• When there are multiple rules that could apply to the same element and/or property and media type, sort declarations on ():

1. Weight (normal, !important) and origin (author, user, user agent)normal: author -> user -> user agent!important: user -> author -> user agent

NOTE: user agents supply a “default” style sheet2. Selector specificity: more specific selectors have

precedence3. Order specified: styles specified later in the order have

precedence

Cascading and Inheritance

STYLE attribute

<STYLE> block

Linked stylesheet

Imported stylesheet

overrides

overrides

overrides

• A simplified view of the preceding “formula”:

Logical vs Physical Tags

• “Logical” tags convey the structure and semantic information of the document (H1-H6, P, STRONG)

• “Physical” tags specify the visual presentation of document elements but do not convey the meaning of the document or its parts (B, U, FONT, BR)

• Do not use physical tags to solely describe the visual presentation of content (be mindful of alternative user agents such as speech readers or text-only browsers)

Fonts

• Font type - font-family – body { font-family: Arial, Helvetica, sans-serif; }

• font-style – body { font-style: italic; }

• font-weight – body { font-weight: bold; }

• font-size – body { font-size: 14px; }

• font – body { font: italic bold 14px Arial, Helvetica, sans- serif; }

Text properties• Color – h1 { color: black; }• Shadow – h1 {text-shadow: 5px 5px 3px #000000; }

• Spacing – h1 { letter-spacing: 10px; }• Alignment

– h1 { text-align: center; }– .super { vertical-align: super; }

• White-space handling – p { white-space: nowrap; }• Word spacing – p { word-spacing: 10px; } • Indentation – p { text-indent: 40px; }• Line height – p { line-height: 20px; }• Transformation – h1 {text-transform: uppercase; }

List handling

• For the UL and OL HTML tags– ul { list-style: square inside url(pont.gif) }

– ul { list-style-position: inside }– ul { list-style-type: disc }– ul { list-style-image: url(pont.gif) }

Block vs Inline elements• Block-level elements are presented visually as blocks; i.e. they

generate a line break before and after themselves (<p>, <ul>, etc)– Can contain other block-level and inline elements– Act as containing blocks for nested elements

• All other elements, are inline elements; no line breaks are generated before and after (<span>)– Cannot contain other block-level elements

• “Replaced” elements are those that are replaced by the content they point to (<img>, <applet>, etc)

CSS box model

content

padding

margin

border

Also, see 3D diagram at http://www.hicksdesign.co.uk/journal/3d-css-box-model

http://www.hicksdesign.co.uk/journal/3d-css-box-model

Containing & Anonymousblock boxes

• Block boxes can serve as containing blocks for child boxes– Note: if a block box has another block box inside

it, then they are forced to have only block boxes inside it, by wrapping any inline boxes in an anonymous block box

<div> some text <p>paragraph</p> other text</div>

Box properties• Background

– background-color: white; – background-image:

url(‘hatter.gif’); – backgound-position: top left; – background-attachment: scroll; – background-repeat: repeat; – body { background: white

url(hatter.gif) no- repeat fixed center center; }

• Margin – p { margin: 0px 1px 2px 3px; }

• margin-left: 3px; • margin-top: 0px;• margin-right: 1px;• margin-bottom: 2px;

• Border:– p { border: 2px solid blue; }

• border-left:1pxsolidred;• border-top:3pxdoubleblue;• border-right:3pxdottedgreen;• border-bottom:3pxdashedblack;

• Outline– Does not change the box size– p { outline: 2px solid #000000; }

• outline-width:2px;• outline-style:solid;• outline-color:#000000;

• Padding– p { padding: 0px 1px 2px 3px; }

• padding-left: 3px; • padding-top: 0px;• padding-right: 1px;• padding-bottom: 2px;

Positioning schemes

• Positioning schemes in CSS include:– Normal flow (includes relative positioning)– Floating– Absolute positioning

Floating

• float property allows element boxes to be shifted to the right or left on the current line– Floated boxes are block boxes– Floated boxes are “pulled out” of the normal flow and

repositioned– Must have explicit width – May overlap other boxes

• clear property specifies which side(s) of an element should NOT be adjacent to a floating box that is specified earlier in the document

Relative and AbsolutePositioning

• position property:– static – box is positioned according to normal flow– relative – box is positioned relative to where it would have been placed

in the normal flow– absolute – box is positioned relative to its containing block; these boxes

are taken out of flow– fixed – box is fixed in relation to the viewport (a browser window or a

printed page)• z-index property:

– #message { z-index: 1; }– 0 by default– Bigger values result in overlapping contents placed in the same position

Generated content

• CSS allows authors to generate content that is not part of the document tree using the following entities:– :before pseudo-element– :after pseudo-element– content property

Unit specifiers• Dimensions:

– Relative: px, em, ex are all specified in percentages

• px: dependent on the display• em: typographical size

– 1em the size of the normal text in the system

– Default: 16px• ex: the height of the small „x” in the

current font – around half the size of em: 1em~=2ex

• Relative sizes could decrease when inherited

– Absolute: mm, in, cm, pt, pc• Always result in the same size when

displayed• pt: dot = 1/72 inch• pc: pica = 12 dot = 12/72 inch = 1/6

inch

• Colors– Named: red, green, blue,

aqua, ...– RGB component based:

• Hexadecimal notation– #RRGGBB

» #000000 – black» #FF0000 – red» #FFFFFF – white

• Decimal notation:– rgb(r,g,b)

» rgb(0,255,0) – green• Percentage notation:

– rgb(r%,g%,b%)» rgb(0%,0%,100%) -

blue

Inheritance

• Inheritable and non inheritable properties are defined for every html element

• Use inherit property to ensure inheritance• For HTTP links:

– Inherited properties:• E.g. font-family, font-size

– Non inherited properties:• font-color, font-decoration

CSS usage precedence list• 3 sources of CSS information:

– Author of the HTML document– Browser– User of the browser and the reader of the HTML page

• Precedence:1. Browser2. User style sheets3. Author style sheets4. Author important styles5. User important styles

• Important notation:– p.right { align: right !important; }

Useful CSS resources• http://www.w3.org/TR/REC-CSS2/• http://www.yourhtmlsource.com/stylesheets• http://meyerweb.com/eric/css/ • http://webtips.dantobias.com/logical.html• http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm• http://www.w3.org/2005/Talks/11-steven-css-advanced/• http://www.hicksdesign.co.uk/journal/3d-css-box-model • http://greystate.dk/resources/css-boxmodel/ • http://www.csszengarden.com/?cssfile=062/062.css • http://www.w3schools.com/css/• http://webmonkey.wired.com/webmonkey/reference/stylesheet_guide• http://css.maxdesign.com.au/

http://www.w3.org/TR/REC-CSS2/

http://www.w3.org/TR/REC-CSS2/

http://www.yourhtmlsource.com/stylesheets

http://meyerweb.com/eric/css/

http://webtips.dantobias.com/logical.html

http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm

http://www.w3.org/2005/Talks/11-steven-css-advanced/

http://www.hicksdesign.co.uk/journal/3d-css-box-model

http://greystate.dk/resources/css-boxmodel/

http://www.csszengarden.com/?cssfile=062/062.css

http://www.w3schools.com/css/

http://webmonkey.wired.com/webmonkey/reference/stylesheet_guide

http://css.maxdesign.com.au/

css: separating design and content

Documents