CSC 2720 Building Web Applications Cascading Style Sheets (CSS)
Download
Report
Transcript CSC 2720 Building Web Applications Cascading Style Sheets (CSS)
CSC 2720
Building Web Applications
Cascading Style Sheets (CSS)
Benefits of Cascading Style Sheets
Separate document presentation from document content
More features for formatting the appearance
Can define font, size, background color, background image,
margins, etc.
Share style sheets across multiple documents or entire
Web site
Reduce development and maintenance time
Can specify a class definition for a style, effectively
defining new HTML elements
Flexible – rules are applied in a hierarchical manner
(precedence rules)
How do Style Sheets work?
Browser may ignore some or all of the rules specified in the
style sheets.
Cascading Style Sheets
A simple text file with “.css suffix”
CSS, Level 1 (1996)
Concerned with applying simple styles to HTML elements
CSS, Level 2 (1998)
Incorporates and extends CSS-1
Supports media-specific style sheets (visual browsers, aural devices,
printers, etc)
CSS, Level 3 (Under development)
Incorporates and extends CSS-2
Focused on modularization of the CSS specification
New selectors, fancy borders and backgrounds, vertical text, user interaction,
speech and much more.
Note:
A browser may not support all features in CSS level 1 and 2
See http://www.westciv.com/style_master/academy/browser_support/ for info about
browser's support for CSS.
What kinds of style does CSS support?
CSS 1
Font properties such as typeface and emphasis
Color of text, backgrounds, and other elements
Text attributes such as spacing between words, lines
Alignment of text, images, tables, etc.
Margin, border, padding, and positioning of most
elements
Dimension
CSS 2
Relative and fixed positioning of most elements
Bidirectional texts
New font properties
Select an element in the HTML file
What are statements, selectors, declarations and
properties?
How to specify them?
CSS Syntax
A single statement
selector
Property names and values
(3 properties here)
body
{
declaration
font-family: Verdana, Helvetica, sans-serif;
font-size: 1em;
text-align: justify;
}
/* CSS Comments */
CSS Syntax
Statement must have one or more selectors and a
declaration.
Selector specifies which HTML elements to be affected.
Declaration is one or more properties separated by
semicolons “;”.
Property has name and value separated by a colon “:”.
Some values have unit
White space is ignored but can improve readability
Three Ways of Using CSS
External Style Sheet
Store CSS code in an external file (usually with .css
extension)
Apply to any document that explicitly includes the .css
file
Internal or Embedded Style Sheet
Defined in HTML document
Affect only the page where the style is defined
Inline Styles
Specified as an attribute in HTML tag
Apply to only one element
Specifying External Style Sheet
Use <link> tag in <head> section to associate an external
style sheet to the HTML file.
<head>
…
<link rel="stylesheet" type="text/css"
href="style1.css" >
…
</head>
style1.css
h1 { text-align: center; font-family: Arial; }
h2 { color: #440000;
text-align: center;
font-family: Arial Black, Arial, Helvetica;
}
Specifying Internal Style Sheet
Use <style> tag in <head> section
Add <!-- and --> between statements to hide the
statements from being displayed by browsers that do not
understand <style> elements.
<head>
…
<style type="text/css">
<!-hr { color: sienna; }
p { margin-left: 20px; }
body { background-image: url("images/back40.gif"); }
-->
</style>
…
</head>
Specifying Inline Styles
Use attribute style in HTML tag to specify properties
applied to that element
<p style="color: sienna; margin-left: 20px;">
This is a paragraph
</p>
CSS-1 & CSS-2 Selectors
HTML element selectors
Selector groups
Class selectors
ID selectors
Contextual selectors
Link pseudo class selectors
Pseudo element selectors
Dynamic pseudo class selectors
Child selectors
More advanced selectors …
HTML element selectors
The selector is a name of an HTML element.
hr { color: sienna; }
p { font-weight: bold; }
Selectors can be grouped together as comma-separated
list
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
is equivalent to:
H1, H2, H3 { font-family: sans-serif }
Universal Selector
"*", the universal selector, matches the name of any
element type.
/* All elements use this font */
* { font-family: sans-serif }
Class Selectors
Class selector allows you define different styles for the
same type of HTML element.
e.g.: Define two classes of paragraph, one center justified and one
right justified.
HTML elements + class "New elements"
/* Define two classes for element 'p' */
p.right {text-align: right;}
p.center {text-align: center;}
/* Define a global class usable by all elements */
.warning { font-color: red; }
<p class="right">This paragraph is right-aligned.</p>
<p class="center">This paragraph is center-aligned.</p>
<b class="warning">Don't you dare to fall asleep!</b>
ID Selectors
ID selector allows you define styles for a specific element
(not a specific kind of elements.)
p#special { font-weight: bold; }
/* Specific style for element with id="layer1" */
#layer1 { position:absolute;
left:140; top:140; z-Index:1 }
<p id="special">I love Java!<p>
<p>This is some paragraph</p>
<div id="layer1"><img src="dummy.gif" /></div>
Contextual Selectors
Decendent selector:
Selectors separated by space characters
Select elements that are contained in some element
e.g.:
div strong {text-decoration: underline}
Select: <div><strong> selected</strong></div>
Select: <div><p>…<strong> selected </strong>…</p></div>
i.e., all the <strong> elements inside a div element.
Child selector:
Selectors separated by ">" character
Select only the immediate children
e.g.:
div > strong {text-decoration: underline}
Select: <div><strong> selected </strong></div>
Does not select: <div><p><strong> not selected </strong></p></div>
Pseudo-Classes and Pseudo-Elements
Pseudo-class selector
Based on a set of predefined qualities that an HTML
element can possess.
No actual class attributes exist in the markup.
:active, :link, :visited, :hover, :focus,
:first-child
Pseudo-element selector
Identify a virtual element that doesn’t exist in the
markup.
:before, :after, :first-letter, :first-line
e.g.:
p:first-child:first-line {
font-size: larger;
}
Link Pseudo-Classes
Property
Values
a:link
Define the style for unvisited links
a:visited
Define the style for visited links
a:active
Define the style for active link (when you click on it)
a:hover
Define the style for hovered link (when mouse move over it)
Hover
<style type="text/css">
.class1 A:link {text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: underline; color: red;}
Background colored link
.class2 A:link {background: #FFCC00; text-decoration: none}
.class2 A:visited {background: #FFCC00; text-decoration: none}
.class2 A:active {background: #FFCC00; text-decoration: none}
.class2 A:hover {background: #FFCC00; font-weight:bold; color: red;}
</style>
Dynamic Pseudo Classes
Apply to any element (not just links) in the
Active state
While the mouse is being pressed on the selected element
Hover state
While the mouse is over the selected element
Focus state
While the selected element has the keyboard focus
e.g.: change the background color of a paragraph to green while
the mouse is over it.
p:hover { background: green; }
Note:
IE does not yet support pseudo class on elements other than links.
Pseudo class must be specified for elements (cannot be a generic
class or generic id)
p:hover and div.someClass:active are ok, but .someClass:hover is not ok
Other Selectors
Adjacent sibling selectors
e.g.: h1 + h2 { margin-top: -5mm } selects H2 if
(a) h1 and h2 have the same parent
(b) h2 immediately follows h1
Attribute selectors
Select elements with specific attributes
e.g.: h1[title] { color: blue; } selects h1 that has an
attribute named "title" (regardless of its value).
e.g: span[type=example] { color: blue; } selects
span element with attribute type="example"
See CSS-2 specification for detailed info
http://www.w3.org/TR/REC-CSS2/selector.html
Additional Syntax Rules
Keywords must not be placed within quotes
Examples:
width: "auto";
width: auto;
border: "none";
border: none;
background: "red";
background: red
Incorrect
Correct
Incorrect
Correct
Incorrect
Correct
All CSS style sheets are case-insensitive
Exceptions: font name, HTML attribute values such as
values of class and id.
Inheritance
An element inherits its parent's properties if the properties
are not specified for the element.
e.g.:
<h1 style="color:blue">The headline <em>is</em>
important!</h1>
The emphasized text "is" is displayed in blue color.
Computed values, not actual values, are inherited.
<body style="font-size: 10pt">
<h1 style="font-size: 120%">
A <em>large</em> heading</h1></body>
The font size for h1 is 12pt (relative to the font size of its
parent). The font size for em is also 12pt (not 14.4pt)
The Cascade (Precedence Rules)
1. Author rules > User rules > User agents
2. Rules marked “important” have the highest
priority, and they overrides the normal order of
cascade.
User's "important" rules have higher priority than the
same author's "important" rules.
Syntax:
h1 { font-size: 16pt !important;
font-family: sans-serif; }
3. More specific rules have precedence over less specific rules
A selector's specificity is calculated as follows:
count the number of ID attributes in the selector (= a)
count the number of other attributes and pseudo-classes in the selector (= b)
count the number of element names in the selector (= c)
ignore pseudo-elements.
e.g.:
*
/* a=0 b=0 c=0 -> specificity =
0 */
LI
/* a=0 b=0 c=1 -> specificity =
1 */
UL LI
/* a=0 b=0 c=2 -> specificity =
2 */
UL OL+LI
/* a=0 b=0 c=3 -> specificity =
3 */
H1 + *[REL=up]
/* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red
/* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level
/* a=0 b=2 c=1 -> specificity = 21 */
#x34y
/* a=1 b=0 c=0 -> specificity = 100 */
4. In case of tie, the last rule has priority.
Property Categories
Text style – Fonts properties, …
Text layout – Text alignments, …
Foreground & Background
Border
Margin
Padding
Page layout
Element type
User interface
Text Style Properties
What properties does text have?
Color
Font-specific
font-weight
font-family
font-size
font-style
font-size-adjust
font-stretch
Text-specific
text-decoration
text-transform
text-shadow
Useful Font Properties
font-weight
Relative weight (boldness) of font
normal | lighter | bold | bolder | 100 | 200 | ... | 900 | inherit
H1 { font-weight : 200 }
H2 { font-weight : bolder }
font-style
Font face type within a family
normal | italic | oblique
P { font-style : normal }
TH { font-style : italic }
Useful Font Properties, cont.
font-size
Either relative or absolute size of font
Absolute length value: pt, pc, in, cm, mm
Relative length values: em, ex, px, %
Absolute size: xx-large | x-large | large | medium | small | x-small |
xx-small
Relative size: smaller | larger
STRONG { font-size: 150% }
P { font-size: 14pt }
P { font-size: xx-large }
Useful Font Properties, cont.
font-family
Typeface family for the font
H1 { font-family: Arial } /* Arial is a font name */
H2 { font-family: serif }
/* serif is a keyword, which suggests the user agents to
use a font that belong to the "serif" font family */
Generic font families:
serif:
sans-serif:
cursive:
fantasy:
monospace:
Times New Roman
Arial
Comic Sans MS
Decorative fonts
Courier New
(Font with fixed width)
Text layout properties
How text is layout on a page?
Letter-spacing
Word-spacing
Line-height
Vertical-align
Text-indent
Text-align
Direction
Useful Text Properties
text-decoration
Describes text additions or “decorations” that are added to the text of
an element
none | underline | overline | line-through | blink
P { text-decoration: underline; }
vertical-align
Determines how elements are positioned vertically
top | bottom | baseline | middle | sub | super | text-top | text-bottom | %
text-align
Determines how paragraphs are positioned horizontally
left | right | center | justify
Useful Text Properties, cont.
text-indent
Specifies the indentation of the first line of the paragraph
+/– pt, pc, in, cm, mm | +/– em, ex, px, %
P { text-indent: -25px } /* Hanging indent */
line-height
Specifies the distance between two consecutive baselines in a
paragraph
normal | number | pt, pc, in, cm, mm | em, ex, px, %
.double { line-height: 200% }
.triple { line-height: 3 } /* 3x the font size */
DIV { line-height: 1.5em }
Background Properties
How can we set the background of an
element?
Background-color
Background-image
Background-attachment
Background-repeat
Background-position
background
Useful Color and Background Properties
color
Color of the text (foreground color)
color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) | rgb(rrr%,
ggg%, bbb%)
P { color : blue; }
H1 { color : #00AABB; }
H3 { color : rgb(255, 0, 0 ); }
/* red */
background-color
Background color
transparent | all possible values of property "color"
background-image
none | url(filename)
Specifies an image to use as the background of region
H2 { background-image: url(Bluedrop.gif); }
Useful Color and Background Properties
background-repeat
Specifies how to tile the image in the region
repeat | repeat-x | repeat-y | norepeat
BODY {
background-image: url(Bluedot.gif);
background-repeat: repeat-x;
}
background
Lets you combine properties in a single entry
P { background: url(wallpaper.jpg) repeat-x; }
Useful Color and Background Properties
background-attachment
Specifies whether background image is fixed or scrolled with
document
scroll | fixed
e.g: Creates an infinite vertical band that remains "glued" to the
viewport when the element is scrolled.
BODY {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
note: "fixed" fixes image w.r.t. to the viewport (the browser
displaying area) and not w.r.t. to the containing black.
Useful Color and Background Properties
background-position
Specifies initial position of the background image
Specified using two values
%%
<length> <length>
/* fixed absolute distance */
[top | center | bottom] [left | center | right]
BODY
BODY
BODY
BODY
{
{
{
{
background:
background:
background:
background:
url("banner.jpeg")
url("banner.jpeg")
url("banner.jpeg")
url("banner.jpeg")
right top }
top center }
center }
bottom }
BODY { background: url(banner.jpeg") 100px 100px }
/* 100%
0%
/* 50%
0%
/* 50% 50%
/* 50% 100%
*/
*/
*/
*/
Length Units
Unit name
Abbreviation
Meaning
Relative?
Em
em
The height of a font
Yes
Ex
ex
The height of the letter x in a font
Yes
Pica
pc
1 pica is 12 points
No
Point
pt
1/72 of an inch
No
Pixel
px
One dot on a screen
No
Millimeter
mm
Printing unit
No
Centimeter
cm
Printing unit
No
Inch
in
Printing unit
No
Box Model
Every displayable element is contained in a box that has a
content area (text, image, etc.), an optional padding, border
and margin areas.
margin
border
padding
This is the Content
padding
border
margin
Content, Padding, Border and Margin
Content area is the smallest rectangle containing the
rendered data that make up the element.
Padding is the space between the content and the
element's borders.
Padding takes the background of the element
Border can have styles
Margin is the space between the element's borders and the
"containing box" (which belongs to the element's parent or
ancestor in the document tree)
Margin is always transparent
Padding and Margin
Padding and margin can be further divided into four subareas -- top, right, bottom, left
Padding areas take the background of the element.
Margin areas are always transparent (takes the containing box
background).
Does not apply to table elements (table, td, tr, th)
P { padding-top: 2em; margin-right: 10em; }
Short hand for setting margin (same for padding)
body { margin: 2em }
body { margin: 1em 2em }
/* all margins set to 2em */
/* top & bottom = 1em,
right & left = 2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em,
bottom=3em, left=2em */
Border Properties
Border has the following properties
width
<length> | thin | medium | thick
color
<color value> | transparent
Default value is the "color" property value of the element
style
none | hidden | dotted | dashed | solid | double | groove |
ridge | inset | outset
When style is "none", the border width is zero
P {
border-width: 2em;
border-color: red;
border-style: solid;
}
Border Properties
Border can also divided into top, left, bottom and
right edges.
P {
border-top-width: 2em;
border-right-width: 4em;
border-bottom-width: 2em;
border-left-width: 4em;
border-top-style: solid;
border-right-style: double;
border-bottom-style: solid;
border-left-style: solid;
}
/* Same as the following shorthand writing */
P {
border-width: 2em 4em;
border-style: solid double solid solid;
}
Border Properties
/* Another form of shorthand writing of the previous example
The specified values for each property must be in the
following order: <width> <style> <color>
*/
P {
border-top: 2em solid;
border-right: 4em double;
border-bottom: 2em solid;
border-left: 4em solid;
}
/* Other examples: Applies to all four edges */
DIV { border: thin solid blue; }
SPAN { border: 0.2in dotted red; }
Images and Floating Elements
width, height
Specify a fixed size for an element (usually an image)
auto | <length>
img.bullet { width: 50px; height: 50px; }
float
This property lets elements float into the left or right margins
with text wrapping around
none | left | right
clear
Controlling flow next to float
none | left | right | both
SPAN and DIV
<SPAN>
An inline-level element in HTML, meaning that no line
breaks are inserted before or after the use of it.
Other inline-level element: <b>, <img>, <em>, …
<DIV>
A block-level element in HTML, meaning that line
breaks are automatically inserted to distance the
block from the surrounding content.
Other block-level elements: <p>, <table>, <ol>, <h1>,
…
The whole block can be easily positioned on the
page.
CSS Positioning Schemes
Static
Follows normal flow
Relative
Places an element with respect to where it would be statically
positioned (i.e. relative to the position assigned by the browser).
Absolute positioning
An element will be located with respect to its parent element
(containing box)
Fixed positioning
The page scroll, the elements also scroll (remain fixed in the page).
Not supported in IE
Useful Positioning Properties
top, left, bottom, right
Specifies the top/left/bottom/right sides of the layer relative to the
parent window
<length> | % | auto
position
Describes how the position is defined to the parent window
absolute | relative | static | fixed
visibility
Determines whether a layer is visible or hidden
visible | hidden
Useful Layering Properties
z-index
Specifies which elements should appear above/below other
elements
<integer> | auto
The higher the numbers, the higher the level
Using Customized Fonts
Introduce the system font concept
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt.eot");
}
Known supported font file type:
Portable Font Resources (.pfr): TrueDoc for Nav 4.0+ and IE 4.0+
on Windows, Mac, and Unix platforms
Download the software from
Embeddable Open Type (.eot): Compatible only with Explorer 4.0+
on the Windows platform
Download the software from
http://www.microsoft.com/typography/web/embedding/weft3/default.
htm
Other CSS properties
Changing Mouse Cursor
Setting clipping area
List
Bullets type (can use image)
Numbering type
Useful Resources
CSS validation service
http://jigsaw.w3.org/css-validator/
English translation of CSS selectors
http://gallery.theopalgroup.com/selectoracle/
References
W3 Schools – CSS Tutorials
http://www.w3schools.com/css/default.asp
CSS Level 2 Specification
http://www.w3.org/TR/REC-CSS2/