Transcript Slides
Cascading Style Sheet (CSS)
1
Cascading Style Sheets (CSS)
a style defines the appearance of a document
element.
o E.g., font size, font color etc…
a style sheet: collection of styles for a Web
page or Website
style sheets use common language and syntax
main style sheet standard: Cascading Style
Sheets (CSS)
2
CSS history
developed by WWW Consortium (www.w3c.org), the
same organization that develops standards for HTML
designed to augment HTML, not replace it
a whole new way of formatting Web pages
provides several tools not available with standard
HTML
different versions
o CSS1 released in 1996 (fonts, text, color, background)
o CSS2 released in 1998 (positioning, visual formatting)
o CSS3, latest standard being developed
3
Benefits of style sheets
a design tool
makes website design more flexible
easier to maintain and modify
more aesthetically interesting
consistent look
4
5
Applying a Style Sheet
Three ways to apply a style to an HTML
document:
1. Inline Styles
2. Embedded Style Sheet
3. External Style Sheet
6
Style types
o Inline styles
styles are added to each tag within the HTML file
style only affects that particular tag
7
Using inline styles
format a single section, better use inline style
syntax
<tag style=“style declarations”>
o tag is the name of an HTML element (h1, h2, p, etc)
o style declarations
the styles defined for the particular tag
must be enclosed within double quotation marks
use semi-colon separate multiple attributes
<tag style=“attribute1:value1; attribute:value2”>
o e.g.
<h1 style="text-align: center; color: red">
8
But what if there are same tags appearing
multiple times in the webpage and you want
to format all of them uniformly
9
Style types (contd.)
o Inline styles
styles are added to each tag within the HTML file
style only affects that particular tag
o Embedded or global styles
applied to an entire HTML file
allowing the Web designer to modify the appearance of
any tag in the document
10
Creating an embedded style
embedded style, a style applied to various sections
within a Web page
use <style> tag within the <head> … </head> section
within <style> tag, enclose style declarations
syntax
<head>
<style type=“text/css”>
style declarations
</style>
</head>
11
Embedded Style
syntax for style declaration:
selector{attribute1:value1; attribute2:value2; ...}
o collection of attributes and values
selector
o identifies an element in your document, e.g., a heading
o identifies attributes and values within the braces for that
element
example
<style type="text/css">
h1 {text-align: center; color: red}
</style>
12
Embedded Style (contd.)
Simple Practice exercise:
Using Embedded styles, convert “course description” and
“reference texts” in main.html to blue
13
Grouping selectors
What if there are many tags or blocks which follows
the same style throughout the page?
apply the same declaration to a group of selectors by
including all of the selector names separated by commas
<style type=“text/css”>
h1, h2, h3, h4, h5, h6 {text-align: center; color: red}
</style>
14
Now the next level!
Just the way we changed the styles uniformly in a
single webpage, how about applying that across
multiple webpages, i.e., your website
We now need an external style sheet
15
Style types (contd.)
o Inline styles
styles are added to each tag within the HTML file
style only affects that particular tag
o Embedded or global styles
applied to an entire HTML file
allowing the Web designer to modify the appearance of
any tag in the document
o Linked or external style sheets
placed in an external file, linked with Web pages
allowing Web designer to modify the appearance of tags
in several documents across the website
16
Creating an external style sheet
1.
Crate a new text file
2.
Save it using the extension “.css”,
3.
Place your styles here
Within a style sheet, <style> tag is NOT
needed, only need style declarations
17
Creating an external style sheet
Create a text file containing style declarations
/* Author: author name
*/
h1, h2, h3, h4, h5, h6 {text-align: center; color: red}
Name the file: mystylesheet.css
Remember:
o Only external stylesheet creation not sufficient
o Need to link the stylesheet and the html pages where you
need the styles
18
Linking to style sheets with <link>
Example: link to a style sheet named “mystylesheet.css,”
<link rel="stylesheet" href="mystylesheet.css" type="text/css" />
Placement within <head> … </head> of the webpage where
you need the styles
19
Style Conflict
Apply external, embedded and inline all three types
of styling with h1 tag
External:
o
Embedded:
o
Text-align: center and color: blue
Inline:
o
Text-align: center and color: red
Text-align: center and color: green
What is the result?
20
Style precedence
in case of styles conflict, precedence is
determined in the following order:
1. an inline style overrides any embedded style or
external style sheet
2. an embedded style overrides an external style
sheet
3. an external style sheet overrides the internal
style rules set by the Web browser
21
Understanding Cascading Order
22
Style Inheritance
If a style is not specified for an element, it
inherits the style of its parent element.
This is called style inheritance
body {color: green}
p {color: red}
In the above example, the body element is
the parent element
23
Practice exercise
All the elements in my unordered (bulleted)
list must be red throughout the website
All the elements in my ordered (numbered)
list must be blue throughout the website
24
CSS Part 2
25
What we will cover today…
1.
2.
3.
4.
Managing Font-size
Letter and word spacing
Text appearance and attributes
Hyperlinks appearance and attributes
26
Managing font size
in CSS, use font-size attribute to manage font sizes
o
body {font-size: some value}
font sizes can be expressed in 4 ways
1. as a unit of length
1.
2.
2.
3.
4.
Absolute unit
Relative unit
as a descriptive keywords
with a keyword expressing the size relative to the font
size of parent element
as a percentage of the parent element
27
1. Unit of length: Absolute units
use unit of length, absolute units or relative units
o absolute units define the font size based on one of the
following standard units of measurement:
mm (millimeter),
cm (centimeter),
in (inch),
pt (point; 1pt=1/72in)
pc (pica; 1pc=12pt)
28
1. Unit of length: Relative units
relative unit expresses the font size relative to a size
of a standard character
o em unit is equal to the width of capital letter “M” in browser’s
default font size
o ex unit is equal to the height of a small “x” in default font size
29
1. Unit of length: Pixels
a pixel is the smallest element recognized by
the monitor
text that is 10 pixels high may be perfectly
readable at a low-resolution (e.g., 640 x 480)
monitor, but it can become unreadable at
high-resolution (e.g., 1024 x 768) monitor
30
2. Descriptive keywords
seven descriptive keywords for font size
o xx-small
o x-small
o small
o medium
o large
o x-large
o xx-large
Example
body {font-size: medium}
31
3. Keywords: smaller, larger
Size relative to parent element
using keywords “larger” and “smaller,”
o makes the font one size larger or smaller than
the size of parent element
o example: to make <p> paragraph text one size
larger than the body text:
body {font-size: medium}
p {font-size: larger}
32
4. Font size as percentage of parent tag
The font size of bold content (defined by <b> tag) is 150% of the size
of surronding text (where the font size is defined by <body> tag)
33
Text Appearance and Styling
34
Specifying letter, word spacing
set the space between individual letters
i n d i v i d u a l l e t t e r s
letter-spacing attribute
letter-spacing: size
change the spacing between individual words
individual
words
word-spacing attribute
word-spacing: size
size can be
o
any number expressed in the same measuring units used to describe font
size (inches, millimeters, centimeters, em units, etc.)
35
Special text attributes
CSS provides three attributes for special
text effects:
1. text-decoration
2. text-transform
3. font-variant
36
text-decoration attribute
attribute name: text-decoration
values
o
o
o
o
none (basically default; no change)
underline
overline
line-through
examples
37
text-transform attribute
attribute name: text-transform
attribute value:
o capitalize
capitalize the first letter of each word in a paragraph
38
text-transform attribute
attribute name: text-transform
attribute value:
o uppercase
display the text in all capital letters
39
text-transform attribute
attribute name: text-transform
attribute value:
o lowercase
display the text in all lowercase letters
40
text-transform attribute, example
41
font-variant attribute
font-variant attribute create small caps
small caps are capital letters that are the same size
as lowercase letters
syntax
font-variant: small-caps
42
font-variant attribute, example
43
Contextual Selector
44
Working with style inheritance
Web pages invariably have elements (e.g., tags)
placed within other elements
sample tree structure of Web elements
45
Parent and descendant elements
an element that lies within another element is called
a descendant or descendant element
o e.g., in previous slide, <b> tag is a descendant of <p> tag
an element that contains another element is called
the parent or parent element.
o e.g., <body> tag is the parent of all other tags used to
format the Web contents
using the principle of inheritance, styles defined for
a parent tag are transferred to its descendants
tags
46
Contextual selectors
use tree structure to better control styles
o apply a style only to direct descendant of a parent
element, use syntax: e1 e2
o e1 and e2 are the names of HTML elements (i.e.
tags) and e2 is directly below e1 in the tree
structure of elements
o example: li b {color:blue}
only changes the color of the boldface text residing
within a <li> tag to blue
not all browsers support contextual selectors
47
Hyperlink appearance and attributes
Hyperlink styling
What is the tag for hyperlinks?
Introduce the tag for hyperlink as a selector in CSS
All the attributes discussed so far would work when
applied in CSS
48
Hyperlink appearance change
By default, hyperlinks are blue and have underline
1.
Change them to red hyperlinks and no underline (default for
my website)
2.
Change them to red hyperlinks, small caps with lines both
above and below the links
49
Hyperlink Special Selector
a is the general selector
Link: used for un-visited link
o a:link
Visited: used for visited link.
o a:visited
Active: used for the link when it is clicked.
o a:active
Hover: used for the link when the mouse
hovers over it
o a:hover
50
Practice exercise
Write a CSS file with all the Styles as defined below for the
hyperlinks:
The hyperlinks must be color green with underline textdecoration.
While hovering over the hyperlink with mouse, the hyperlinks
must turn UPPERCASE TEXT, color blue and without any
underline.
The visited hyperlinks must turn into strike through line.
51