Title: Styling Your Web Pages with Cascading Style Sheets Patrick H. Lauke / WWW Editor / External Relations Division
1Styling Your Web Pages with Cascading Style
SheetsPatrick H. Lauke / WWW Editor / External
Relations Division
EDU Session - 13/02/2006
2Introduction and aims for the day
- Who am I?
- WWW Editor, External Relations Division
- Responsible for core University site
- Guidelines and Strategy and enforcing consistency
/ compliance - Support for web authors
- Using CSS for last 5 years
3Aims for the day
- CSS a complex subject
- Easy to start with, difficult to master
- Browser issues and incompatibilities
- Sometimes style rules interact in unexpected ways
- Difficulty shedding old habits
- What this session is not about
- comprehensive guide to HTML/CSS
- how to use Dreamweaver, etc
- Give an overview of
- basic principles of web standards
- Introduction to CSS
- A few advanced examples
- What do you want to get out of it?
4Schedule
- 0945 1000 Coffee/Tea
- 1000 1100 Presentation structural markup
- 1100 1110 Break
- 1110 1130 Exercise structural markup
- 1130 1230 Presentation basics of style sheets
- 1230 1300 Lunch
- 1300 1320 Exercise styling structural markup
- 1320 1400 Presentation more precise styling
- 1400 1405 Break
- 1405 1500 Presentation common techniques
5Web standards?
- University pages designed with web standards.
- Using correct syntax
- Following accepted grammar rules
- Ethos of separating content from presentation
6Using correct syntax / grammar
- Who defines what HTML, CSS and all other
technologies are? - World Wide Web Consortium (W3C) over 350
organisations www.w3.org - Defined protocols for interoperability how do
you write a proper webpage
7Standards? Who cares
- HTML itself only meant to mark up content.
- Dot.com boom, browser wars Microsoft vs.
Netscape raft of new, funky tags (font,
colours, embed,) - Designers got interested in the web as purely
visual medium abuse / perversion of the original
idea, tables for layout, blockquotes for
indentation,
8Problems
- Problems
- Markup got more and more complex (content and
presentation) - Need for WYSIWYG tools
- Incompatibility between browsers (separate
versions, best viewed with) - Pages dont degrade nicely (PDAs, print, etc)
- Mixed markup difficult to maintain and change
9Solution
- Separation of content and presentation
- Markup much cleaner and easier to edit / maintain
- Works fairly consistently across browsers
- Degrades gracefully (print, PDA) and can be
styled differently (e.g. UoS print styles) - Easy to make sweeping changes to look and feel
10What can be achieved with CSS
- http//www.csszengarden.com/
- Perfect example of what can be achieved by
separating content and presentation - HTML always remains the same
- Selecting different CSS changes entire look
- Note most designs use very advanced CSS
techniques, but this gives an idea of whats
achievable.
11Stop worrying about the layout
- Once you have your content, first step is to
mark it up - Not interested in how it looks / displays
- Step back and think what is this?
- Structure the content, dont use structure for
visual effect - The following may seem patronisingly basic, but
its best to reiterate (meaning got obfuscated
over years of bad practice HTML and WYSIWYG abuse)
12HTML bare bones
- At its core, HTML is a way to tell machines /
programmes how content is structured. - Defines a few rules and the basic structure for a
document - lthtmlgt
- ltheadgt
- Information about the document (meta
information) - lt/headgt
- ltbodygt
- Actual content of the document
- lt/bodygt
- lt/htmlgt
13HTML bare bones
- Defines a set of elements and how to use them to
identify certain parts of a document - lth1gtlt/h1gt lth6gtlt/h6gt
- this is a heading
- ltpgtlt/pgt
- this is a paragraph
- ltulgt
- ltligtitem 1lt/ligt
- ltligtitem 2lt/ligt
- lt/ulgt
- this is an unordered list
14HTML bare bones
- ltolgt
- ltligtitem 1lt/ligt
- ltligtitem 2lt/ligt
- lt/olgt
- this is an ordered list
- ltstronggtlt/stronggt and ltemgtlt/emgt
- this is important and needs to be emphasised
(admittedly a fine distinctioneven HTMLs choice
of names isnt perfect) - Etc.
- Notice it doesnt say this is important and
needs to be in bold, red, with a box around it - In addition, HTML has two semantically neutral
elements - ltdivgtlt/divgt and ltspangtlt/spangt used to group
elements / content into logical things (more
later)
15Old-style markup example
- Old-style markup (mixing presentation and
content) - ltpgtltfont size3gtltbgtThis is a
headinglt/bgtlt/fontgtlt/pgt - ltpgtBlah blah blahlt/pgt
- ltpgtltfont size3gtltbgtThis is another
headinglt/bgtlt/fontgtlt/pgt - ltpgtBlah blah blahlt/pgt
- ltpgtltfont size2gtltbgtA sub-sectionlt/bgtlt/fontgtlt/pgt
- ltpgtBlah blah blahlt/pgt
16Structural markup example
- Using proper, semantic markup
- lth1gtThis is a headinglt/h1gt
- ltpgtBlah blah blahlt/pgt
- lth1gtThis is another headinglt/h1gt
- ltpgtBlah blah blahlt/pgt
- lth2gtA sub-sectionlt/h2gt
- ltpgtBlah blah blahlt/pgt
- Machine-readable.
- Convey meaning and structure, not just visual
appearance. - Cfr MS Word and screen readers.
- But the headings look ugly use CSS
- Outline
- This is a heading
- This is another heading
- A sub-section
17HTML bare bones applied
- So, simply need to take your raw, naked content
in pure text and define what everything is. - Why does the browser need to know if something is
a heading or a paragraph? - semantically / structurally correct markup has
many advantages - Its the right thing to do (yeah right)
- Should display properly, regardless of styling /
device capabilities - Accessibility
- Search engines
18Exercise
- Take the old-style piece of markup (mixing up
content and presentation, lacking proper
structure), strip it of its visual aspects, and
mark it up properly.
19Structural markup looks boring
- Pure, unstyled markup looks very 1980s
- Without any style information, browser reverts to
most basic defaults size of headings, typeface,
etc - Remember separation of content and presentation.
Weve done the first part, now lets think about
the look
20Cascading Style Sheets
- In order to tell browsers how we want content
displayed, we use Cascading Style Sheets (CSS) - New language, completely separate from HTML
- More powerful (further control)
- Works by defining rules, and where these rules
are applied in the document
21Anatomy of a style
- h1 color red
- h1 is the selector where do the rules apply?
- color red is the rule what the browser
should do visually. - denotes a group could be one or more rules
applied to a selector.
22Commonly used styles
- font-family Arial, Verdana, Sans (list of font
names) - font-size 150 (can use pixel, , em and
others) - font-style italic (normal, italic, oblique)
- font-weight bold (normal and bold most
supported, but there are others) - line-height 1.2 (new to CSS, typographic
leading no unit, refers to font size) - Many such rules also use a shorthand notation
- font italic bold 150/1.2 Arial, Verdana, Sans
- color ff0000 (can use hexadecimal, rgb values
and keywords) - background-color eeeeee
- Hexadecimal shorthand if the two numbers in each
triplet are the same, we can shorten it to 3
numbers ff3355 -gt f35, ffffff -gt fff - list-style-image url(bullet.gif)
23The box model
- From http//www.hicksdesign.co.uk/boxmodel/
24The box model (cont.)
- p margin-top 2em margin-right 0
margin-bottom 2em margin-left 1em - Or using shorthand
- p margin 2em 0 2em 1em
- Same for padding and border (which has a whole
slew of rules, like border-width-bottom etc)
25How to marry content with style
- 3 different ways to add style to content
- 1) Inline styles in HTML
- ltp stylecolor redgtblahlt/pgt
- No real separation should never need to be used.
- 2) Style definitions in HTMLs HEAD
- ltheadgt
-
- ltstyle typetext/cssgt
- p color red
- lt/stylegt
- lt/headgt
- Still not separated, but slightly better can be
useful for quick one off styles on a single
page.
26How to marry content with style
- 3) External style sheets (with reference in HEAD)
- ltlink relstylesheet href/common/style.css
/gt - Complete separation many pages can refer back to
this single style easy to make sweeping changes
in look / feel styles can be cached (improved
speed, bandwidth saving)
27Different types of selectors
- Many different ways of defining where a set of
rules applies, from the general to the specific - p
- Generic all paragraphs
- div p
- All paragraphs contained within a div
- You can make the same rules apply to more than
one type of element by putting multiple
selectors, separated by a comma - ul, ol
28Exercise
- Using an external style sheet, try to match at
least part of the look of the original document
with simple CSS rules.
29Getting specific
- What if we dont want to apply styles to all
types of an element, but only a single one or a
specific type of them? - p.comment
- All paragraphs with a class of comment
- There can be one or more elements with a class in
the same page. You can also apply a class to
different elements - To style anything with a given class, you can
leave the selector very general - .comment
30Getting specific (cont.)
- pintroduction
- Only the paragraph with the unique ID
introduction - There can be only a single occurrence of an ID in
the same page. - To make the rule apply to anything with that
particular ID, generic rule - introduction
31The cascade
- Cascading refers to the way multiple styles
which apply to the same elements interact - p border 1px blue solid
- p.comment color red
- The paragraph with class comment will be red,
but also have a border. - p color red
- p.comment color blue
- The second rule overrides the first for
paragraphs with class comment - Additional, complex rules of specificity the
more specific the selector, the higher the
precedence its rules take (important when
overriding rules)
32The inheritance
- Inheritance refers to the way certain styles
defined on a parent element are passed on to its
children - body color 000
- Applies to the body, but is also inherited by all
of the bodys children. - Not all styles are inherited (e.g.
margin,padding,border)
33Inheritance gotcha
- Particular care needs to be taken with relative
font sizes and inheritance. - ltulgt
- ltligtitem 1lt/ligt
- ltligtitem 2lt/ligt
- lt/ulgt
- If we have a rule that defines the text size for
the whole body, defining another relative font
size for the list items will compound the size - body font-size 75
- li font-size 75
- The actual font size of the list items is now
- 75 of 75 56.25
34Classitis, divitis, excessive IDs
- The temptation is great to start adding classes
to everything you want to style. - Taking advantage of selectors, cascade and
inheritance you can write far more concise markup
and style rules.
35Classitis
- ltulgt
- ltli classingredientgtsugarlt/ligt
- ltli classingredientgtwaterlt/ligt
- ltli classingredientgtflourlt/ligt
- lt/ulgt
- li.ingredient color f00
36Classitis
- Far more concise
- ltul classingredientsgt
- ltligtsugarlt/ligt
- ltligtwaterlt/ligt
- ltligtflourlt/ligt
- lt/ulgt
- ul.ingredients li color f00
37Inheritance/cascade
- Even more concise
- ltul classingredientsgt
- ltligtsugarlt/ligt
- ltligtwaterlt/ligt
- ltligtflourlt/ligt
- lt/ulgt
- ul.ingredients color f00
- As the color is inherited by the child elements
of ul.
38Good class/ID names
- As were working with content when adding classes
and Ids, we should strive to use semantic
(meaningful) names for those as well. - ltp classredgtThis paragraph is highlighted
because its importantlt/pgt - What if we later redefine that everything
important should be blue instead? - .red color blue
- Instead we use something more meaningful, like
- .important color blue
39Multiple style sheets/definitions
- You can add multiple style sheets/definitions to
the same document -
- ltheadgt
- .
- ltlink relstylesheet hrefstyle1.css /gt
- ltlink relstylesheet hrefstyle2.css /gt
- .
- ltstyle typetext/cssgt
- .
- lt/stylegt
- lt/headgt
- Order here is important, combined with cascade
and inheritance.
40Specificity can override order
- Order of style rules (either in same style sheet
or multiple style sheets) determines if a rule
gets redefined. - p color red
- more rules
- p color blue
- However
41Specificity can override order (cont)
- div p color red
-
- p color blue
- First rule is more specific (rule of thumb more
complex selector has greater specificity)
42Common techniques backgrounds
- Adding background images that tile
- body background-image url(tileimage.gif)
- You can also have backgrounds that tile only in
one direction - body
- background-image url(topgradient.gif)
- background-repeat repeat-x
43Common techniques backgrounds
- and define where the tiling starts
- body
- background-image url(topgradient.gif)
- background-repeat repeat-x
- background-position top left
-
44Common techniques backgrounds
- Now, we can use backgrounds to add purely
decorative images (images that dont serve a
purpose other than eye candy) by using a
non-repeating background (and use shorthand) - p.notice background url(warning.gif) no-repeat
top left - Ensure that we apply enough padding for the image
to show properly. - In old ways, this would have involved adding an
image to the markup and aligning it left. Now the
content is cleaner.
45Entire layout via CSS
- Traditionally, designers used tables to create
layouts. Grids are a familiar tool for designers. - Table markup is meant for tabular data think
Excel spreadsheets. - Layout is presentational, so should be handled
via CSS. - This way, layouts can also be adapted to
different media (e.g. screen, print, etc) - Most difficult part of CSS producing solid,
stable layouts that are bullet proof
46CSS layout floating
- Blocks of content can be floated (see for
instance http//css.maxdesign.com.au/floatutorial/
for good tutorial) - float left or float right
- Padding and margin still taken into account.
47CSS layout floating (cont.)
- Make sure you define a width for the floated
content via the width rule. - If you define a width in , it refers to the
parent elements width. - div width 80
- div p width 50
- The paragraph would get a width of 50 of 80
40
48CSS layout floating
- You can also define width based on size of font,
making it an elastic box - p width 10em
49CSS layout floating
- With floating, source order (where something
appears in the markup) is important and can
affect the appearance of the float. - Nonetheless, you should aim to ensure that the
source order is logical, and try not to change
your content markup to suit your presentational
needs. - Example of a two column layout and possible ways
around it float the right-hand column, float
both.
50CSS layout floating
- To add further content after all the floating,
and make sure its below the floated blocks, we
use a rule to clear any floats - p.notice clear both
51Exercise
- Turn our simple page into a two-column layout
(main content plus notice off to the side)
52CSS layout positioning
- Another method to create layouts is via absolute
positioning of blocks of content. - Most complex part of CSS, so we wont touch on
this here though.
53Cross-browser compatibility
- All these techniques are based on standards,
defined by W3C. - Some browsers (mainly Internet Explorer) dont
understand all rules, have quite serious bugs, or
just different default browser styles. - Methodology to follow
- write clean HTML/CSS
- validate (to ensure no syntax errors are present)
- test in as many browsers as possible
54Cross-browser compatibility (cont.)
- W3C validation service
- HTML http//validator.w3.org/
- CSS http//jigsaw.w3.org/css-validator/
- Similar to spell checkers ensures that the words
are spelt correctlycant ensure that they
actually make sense though. - Minimises weird display due to errors in your
content/style though (e.g. multiple elements with
same ID) which can be handled differently by
different browsers.
55Links and references
- Web
- http//webstandards.org/
- http//webstandardsgroup.org/
- http//www.w3.org/MarkUp/
- http//www.w3.org/TR/CSS21/
- http//www.meyerweb.com/eric/css/
- Books
- Eric Meyer - Eric Meyer on CSS Mastering the
Language of Web Design - Dan Cederholm - Bulletproof Web Design
Improving flexibility and protecting against
worst-case scenarios with XHTML and CSS - Jeffrey Zeldman - Designing with Web Standards
- Dan Cederholm - Web Standards Solutions The
Markup and Style Handbook - Dave Shea, Molly E. Holzschlag - The Zen of CSS
Design Visual Enlightenment for the Web
56(No Transcript)