CSS: Separating Design and Content Kevin Campbell Katya 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

Advantages of CSS - Cost Savings Faster download = better usability – Web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson)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)

Advantages of CSS - Cost Savings 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 – 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: Intro Imported style sheets – In external style sheets multiple style sheets can be 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: A large purple Heading For individual elements using the STYLE attribute Embedded style sheets: Stylin’! H1 {color: purple;} P {font-size: 10pt; color: gray;} … External style sheets: <LINK REL=stylesheet” TYPE=“text/css” HREF=“styles/mystyles.css”> 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 Danger! Be careful… ……. 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 & cascading PatternMeaning *Universal selector: matches any element. EType selector: matches any E element (i.e., an element of type E; e.g. H1 or P). E FDescendant selector: matches any F element that is a descendant of an E element. E > FChild selector: matches any F element that is a child of an element E. E + FAdjacent 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.warningHTML only. The same as DIV[class~="warning"]. E#myidID 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-childPseudo-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:focusDynamic Pseudo-class selector: matches E during certain user actions. E:first-line, E:first-letterPseudo-element selector: matches the first formatted line or letter of element E.

Simple example of selection CSS példa <!-- h1 { font-size: 20px; color: #a00000; } p { font-size: 12px; color: #00a000; }.fontos { color: #ff0000; } h1.fontos { background: #ffcccc; } #idfontos { color: #ff0000; } --> Osztály kiválasztás példa Ez a bekezdés pirossal fog megjelenni. Ennek a bekezdésnek a betűszíne: #00a000. Ez szintén piros Ez a zöldes árnyalat Szintén zöldes árnyalat PIROS!!! Szintén piros

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 sheet 2.Selector specificity: more specific selectors have precedence 3.Order specified: styles specified later in the order have precedence

Cascading and Inheritance STYLE attribute blockLinked stylesheetImported stylesheet 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 (,, 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 ( ) – Cannot contain other block-level elements “ Replaced ” elements are those that are replaced by the content they point to (,, etc)

CSS box model content padding margin border Also, see 3D diagram at

Containing & Anonymous block 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 some text paragraph other text

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 Absolute Positioning 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

Element presentation display property controls what type of box is generated for an element – Visibility: visible|hidden|collapse – Values: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table- row | table-column-group | table-column | table- cell | table-caption | none | inherit

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 » # – 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.Browser 2.User style sheets 3.Author style sheets 4.Author important styles 5.User important styles Important notation: – p.right { align: right !important; }

Useful CSS resources