40
CSS: Separating Design and Content Kevin Campbell Katya Sadovsky
| Date post: | 14-Dec-2015 |
| Category: |
Documents |
| Upload: | brendon-kady |
| View: | 226 times |
| Download: | 1 times |
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
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)
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 <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"><!-- 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>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
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
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
» #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/
