Embed Size (px)
Citation preview
3.1 Cascading Style Sheets
Motto
Fashions fade, style is eternal.
—Yves Saint Laurent
Purpose
• Cascading Style Sheets (CSS) – specify the presentation of elements
• e.g., font, position, …
– separate from the document's structure
• Three types– Inline Styles– Embedded Style Sheets– External Style Sheets
• CSS validator jigsaw.w3.org/css-validator/
Inline Styles
• Inline style – declared using the style attribute
• within in the element’s start tag• good only for this element
• The value of the style attribute: – semicolon-separated list of properties– form: property-name : property-value– e.g.,
• <p style = "font-size: 12pt; color: #ff0000">
– Inline Styles don't separate content and layout
Inline Styles: Example• <html …><head>
<title>Inline Styles</title></head><body> <p style = "font-size: 20pt; color: #ff00ff"> The text in this paragraph has the font-size 20pt. and is rendered in magenta color.</p></body></html>
Embedded Style Sheets
• Define styles for an entire document
• Can associate a set of style properties– with a particular XHTML element
• e.g., with <p>, with <h1>, with <span>, with …• will be applied to each such element
– independent of any elements• identified by (class) name• can be applied to an arbitrary element
Embedded CSS: Form
• <style> element – within <head>– attribute type="text/css"
• the MIME type (encoding format)
– inner text must follow syntax:• list of rules• a rule consist of a name and set of properties• name is either an element name or a class name (see next)• set of properties is enclosed in {and }• a property is specified as in Inline Styles
Style Classes
• Class name – arbitrary letters and -
• no spaces
• In style definition– preceded by .– can be combined with an element
• form: element-name.class-name• e.g., a.nodec {text-decoration: none}
– applies only to <a class="nodec">
Embedded CSS: Sample
• <head> <style type = "text/css"> em { font-weight: bold; color: purple } h1 { font-family: helvetica, sans-serif } p { font-size: 12pt; font-family: arial, sans-serif } .blue { color: #6666ff } </style> <head>
• Meaning:– every text within <em> will be bold and black
– every text within <h1> will be in Helvetica or sans-serif font
– every text within <p> will be in Arial or sans-serif font
– every element with class="blue" will be in color #6666ff (light blue)
Embedded CSS: Example• <html …><head>
<style type = "text/css"> … </style> <!-– as in previous slide --></head><body> <h1>Embedded CSS</h1> <p>Let me <em>emphasize this</em> and <span class="blue">color this</span>.</p> <p>And <em>do it</em> also in <span class="blue">this section</span>.</p> <p>And in <span class="blue">another section</span> <em>again</em>.</p></body></html>
Embedded CSS: Example 2• <head>
<style type = "text/css"> em { font-weight: bold; color: red } h1 { font-family: courier, monospaced } p { font-size: 10pt; font-family: garamond, serif } .blue { color: blue } </style> <head>
Precedence of Styles
• If there are several styles for one element, which one will be applied?
• precedence:1. user
2. author (you)
3. "user agent" (=browser)
• within document:– the more specific wins– the innermost wins
Font Properties
• font-family– comma–separated list (in order left-to-right) of
• font names, e.g., times-roman, helvetica, courier• generic fonts: serif, sans-serif, monospace, cursive
• font-style– normal, italic, oblique
• font-weight– relative: normal, bold, bolder, lighter– absolute: 100, 200, 300, …, 900
• font-size – relative: n%, xx-small, x-small, small, smaller, medium,
larger, large, x-large, xx-large– absolute: npt, nem, nex, … (see next slide)
Unit Values
• Absolute– pt: points– px: pixels– in: inches – cm: centimeters– mm: milimeters– pc: picas
• Relative (to default font size)– %: percent– em: height of the letter M– ex: height of the letter x
Font Properties: Guidelines
• font-family– always end the list with a generic font
• serif, sans-serif, monospace, …
• font-weight, font-size – use relative rather than absolute values– accessibility!
Text Properties
• text-align– left, right, center, justify
• text-indent– length or percent (see previous slide)– indentation of the 1st line
• text-decoration – underline, overline, blink, line-through
• color– see next slide
Color Values
• Predefined colors:– black, white, gray, red, green, blue, yellow, aqua, fuchsia, lime, maroon, navy, olive, purple, silver, teal
• Colors in hex– start with #– then 6 hex digits, 2 for each red, green, blue– e.g. #ff00ff:
• ff red, 00 green and ff blue = magenta
Lecture-specific questions
• What colors is #777777?
• And what color is #ff0000?
• Can you write white in another way?
• Write an style rule that makes a link purple if the user's mouse is on top of the link.
Background Properties
• background-color – see previous slide
• background-image – URL– laid over background-color
• background-repeat – repeat, repeat-x, repeat-y, no-repeat– whether and in which dimension to repeat the image
Pseudoclasses
• Provide access to content not specifically declared in the document
• Form:– element-name : pseudoclass – no surrounding spaces!
• hover pseudoclass is used when the mouse is on top of an element– e.g., a:hover {color: purple}
External Style Sheets
• A separate document with only CSS rules
• Complete separation of contents and style
• Used to create websites with uniform look– several (all) pages can use the same styles – change in a single style-sheet file changes
styles across the entire website
Link to an External Style Sheet
• <link> element – within the <head> element – rel="stylesheet" attribute
• relation to linked document
– type="text/css" attribute • MIME type
– href attribute• URL of the external style sheet
External Style Sheets: Form
• simply a list of CSS rules– see Embedded Style Sheets
• e.g.,– em { font-weight: bold; color: purple }h1 { font-family: helvetica, sans-serif }p { font-size: 12pt; font-family: arial, sans-serif }.blue { color: #6666ff }
External Style Sheets: Example
• E.g., several pages, one style
Another External Style Sheet
• Same pages, only the single external CSS changed
Guidelines
• Always use external style sheet for a website!– consistent look-and-feel
– faster development
– faster browsing• downloaded once, stored, applied to all pages
• Test your CSS in all common browsers – Firefox, I-Explorer, Opera, Safari, Google Chrome
• Run your CSS through W3C CSS Validator
