1 / 40

CSS: Separating Design and Content

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

yahto
Download Presentation

CSS: Separating Design and Content

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSS: Separating Design and Content Kevin Campbell Katya Sadovsky

  2. What We’ll Do • What is CSS? • View some code and talk basics • Why use CSS? • Advantages to Workflow • Cost Savings • Implementations • Resources

  3. CSS Intro

  4. 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 HakonWium 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.

  5. Why CSS? • Advantages to Workflow • Cost Savings

  6. Advantages of CSS • Workflow • Faster downloads • Streamlined site maintenance • Global control of design attributes • Precise control (Advanced) • Positioning • Fluid layouts

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

  8. Advantages of CSS - Cost Savings • 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)

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

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

  11. Applying cSS

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

  13. Applying CSS to HTML • Style rules can be applied in 3 ways: Inline Styles: <H1 STYLE=“color: blue; font-size: 20pt;”>A large purple Heading</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

  14. Let’s See Some Code • Sample Style sheet • Rule Structure

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

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

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

  18. ADVANCED CSS

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

  20. Selectors & cascading

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

  22. Cascading and Inheritance • When there are multiple rules that could apply to the same element and/or property and media type, sort declarations on (): • Weight (normal, !important) and origin (author, user, user agent)normal: author -> user -> user agent!important: user -> author -> user agentNOTE: user agents supply a “default” style sheet • Selector specificity: more specific selectors have precedence • Order specified: styles specified later in the order have precedence

  23. Imported stylesheet Linked stylesheet STYLE attribute <STYLE> block overrides overrides overrides Cascading and Inheritance • A simplified view of the preceding “formula”:

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

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

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

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

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

  29. margin padding content border CSS box model Also, see 3D diagram at http://www.hicksdesign.co.uk/journal/3d-css-box-model

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

  31. 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;

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

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

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

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

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

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

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

  39. 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: • Browser • User style sheets • Author style sheets • Author important styles • User important styles • Important notation: • p.right { align: right !important; }

  40. 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/

More Related