Cascading Style Sheets Purpose Cascading Style Sheets CSS
- Slides: 24
Cascading Style Sheets
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. w 3. 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: 12 pt; color: #ff 0000"> – Inline Styles don't separate content and layout
Inline Styles: Example • <html …><head> <title>Inline Styles</title> </head><body> <p style = "font-size: 20 pt; color: #ff 00 ff"> The text in this paragraph has the font-size 20 pt. 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 <h 1>, 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 } h 1 { font-family: helvetica, sans-serif } p { font-size: 12 pt; font-family: arial, sans-serif }. blue { color: #6666 ff } </style> <head> • Meaning: – – every text within <em> will be bold and black text within <h 1> will be in Helvetica or sans-serif font text within <p> will be in Arial or sans-serif font element with class="blue" will be in color #6666 ff (light blue)
• Embedded CSS: Example <html …><head> <style type = "text/css"> … </style> <!-– as in previous slide --> </head><body> <h 1>Embedded CSS</h 1> <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 } h 1 { font-family: courier, monospaced } p { font-size: 10 pt; 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, bolder, lighter – absolute: 100, 200, 300, …, 900 • font-size – relative: n%, xx-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 1 st 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. #ff 00 ff: • ff red, 00 green and ff blue = magenta
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 – e. g. , <link rel="stylesheet" type="text/css" href="315. css" />
External Style Sheets: Form • simply a list of CSS rules – see Embedded Style Sheets • e. g. , – em { font-weight: bold; color: purple } h 1 { font-family: helvetica, sans-serif } p { font-size: 12 pt; font-family: arial, sans-serif }. blue { color: #6666 ff }
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 W 3 C CSS Validator
Cascading style sheets outlook
Cascading style sheets definition
By default a background image will repeat
Css button style generator
Syntactically awesome stylesheets
Cmfb
Beda pohon kinerja dan cascading
Vertical-align trong css
Integrated strategy map
Cascading rpjmd
Cascading timers
Fractional cascading
Define cascading effect
Cascading consequences
Interconnecting or cascading two plc counters involves
Draw the cascade amplifier and its ac equivalent circuit
Cascading problem in dynamic cmos logic
Cascading flowers calder
Cascading behavior in networks
"opini bpk"
Draw pneumatic circuit
Cascading tabs
What is a sentence purpose
Specific purpose statements
Block style letter with mixed punctuation
