Cascading Style Sheets™ (CSS)

Cascading Style Sheets™ (CSS)
1
Cascading Style Sheets (CSS)
⚫Separation of structure from presentation
⚫Three ways to define the style of XHTML files
⚫External Style Sheet
⚫Embedded Style Sheet
⚫Inline Style
2
Cascading Style Sheets (CSS)
⚫ Separation of structure from presentation
⚫ Inline Styles
⚫ Declare an individual element’s format
⚫ Attribute style inside a single XHTML element
⚫ CSS property
⚫ Properties background-color, color
⚫ Properties font-family, font-size
⚫ Followed by a colon and a value
⚫ For example:
<p style = “font-size: 20pt; color: #0000ff”>
your paragraph</p>
3
Inline Styles
⚫ An inline style can be used if a unique style is to be applied
to one single occurrence of an element.
⚫ To use inline styles, use the style attribute in the relevant
tag. The style attribute can contain any CSS property. The
example below shows how to change the text color and the
left margin of a paragraph:
⚫ <p style="color:blue;margin-left:20px">This is a
paragraph.</p>
Inline Styles
5
Embedded Style Sheets
⚫Embed an entire CSS document in an XHTML
document’s head element.
⚫Element style
⚫Attribute type describes a file’s content using
Multipurpose Internet Mail Extensions (MIME) type
⚫Example: <style type=“text/css”>
</style>
6
Internal Style Sheet
⚫ An internal style sheet can be used if one single document
has a unique style. Internal styles are defined in the <head>
section of an HTML page, by using the <style> tag, like
this:
⚫ <head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
add style information into the <head>
section
External Style Sheet
use the <link> tag to link to an external style sheet
⚫An external style sheet is ideal when the style is
applied to many pages.
⚫ With an external style sheet, you can change the
look of an entire Web site by changing one file.
⚫Each page must link to the style sheet using the
<link> tag.
⚫ The <link> tag goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
Linking External Style Sheets
⚫External style sheets
⚫Can provide uniform look and feel to entire site
⚫File extension : styples.css
⚫CSS comments : /* ….*/
⚫Element link in the head section of the XHTML
document :
<link rel = “stylesheet” type=“text/css”
href=“styles.css” />
10
CSS Rules
⚫For an element in XHTML, you can specify a
displaying rule
⚫The body of each rule is enclosed in { }.
⚫Properties background-color, color
⚫Properties font-family, font-size
⚫Example :
li, p {color: red; font-size: 12pt}
12
Style Class
⚫Defines styles that can be applied to any type of
element.
⚫The declaration: .special {. . . }
⚫Attribute class of an XHTML element is used to apply
a style class:
⚫Example : <p class=“special”>
13
Conflicting Styles (1)
⚫ Cascading: all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where
number four has the highest priority:
1. Browser default
2. External style sheet
3. Embedded style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)
14
Conflicting Styles (2)
⚫Inheritance :
⚫Child (nested) element inherits styles of parent element.
⚫Descendant’s properties have greater specificity than
ancestor’s properties.
⚫ Child’s style > Parent’s style
15
Grouping Element
⚫XHTML Element span : a grouping/inline-level
element.
⚫Apply CSS rules to a block of text.
⚫XHTML Element div: a similar element, but display on
its own line, with margins above and below (a block-
level element).
⚫Apply CSS rules to a block of text.
16
Length Measurement
⚫ Relative-length Measurement is based on screen
resolution.
⚫ px (pixels) : margin-left: 75px
⚫ em (height of an uppercase M) : font-size: 1.5em
⚫ ex (height of a lowercase x)
⚫ Absolute-length Measurement
⚫ in (inches), cm (centimeters), mm (millimeters), pt (points, 1 pt =
1/72 in), pc (picas, 1 pc = 12 pt).
17
Font
⚫ font-size sets the size of a font
⚫ xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger,
XXpt, xx%
⚫ font-family: a prioritized list of font family names and/or
generic family names for an element
⚫ arial, sans-serif
⚫ font-weight sets the weight of a font
⚫ normal, bold, bolder, lighter, 100 ~ 900
⚫ font-style sets the style of the font
⚫ normal, italic, oblique
18
Backgrounds
⚫ background-image specifies the image URL
⚫ background-position places the image on the page
⚫ background-repeat controls the tiling of the background
image
⚫ background-attachment
⚫ fixed
⚫ scroll
19
background.html
(1 of 2)
20
background.html
(2 of 2)
21
22
Element Dimensions
⚫CSS rules can specify the actual dimensions of each
page element
⚫Example:
style=“width:20%; height:30%”
23
width.html
(1 of 2)
24
width.html
(2 of 2)
25
Positioning Elements
⚫ Absolute positioning
⚫ Property position: “position : absolute;”
⚫ Properties top, left, right, bottom
⚫ The distances from margins of its containing block-level element.
⚫ z-index attribute
⚫ Layer overlapping elements properly, higher in front of lower value.
⚫ Relative positioning
⚫ Elements are positioned relative to other elements
⚫ Property position : “position : relative; ”
26
positioning.html
(1 of 1)
27
28
positioning2.html
(1 of 2)
29
positioning2.html
2 of 2
30
31
dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
32
33

Cascading Style Sheets™ (CSS)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Cascading Style Sheets™ (CSS)

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets™ (CSS)

You might also like