Title: CSS comes after HTML
1CSS comes after HTML
2Agenda
- Web pages created with CSS
- CSS 101
- CSS Concepts
- CSS Shortcuts
- CSS based page design
- Tools
- Demo
3CSS Example 1
4CSS Example 2
5CSS Example 3
6CSS Example 4
7CSS Example 6
8CSS Example 7
9CSS Example 7
10CSS Example 8
11CSS Example 9
12CSS Samples
- Q What is different about all of the samples?
- A Each presentation (look feel) is completely
different - Q What is the same in all the samples?
- A The content.
- That is, the (X)HTML is identical.
13Example 10
14HTML for all Examples
15What is CSS?
- CSS stands for Cascading Style Sheets
- Styles define how to display HTML elements
- Styles are normally stored in Style Sheets
- Styles were added to HTML 4.0 to solve a problem
- External Style Sheets can save you a lot of work
- External Style Sheets are stored in CSS files
- Multiple style definitions will cascade into one
16Why CSS?
- Separates content from presentation
- Semantic HTML for authoring web pages
Semantic HTML
Non-Semantic HTML
- ltdiv class"title"gt
- This is my headline
- lt/divgt
- ltbr /gt
- ltbr /gt
- ltdiv class"sub-header"gt
- this is a sub header
- lt/divgt
- ltbr /gt
- ltdiv class"content"gt
- this is a paragraph of content, it contains some
ltbgtboldlt/bgt text and some ltspan
class"blue"gtcoloredlt/spangt text. - this is a second paragraph
- lt/divgt
- lth1gtThis is my headlinelt/h1gt
- lth2gtthis is a sub headerlt/h2gt
- ltpgt
- this is a paragraph of content, it contains some
ltstronggtbold lt/stronggt text and some ltspan
class"highlight"gt coloredlt/spangt text. - lt/pgt
- ltpgt this is a second paragraph lt/pgt
17CSS Concepts
- Before you can understand CSS, you need to first
understand a few key concepts - Variations
- Media Types
- Importance
- Inheritance
- Origin
- Rules
- Ruleset
- Properties
- Selectors
- Specificity
18Variations
- CSS 1
- The first CSS specification to become an official
W3C Recommendation is CSS level 1, published in
December 1996. Among its capabilities are support
for - Font properties such as typeface and emphasis
- Color of text, backgrounds, and other elements
- Text attributes such as spacing between words,
letters, and lines of text - Alignment of text, images, tables and other
elements - Margin, border, padding, and positioning for most
elements - Unique identification and generic classification
of groups of attributes - CSS 2
- CSS level 2 was developed by the W3C and
published as a Recommendation in May 1998. A
superset of CSS1, CSS2 includes a number of new
capabilities like absolute, relative, and fixed
positioning of elements, the concept of media
types, support for aural style sheets and
bidirectional text, and new font properties such
as shadows. - CSS 2.1
- CSS level 2 revision 1 or CSS 2.1 fixes errors in
CSS2, removes poorly-supported features and adds
already-implemented browser extensions to the
specification. While it was a Candidate
Recommendation for several months, on June 15,
2005 it was reverted to a working draft for
further review. It was returned to Candidate
Recommendation status on 19 July 2007. - CSS 3
- CSS level 3 is currently under development. The
W3C maintains a CSS3 progress report. CSS3 is
modularized and will consist of several separate
Recommendations. The W3C CSS3 Roadmap provides a
summary and introduction.
19Browser Support for CSS
20Media Types
- All Used for all media type devices
- Aural Used for speech and sound synthesizers
- Braille Used for braille tactile feedback devices
- Embossed Used for paged braille Printers
- Handheld Used for small or handheld devices
- Print Used for printers
- Projection Used for projected presentations, like
slides - Screen Used for computer screens
- TTY Used for media using a fixed-pitch
character grid, like teletypes and terminals - TV Used for television-type devices
21Importance
- There a two levels of importance
- Normal
- Important (made using !important declaration)
- Both Authors and Readers can make !important
declarations - In CSS1, author !important declarations overruled
reader declarations - In CSS2, reader !important declarations overrule
author declarations
22Inheritance
- Virtually all selectors which are nested within
other selectors will inherit the property values
assigned to the outer selector unless otherwise
modified. For example, a color defined for the
BODY will also be applied to text in a paragraph. - There are some cases where the inner selector
does not inherit the surrounding selector's
values, but these should stand out logically. For
example, the margin-top property is not
inherited intuitively, a paragraph would not
have the same top margin as the document body.
23Importance
- Generally speaking styles will "cascade" into a
new "virtual" style sheet by using the following
order, where the last item carries the highest
importance
24Origin
- Origin is where styles originate
- User Agent Style Sheets
- Browser Defaults
- C\Program Files\Mozilla Firefox\res\html.css
- User Style Sheets
- Ignore cheap-effect tags
- blink text-decoration none !important
- marquee -moz-binding none !important
- Visually impaired
- html font-size 24pt !important
- Author Style Sheets
- External style sheet
- Internal style sheet (inside the ltheadgt tag)
- Inline style (inside an HTML element)
25Rules
- A style sheet consists of a list of rules. Each
rule or rule-set consists of one or more
selectors and a declaration block. A
declaration-block consists of a list of
semicolon-separated declarations in braces. Each
declaration itself consists of a property, a
colon (), a value, then a semi-colon ().
26Properties
Text and Fonts font font-family font-size
font-weight font-style font-variant
line-height letter-spacing word-spacing
text-align text-decoration text-indent
text-transform vertical-align white-space
Colours and Backgrounds color
background-color background background-image
background-repeat background-position
background-attachment
The Box Model - padding, margin, outline and
borders padding, padding-top, padding-right,
padding-bottom, padding-left border,
border-top, border-right, border-bottom,
border-left border-style, border-top-style,
border-right-style, border-bottom-style,
border-left-style border-color,
border-top-color, border-right-color,
border-bottom-color, border-left-color
border-width, border-top-width,
border-right-width, border-bottom-width,
border-left-width outline outline-style
outline-color outline-width margin,
margin-top, margin-right, margin-bottom,
margin-left
Positioning and Display position top right
bottom left clip overflow z-index float
clear display Visibility Lists list-style
list-style-type list-style-image
list-style-position The Box Model
dimensions width height min-width max-width
min-height max-height
Tables table-layout border-collapse
border-spacing empty-cells caption-side
Generated Content content counter-increment
counter-reset quotes Paged Media page-break-be
fore page-break-after page-break-inside
orphans Widows Misc. cursor direction
unicode-bidi
27Selectors
- Selectors are used to declare which elements a
style applies to, a kind of match expression.
Selectors may apply to all elements of a specific
type, or only those elements which match a
certain attribute elements may be matched
depending on how they are placed relative to each
other in the markup code, or on how they are
nested within the document object model (DOM).
28Selectors
- Element Selectors element
- Class Selectors .classname
- ID Selectors idname
- Descendant Selectors ul li
- Child Selectors ul gt li
- Adjacent Sibling h1 p
- Attribute Selectors imgsrc"vacation"
- Daisy Chaining id element.class
- Group Selectors h1,h2,h3
- Universal Selectors
- Psuedo-Classes ahover
- Psuedo-Elements pfirst-letter
29HTML relates to CSS
- Element Selectors
- ltpgt styled by
- p color red
- Class Selectors
- ltp classcode"gt styled by
- p.code color cyan font-family courier
- or .code color F0F font-family courier
- ID Selectors
- ltp id"sig"gt styled by
- psig color cyan
- or sig color F0F
30ID vs Class
- A unique ID can only be used only once on a
HTML page - IDs are usually associated with layout regions
or areas - A class can be used any number of times
31Selector Specificity
- A selector's specificity is calculated as
follows - count 1 if the declaration is from a 'style'
attribute rather than a rule with a selector, 0
otherwise ( a) - (In HTML, values of an element's "style"
attribute are style sheet rules. These rules have
no selectors, so a1, b0, c0, and d0.) - count the number of ID attributes in the selector
( b) - count the number of other attributes and
pseudo-classes in the selector ( c) - count the number of element names and
pseudo-elements in the selector ( d) - The specificity is based only on the form of the
selector. In particular, a selector of the form
"idp33" is counted as an attribute selector
(a0, b0, c1, d0), even if the id attribute is
defined as an "ID" in the source document's DTD. - Concatenating the four numbers a-b-c-d (in a
number system with a large base) gives the
specificity. - Some examples
- / a0 b0 c0 d0 -gt
specificity 0,0,0,0 / - li / a0 b0 c0 d1 -gt
specificity 0,0,0,1 / - lifirst-line / a0 b0 c0 d2 -gt
specificity 0,0,0,2 / - ul li / a0 b0 c0 d2 -gt
specificity 0,0,0,2 / - ul olli / a0 b0 c0 d3 -gt
specificity 0,0,0,3 / - h1 relup / a0 b0 c1 d1 -gt
specificity 0,0,1,1 / - ul ol li.red / a0 b0 c1 d3 -gt
specificity 0,0,1,3 / - li.red.level / a0 b0 c2 d1 -gt
specificity 0,0,2,1 /
32Practical Specificity
- HTML Elements ltpgt, ltdivgt, lth1gt
- CSS Classes .center, .hilight
- CSS ID content, navbar
- Inline Styles style"text-align center"
33Cascade Order
- Find all declarations that apply to the element
and property for the target media type. - Sort according to importance (normal or
important) and origin (author, user, or user
agent). In ascending order of precedence - user agent declarations
- user normal declarations
- author normal declarations
- author important declarations
- user important declarations
- Sort rules with the same importance and origin by
specificity of selector more specific selectors
will override more general ones. Pseudo-elements
and pseudo-classes are counted as normal elements
and classes, respectively. - Finally, sort by order specified if two
declarations have the same weight, origin and
specificity, the latter specified wins.
Declarations in imported style sheets are
considered to be before any declarations in the
style sheet itself.
34Cascade Conflicts
- Find all declarations that match a particular
element - Sort declarations by weight and origin
- Sort selectors by specificity
- Sort by order specified
35What color is P element text?
- Example
- ltHEADgt
- ltSTYLE type"text/css"gt
- p.std color magenta
- x97z color red
- p color green
- body color yellow background-color 000
- lt/STYLEgt
- lt/HEADgt
- ltBODYgt
- ltP ID"x97z" class"std" style"color
cyan"gtTextlt/Pgt - ltPgtOther Paragraphlt/Pgt
- lt/BODYgt
- body color yellow / a0 b0 c0 d1 -gt
specificity 0,0,0,1 / - p color green / a0 b0 c0 d1 -gt
specificity 0,0,0,1 / - p.std color magenta / a0 b0 c1 d1 -gt
specificity 0,0,1,1 / - x97z color red / a0 b1 c0 d0 -gt
specificity 0,1,0,0 / - style"color cyan" / a1 b0 c0 d0 -gt
specificity 1,0,0,0 /
36Inserting Style Sheets
- External Style Sheet
- Link
- ltlink rel"stylesheet" type"text/css"
href"navbar.css" /gt - Import
- ltstyle type"text/css" media"screen"gt_at_import
url("/css/my.css") lt/stylegt - ltstyle type"text/css"gt_at_import url("import.css")
tv,print lt/stylegt - Internal Style Sheet
- ltstyle type"text/css"gt
- body margin0width100height100
- body,td,input,textarea,selectfont-familyarial,sa
ns-serif - input,textarea,selectfont-size100
- loadingpositionabsolutewidth100height100
background-colorfff - .cmsgmargin1em
- .msgfont-weightbold
- lt/style
- Inline Styles
- ltp style"colorsiennamargin-left20px"gtThis is
a paragraph.lt/pgt
37HTML Webpage
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" - "http//www.w3.org/TR/xhtml1/DTD/xhtml1-trans
itional.dtd"gt - lthtml xmlns"http//www.w3.org/1999/xhtml"gt
- ltheadgt
- lttitlegt CSS comes after HTML lt/titlegt
- ltmeta name"description" contentCSS For
programmers." /gt - ltmeta name"keywords" contentCSS, HTML,
Tutorial" /gt - ltstyle type"text/css" media"screen"gt
- _at_import url("http//some.domain.com/css/base.css"
) - _at_import url("http//some.domain.com/css/Blog.css"
) - lt/stylegt
- ltlink rel"stylesheet" type"text/css"
href"http//some.domain.com/css/print.css"
media"print" /gt - ltstyle type"text/cssgt
- body margin 0 padding 0 background-color
- lt/stylegt
- /headgt
- ltbody id"EyeBrow"gt
- ltdiv id"content" style"text-alignleft"gt
External Style Sheets
Internal Style Sheet
Inline Style
38External CSS Files
menu
HTML1
ltlinkgt _at_import
layout
ltlinkgt _at_import
navbar
_at_import
ltlinkgt _at_import
HTML2
39CSS Sample
- / basic elements /
- html
- margin 0
- padding 0
-
- body
- font 75 georgia, sans-serif
- line-height 1.88889
- color 555753
- background fff url(blossoms.jpg) no-repeat
bottom right - margin 0
- padding 0
-
- h3
- font italic normal 1.4em georgia, sans-serif
- letter-spacing 1px
- margin-bottom 0
- color 7D775C
-
- / specific divs /
- container
- background url(zen-bg.jpg) no-repeat top left
- padding 0 175px 0 110px
- margin 0
- position relative
-
- intro
- min-width 470px
-
- / using an image to replace text in an h1. This
trick courtesy Douglas Bowman, http//www.stopdesi
gn.com/articles/css/replace-text/ / - pageHeader h1
- background transparent url(h1.gif) no-repeat
top left - margin-top 10px
- width 219px
- height 87px
- float left
-
40Shorthands
- full
- border-width 1px
- border-style dotted
- border-color ff0000
-
- or
- shorthand border 1px dotted f00
41CSS Shorthand
- Border -width -style -color
- Margin -top -right -bottom -left
- Padding -top -right -bottom -left
- Font -style -variant -weight -size -height
-family - List-Style -type -position -image
- Background -color -image -repeat
-attachment -position
42Shorthand Declarations
- margin-top 25px
- margin-right 0
- margin-bottom 5px
- margin-left 0
- margin 25px 0 5px 0
- margin 10px
- margin 10px 10px 10px 10px
- margin 10px auto
- margin 10px auto 10px auto
- margin 10px auto 15px
- margin 10px auto 15px auto
25px
0
0
5px
43Colors
- color_name A color name (e.g. red)
- rgb(x,x,x) An RGB value (e.g. rgb(255,0,0))
- rgb(x, x, x) An RGB percentage value (e.g.
rgb(100,0,0)) - rrggbb A HEX number (e.g. ff0000)
- The W3C HTML and CSS standards have listed only
16 valid color names - aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal,
white, and yellow - However, see http//w3schools.com/css/css_colorna
mes.asp for a list of 140 color names supported
by all major browsers.
44Length Units
- Absolute
- in inch
- cm centimeter
- mm millimeter
- pt point (1 pt is the same as 1/72 inch)
- pc pica (1 pc is the same as 12 points)
- Relative
- em 1em is equal to the current M size. 2em
means 2 times the size of the current M . E.g.,
if an element is displayed with a M of 12 pt,
then '2em' is 24 pt. The 'em' is a very useful
unit in CSS, since it can adapt automatically to
the M that the reader uses - ex one ex is the x-height of a x (x-height is
usually about half the M-size) - px pixels (a dot on the computer screen)
- percentage
45HTML Tags
- Deprecated
- ltbasefontgt
- ltcentergt
- ltfontgt
- ltstrikegt
- ltsgt
- ltugt
- Discouraged
- ltbgt
- ltigt
- ltbiggt
- ltsmallgt
- ltttgt
46Comments
- CSS uses C Style comment Syntax
- / Comment here /p margin 1em / Comment
here /padding 2em / color white
/background-color blue/multi-linecommen
t here/ - Comments cannot be nested
47Centering
- ltcentergt is deprecated
- Suggested to use CSS instead
- text-align center only centers text
- Centering HTML elements with CSS is easy, but not
initially obvious - Set margin-left and margin-right to auto
- Define an element width
- div margin 0 auto 0 auto width800px
48Display of HTML elements
- Block
- Takes up the full width available, with a new
line before and after (displayblock) - Inline
- Takes up only as much width as it needs, and does
not force new lines (displayinline) - Not displayed
- Some tags, like ltmeta /gt and ltstylegt are not
visible (displaynone)
49display vs visibility
- selector display none
- selector visibility hidden
- accomplish the same thing The element is
removed from view. - But fundamentally they work completely different.
Displaynone removes the element from the normal
document flow. The effect is surrounding elements
will be adjusted as they reflow in the document. - visibilityhidden hides the element, but it
remains in the document flow. This may leave
what appears to be an unexplainable blank hole
your document.
50Block vs Inline
ltdivgt
lth1gt
ltpgt
lttablegt
ltacronymgtCSSlt/acronymgt stands for Cascading Style
Sheet. A CSS style sheet ltstronggtcanlt/stronggt be
used to create powerful web pages. Click lta
hrefhttp//www.sample.com/url.htmlgt here lt/agt
for a sample of a CSS based web page.
51HTML Elements
- Block
- ltdivgt
- Your general-purpose box
- lth1gt ... lth6gt
- All headings
- ltpgt
- Paragraph
- ltulgt, ltolgt, ltdlgt
- Lists (unordered, ordered and definition)
- ltligt, ltdtgt, ltddgt
- List items, definition list terms, and definition
list definitions - lttablegt
- Tables
- ltblockquotegt
- Like an indented paragraph, meant for quoting
passages of text - ltpregt
- Indicates a block of preformatted code
- ltformgt
- Inline
- ltspangt
- Your all-purpose inline element
- ltagt
- Anchor, used for links (and also to mark specific
targets on a page for direct linking) - ltstronggt
- Used to make your content strong, displayed as
bold in most browsers, replaces the narrower ltbgt
(bold) tag - ltemgt
- Adds emphasis, but less strong than ltstronggt.
Usually displayed as italic text, and replaces
the old ltigt (italic) tag - ltimg /gt
- Image
- ltbrgt
- The line-break is an odd case, as it's an inline
element that forces a new line. However, as the
text carries on on the next line, it's not a
block-level element. - ltinputgt
- Form input fields like and
- ltabbrgt
- Indicates an abbr. (hover to see how it works)
- ltacronymgt
52CSS based layout
layout
header
nav
content
sidebar
footer
53Positioning Schemes
- Normal Flow
- Normal flow is the default scheme used for
positioning. In this scheme, block boxes flow
vertically starting at the top of their
containing block with each placed directly below
the preceding one. - position static
- position relative
- Float
- When specified, the box is positioned vertically
as it would be within the normal flow, its top
aligned with the top of the current line box. But
horizontally, it is shifted as far to the right
or left of its containing block as possible,
within that block's padding (just like other
content). Surrounding inline content is then
allowed to flow around the opposite side. - Absolute
- In absolute positioning, block boxes are removed
from the normal flow and have no effect on boxes
in that flow. Like floated elements, absolutely
positioned elements are always treated as
block-level elements. As such, they establish a
new containing block for any descendants, i.e.,
any elements contained within the absolutely
positioned element. - position absolute
- position fixed
-
-
54Static Positioning
- position static
- positionstatic is the default scheme used in
normal flow positioning. In this scheme, block
boxes flow vertically starting at the top of
their containing block with each placed directly
below the preceding one. Inline boxes flow
horizontally from left to right. - Take note that vertical margins are collapsed in
the normal flow. That is, instead of adding the
bottom margin of a box to the top margin of the
one immediately below it, only the larger of the
two values is used
55Relative Positioning
- position relative
- When an element specifies positionrelative
it is initially positioned following the normal
flow rules. Surrounding boxes are positioned
accordingly. Then, the box is moved according to
its offset properties.
56Float Positioning
- float left
- Floating is achieved by setting the float
property on an element's style to either left or
right. Special rules apply to floated elements. - When specified, the box is positioned vertically
as it would be within the normal flow, its top
aligned with the top of the current line box. But
horizontally, it is shifted as far to the right
or left of its containing block as possible,
within that block's padding (just like other
content). Surrounding inline content is then
allowed to flow around the opposite side.
57Absolute Positioning
- position absolute
- When an element specifies positionabsolute
The position of an absolutely positioned element
is determined by its offset values top, right,
bottom and left. These values work in much the
same way as with relatively positioned elements. - But unlike relative positioning, where the
offsets are measured from the element's position
in the normal flow, an absolutely positioned
element is offset from its container block.
58Fixed Positioning
- position fixed
- Fixed positioning is a special case of absolute
positioning. For fixed elements, the containing
block is always taken to be the viewport of the
browser window. A fixed element does not move
when a web page is scrolled as all other elements
do.
59Clear
- clear left
- The CSS clear property is used to control flow
when using the float property. Using CSS clear,
you can specify whether to keep one or both sides
of an element "clear" (i.e. no elements can
appear on the side that is clear).
60Box Model
61Box Model Hack
- p
- background ff9999
- border 5px solid ff0000
- padding 25px
- width 160px / IE /
- voice-family "\"\" "
- voice-family inherit
- width 100px / FF /
-
- htmlgtbody p
- width 100px
160px
100px
border
content
padding
25px
5px
62Quirks Mode
- To maintain compatibility with the greatest
possible number of web pages, modern web browsers
are generally developed with multiple rendering
modes - standards mode pages are rendered according to
the HTML and CSS specifications - quirks mode attempts are made to emulate the
behavior of an older browser to support the large
body of legacy documents
63DOCTYPE
- (Almost) Standards Mode
- lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http//www.w3.org/TR/html4/loo
se.dtd"gt - Quirks Mode
- lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"gt - Almost Standards Mode maintains the "traditional"
vertical sizing of table cells according to the
CSS2 specification. "Almost standards" mode
rendering matches "standards" mode in all details
except for one. The layout of images inside table
cells is handled the same way "quirks" mode
operates. This means that sliced-images-in-tables
layouts are less likely to fall apart in browsers
when in either "quirks" or "almost standards"
mode, rather than "standards mode
64DHTML
- Some Dynamic HTML effects can be accomplished
with CSS - Rollovers
- Button pushes
65Common Mistakes
- Using an HTML tag because of the way it looks,
not for its meaning - Inserting presentation into your HTML
- Adding an ID or Class to all HTML elements so
that it is a selector for CSS - Using instead of in declaration
- Not preserving case ID Class names are
case-sensitive
66Best Practices
- Make sure youre using a good DOCTYPE
- Order styles in file
- HTML selectors at top
- ID selectors together (especially those used for
layout) - Place class and pseudo-class selectors last
- Add notes
- Use em or , not px
- Add border 1px solid red to elements in your
CSS to help debug layout, positioning or spacing - Always terminate your declarations with a
semicolon () - Do not use the HTML tables for layout
67Tools
- Firefox with Firebug
- 1st Page 2000 in Realtime Preview mode
68Demo
69Firebug Demo
- P element
- Box Model
- Styles
- Look at CSS
- Viewing colors
- Viewing images
- Editing TechRepublic print media
70References
- http//www.htmldog.com
- http//www.csszengarden.com
- http//www.w3schools.com/css/default.asp
- http//www.quirksmode.org
- http//en.wikipedia.org/wiki/Quirks_mode
- http//www.barelyfitz.com/screencast/html-training
/css/positioning - http//www.autisticcuckoo.net/archive.php?id2004/
12/07/relatively-absolute
71Questions?