Chapter 6 CSS - Fordham University

Transcript Chapter 6 CSS - Fordham University

Chapter 5
CSS : Cascading Style Sheets
© 2010, Robert K. Moniot
1
OBJECTIVES
In this chapter, you will learn:
• How to control document appearance with style sheets:
– Specifying font, size, color, etc. of text
– Specifying element backgrounds and colors
– Controlling text flow, margins, borders, and padding
• How to make web pages share style sheets for uniform
look.
• How to use the class attribute to apply styles to
document elements according to their function.
• How to use pseudo-classes to allow element styles to
respond to dynamic events.
© 2010, Robert K. Moniot
2
Style Sheets
• Each element on a page has a style defined for it.
• The style is defined by a set of attribute : value
pairs.
• Style attributes can control:
–
–
–
–
Typeface and font properties
Background properties
Box-related properties
List properties
© 2010, Robert K. Moniot
3
Ways to define styles
• Default style: provides values for all element properties,
unless you change it. (Note: user can customize
browser to change defaults!)
• Inline style: style is defined as an attribute of the
element in-place. Use this for “one-off” or special styles.
• Embedded style sheet: styles defined in the head
portion of web page. Use this if you don’t have very
many web pages, or for styles that are useful only for the
given page.
• External style sheet: styles defined in a separate file.
Use this to centralize style definitions and provide
uniformity across all pages of a web site.
© 2010, Robert K. Moniot
4
Embedded Style Sheet
<html>
<head>
<title>Page with embedded style</title>
<style type="text/css">
selector { attribute : value ;
attribute : value ... }
selector { attribute : value ;
attribute : value ... }
...
•Style definitions go into a <style>
</style>
element in document head.
</head>
•Selector determines what elements the
...
style rule applies to.
</html>
•Style definitions separated by ; are
enclosed in { }
© 2010, Robert K. Moniot
5
Embedded Style Sheet (cont’d)
<html>
<head>
<title>Page with embedded style</title>
<style type="text/css">
selector { attribute : value ;
attribute : value ... }
selector { attribute : value ;
attribute : value ... }
...
</style>
•The type attribute can only be "text/css".
</head>
•Note: CSS is not HTML!
...
</html>
© 2010, Robert K. Moniot
6
Example
<html>
<head>
<title>Example page with embedded style</title>
<style type="text/css">
body
{ font-family : sans-serif;
color : blue;
background-color : yellow }
h1
{ font-style : italic }
p
{ font-size : 14pt }
ol
{ font-size : 12pt;
color : red;
font-family : serif }
</style>
</head>
Here the selectors are simply tag names. The
...
style rules will apply to elements defined by
</html>
those tags. Result (Example 1)
© 2010, Robert K. Moniot
7
On-Line References
There are many, many style properties. These slides only
show a few. Your text shows more. For a complete list,
plus examples, consult one of these references:
• w3.org – the World-Wide Web Consortium: the official
standard
• w3schools.com – a commercial site, but free access,
includes tutorials
© 2010, Robert K. Moniot
8
Length Units
• Relative lengths (depend on screen resolution and/or
local text size)
–
–
–
–
px = pixels
em = (originally) width of letter M
ex = (originally) height of letter x, roughly ½ an em
% = percentage of the default font size or window size
• Absolute lengths (rendered as closely as possible)
–
–
–
–
–
in = inches
cm = centimeters
mm = millimeters
pt = points = 1/72 in
pc = picas = 12 pt = 1/6 in
© 2010, Robert K. Moniot
9
Inheritance
• A descendant is an element that is enclosed (nested) in
another, its ancestor. (If it is an immediate descendant,
it is a child of the enclosing element, its parent.
Elements having the same parent are siblings.)
• All descendants of an element inherit its style properties,
unless these are overridden by their own style rules.
© 2010, Robert K. Moniot
10
Precedence Rules
• User-defined styles (preferences) take precedence over
browser defaults.
• Styles defined by web page author take precedence over
user preferences.
• Styles defined by child element take precedence over
styles inherited from parent.
• If two styles could apply to the same element, the one
defined by the more specific rule will be used. For
instance, an explicit rule is always more specific than an
inherited rule.
© 2010, Robert K. Moniot
11
Compound Selectors
• Selectors can be defined so that a style rule applies to
an element only when it is a descendant of a certain
other type of element. Examples:
ul ul { list-style-type : square }
This specifies that an unordered list inside another unordered
list will be bulleted by squares.
h1 em em { color : red }
This specifies that emphasized text inside emphasized text in
an <h1> header will appear in red.
© 2010, Robert K. Moniot
12
Compound Selectors
Compound selectors are more specific than simple
selectors. For instance, if a style sheet defines both
p
{ color : red }
div p { color : blue }
then for a <p> tag that is inside a <div> element, the
second rule would apply.
© 2010, Robert K. Moniot
13
Style Classes
• These allow you to control which elements of a given
type should use a style rule. This method has two parts:
– In the style sheet, the selector defines the class name, which is
preceded by a period.
– In the HTML, the tag includes the class attribute and specifies
the value of the class name
Example:
Define the nodec class for anchor tags:
a.nodec
{ text-decoration : none }
This suppresses the usual underlining. Use it in HTML like so:
<a class="nodec" href="somepage.html">Link text</a>
© 2010, Robert K. Moniot
14
Style Classes
• Style classes can also be “generic,” i.e. not tied to a
specific element type. Example:
Define the zowie class:
.zowie
{ text-decoration : blink }
Use it on an emphasized element:
<em class="zowie">Important!</em>
Use it with no other style attributes:
Example 2
<span class="zowie">Buy Now!</span>
By the way: promise me you won’t ever use blink!
© 2010, Robert K. Moniot
15
The <span> and <div> Tags
• These tags are provided to allow arbitrary chunks of
HTML to be treated as elements. This is usually done in
order to apply style attributes to them, as in the
preceding example.
• A <span> ... </span> element defines an “inline”
structure, i.e. it simply defines a stretch of text. Thus it
can be used within a paragraph or table element without
affecting the flow of the text.
• A <div> ... </div> element defines a “block” structure.
Usually the browser will place line breaks before and
after this element, but otherwise it has no effect itself.
© 2010, Robert K. Moniot
16
Pseudo-classes
• These are like style classes, but an element acquires a
pseudo-class by user action or by a relationship other
than descendancy.
• In the style sheet, a pseudo-class name is preceded by a
colon.
• In the HTML, the pseudo-class name is NOT used with
the affected tag, because it is implied.
© 2010, Robert K. Moniot
17
Pseudo-classes
• Link-related pseudo-classes
a:link
{ color : red }
Applies when the link has not yet been visited.
a:visited { color : green }
Applies when the link has been visited.
a:hover
{ color: yellow }
Applies when the mouse is over the link.
© 2010, Robert K. Moniot
18
Cascading Rule
• If two equally specific rules can apply to the same
element, the one that comes last in the style sheet is
used. Thus, in the example below, a:hover must follow
a:link and a:visited in order to have effect, since a
link can be both visited (or not) and hovering. The order
of the first two doesn’t matter since they are mutually
exclusive.
a:link
{ color : red }
a:visited { color : green }
a:hover
{ color : yellow }
© 2010, Robert K. Moniot
Result (Example 3)
19
Pseudo-elements
Closely related to pseudo-classes, in that they are
defined by relationships, not by explicit declarations.
A pseudo-element refers to a virtual element that is
part of an actual element, rather than a special case of
a whole element.
• :first-line is a pseudo-element that consists of the
first line of text in a block-level element.
• :first-letter is a pseudo-element that consists of
the first letter of the text in an element.
© 2010, Robert K. Moniot
20
Pseudo-elements
p
p.initial
p.initial:first-line
p.initial:first-letter
{
{
{
{
text-indent: 1em }
text-indent: 0 }
text-transform: uppercase }
font-size: 24pt }
This indents all normal paragraphs. A paragraph that is declared
with class="initial" is not indented, and its first line appears
in all capital letters, with an extra-large first letter.
Result (Example 4)
© 2010, Robert K. Moniot
21
Inline Styles
• Defined for individual elements, at the point of use (in the
HTML).
• Useful for “one-off” styles that are not likely to be used
elsewhere.
• Method:
<tag style="attribute:value; attribute:value ...">
HTML text</tag>
The attribute:value pairs are what would go between { } if this
were a style-sheet rule. There is no selector since the style applies
to this element only.
Example 4
© 2010, Robert K. Moniot
22
External Style Sheets
• A style sheet can be placed in a separate file (usually
named with suffix .css) and referenced by HTML files
that need it.
• Useful for centralizing control of style and ensuring
uniform appearance across many pages of a web site.
• The contents of the file are what would go between
<style> ... </style> of an embedded style sheet.
Note: this file is not HTML!
• The file is referenced using a <link> tag in the HTML
document's head portion.
© 2010, Robert K. Moniot
23
Example of style sheet
Here is what an external style sheet (named
style.css) could contain:
/* This style sheet defines an "excerpt" class
for paragraphs that is much like blockquote. */
p.excerpt { font-style : italic;
margin-right : 2em;
margin-left : 2em;
}
Note that there is no HTML in this file! This example also illustrates
a CSS comment between /* and */ . Such comments can be
placed in external or embedded style sheets.
© 2010, Robert K. Moniot
24
Example using style sheet
<html>
<head>
<title>Style Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
... <p class="excerpt">affected text</p> ...
</html>
• The rel attribute specifies the relationship of the referenced file to this
page.
• The type attribute must be "text/css".
• The href attribute is a URL pointing to the external style sheet.
Result (Example 5)
© 2010, Robert K. Moniot
25
Box Model
• All block-level elements are considered to be inside a
box surrounded by padding, a border, and a margin.
Typically the border is black, and margin and padding
provide space around it.
Margin
Border
Padding
Content
© 2010, Robert K. Moniot
26
Borders, Margins, Padding
• Widths can be set all around (e.g. border-width,
margin) or on each side individually (e.g. bordertop-width, margin-top).
• Different border styles can be selected with borderstyle. Default is none, i.e. border is invisible.
© 2010, Robert K. Moniot
27
Floats
• Block-level objects can be floated, so that they are
positioned all the way to left or right on the page.
– Usually used for images, but can also be used for text if width is
made less than full page.
• Position specified by float property, with values left
or right.
• Adjacent floats are rendered next to each other if space
allows.
• Text following a float will flow around it unless the clear
property is applied.
Example 6
© 2010, Robert K. Moniot
28
Controlling display
• Rendering of elements can be controlled using display
property. Values:
– none : element will not be rendered
– inline : element will be rendered in-line with surrounding
content, like a <span>
– block : element will be rendered as a block, i.e. with line break
before and after, like a <div>
• Use to change block elements to inline or vice versa
• Can change dynamically, e.g. using hover pseudoclass
Example 7
© 2010, Robert K. Moniot
29
Invisibility
• There is also a visibility:hidden property that
makes an element invisible, but it still takes up space in
the rendered document.
© 2010, Robert K. Moniot
30
User Style Sheets
• Users can specify their own style sheets, to apply in
absence of overriding styles from document style sheets.
• Internet Explorer 7:
Tools → Internet Options → General → Accessibility
Allows user to specify a style sheet to use.
• Mozilla Firefox: uses a file named userChrome.css in
chrome subdirectory of Firefox application data
directory.
© 2010, Robert K. Moniot
31

Chapter 6 CSS - Fordham University

Transcript Chapter 6 CSS - Fordham University

Directory