Styling Your Web Pages with Cascading Style Sheets Patrick H. Lauke / WWW Editor / External Relations Division - PowerPoint PPT Presentation

About This Presentation
Title:

Styling Your Web Pages with Cascading Style Sheets Patrick H. Lauke / WWW Editor / External Relations Division

Description:

... purpose other than eye candy) by using a non-repeating background (and use shorthand) ... Similar to spell checkers: ensures that the words are spelt ... – PowerPoint PPT presentation

Number of Views:154
Avg rating:3.0/5.0
Slides: 57
Provided by: Patrick523
Category:

less

Transcript and Presenter's Notes

Title: Styling Your Web Pages with Cascading Style Sheets Patrick H. Lauke / WWW Editor / External Relations Division


1
Styling Your Web Pages with Cascading Style
SheetsPatrick H. Lauke / WWW Editor / External
Relations Division
EDU Session - 13/02/2006
2
Introduction 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

3
Aims 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?

4
Schedule
  • 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

5
Web standards?
  • University pages designed with web standards.
  • Using correct syntax
  • Following accepted grammar rules
  • Ethos of separating content from presentation

6
Using 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

7
Standards? 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,

8
Problems
  • 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

9
Solution
  • 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

10
What 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.

11
Stop 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)

12
HTML 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

13
HTML 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

14
HTML 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)

15
Old-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

16
Structural 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

17
HTML 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

18
Exercise
  • 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.

19
Structural 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

20
Cascading 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

21
Anatomy 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.

22
Commonly 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)

23
The box model
  • From http//www.hicksdesign.co.uk/boxmodel/

24
The 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)

25
How 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.

26
How 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)

27
Different 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

28
Exercise
  • Using an external style sheet, try to match at
    least part of the look of the original document
    with simple CSS rules.

29
Getting 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

30
Getting 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

31
The 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)

32
The 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)

33
Inheritance 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

34
Classitis, 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.

35
Classitis
  • ltulgt
  • ltli classingredientgtsugarlt/ligt
  • ltli classingredientgtwaterlt/ligt
  • ltli classingredientgtflourlt/ligt
  • lt/ulgt
  • li.ingredient color f00

36
Classitis
  • Far more concise
  • ltul classingredientsgt
  • ltligtsugarlt/ligt
  • ltligtwaterlt/ligt
  • ltligtflourlt/ligt
  • lt/ulgt
  • ul.ingredients li color f00

37
Inheritance/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.

38
Good 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

39
Multiple 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.

40
Specificity 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

41
Specificity 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)

42
Common 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

43
Common techniques backgrounds
  • and define where the tiling starts
  • body
  • background-image url(topgradient.gif)
  • background-repeat repeat-x
  • background-position top left

44
Common 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.

45
Entire 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

46
CSS 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.

47
CSS 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

48
CSS layout floating
  • You can also define width based on size of font,
    making it an elastic box
  • p width 10em

49
CSS 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.

50
CSS 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

51
Exercise
  • Turn our simple page into a two-column layout
    (main content plus notice off to the side)

52
CSS 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.

53
Cross-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

54
Cross-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.

55
Links 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)
Write a Comment
User Comments (0)
About PowerShow.com