An Introduction to Cascading Style Sheets Basic CSS Syntax - PowerPoint PPT Presentation

Loading...

PPT – An Introduction to Cascading Style Sheets Basic CSS Syntax PowerPoint presentation | free to download - id: 7930f6-MjE4N



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

An Introduction to Cascading Style Sheets Basic CSS Syntax

Description:

An Introduction to Cascading Style Sheets Basic CSS Syntax Nick Foxall What is CSS? CSS stands for Cascading Style Sheets Styles define how XHTML elements and markup ... – PowerPoint PPT presentation

Number of Views:100
Avg rating:3.0/5.0
Slides: 28
Provided by: NickF175
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: An Introduction to Cascading Style Sheets Basic CSS Syntax


1
An Introduction to Cascading Style Sheets Basic
CSS Syntax
  • Nick Foxall

2
What is CSS?
  • CSS stands for Cascading Style Sheets
  • Styles define how XHTML elements and markup
    should be displayed by the browser (or user
    agent)
  • Styles can be included in the ltheadgt area of an
    XHTML document, or placed in external Style Sheet
    files.
  • Multiple style definitions are able to cascade
    into one

3
Whats a Cascade?
  • All styles will "cascade" into a new "virtual"
    style sheet in the following rule order, where
    number four has the highest priority
  • 1. Browser default
  • 2. External style sheet
  • 3. Internal style sheet (inside the ltheadgt
    tag)
  • 4. Inline style (inside an HTML element)
  • An inline style (inside an HTML element) with the
    highest priority will override a style declared
    inside the ltheadgt tag, in turn overrides an
    external style sheet, which finally overrides
    browser default values.

4
External Style Sheets
  • Having all styles in an external Style Sheet
    allows for the style formatting of many pages
    from one file, saving a lot of updating work.
  • An external Style Sheet is a text file saved with
    the extension .css At the top of a new CSS
    document, the character set should be specified
  • _at_charset "UTF-8"
  • Not essential, but good practise to ensure the
    CSS file is compliant with web standards. A new,
    blank .css file created in Dreamweaver will
    automatically include this syntax.

5
Rules in CSS
  • A CSS Style Sheet is basically a collection of
    rules, describing how the browser should display
    XHTML elements.
  • Each rule contains 2 parts
  • A Selector, stating which element in the XHTML a
    rule applies to
  • One or more Declarations, which describe how
    these elements should be displayed.

6
CSS Rules Selectors and Declarations
Rule
Selector
  • h1 font-family Times, Georgia, serif
    font-size 24px text-align center

Declarations Enclosed in curly brackets
7
CSS Rules Selectors and Declarations
Rule
Selector
  • h1 font-family Times, Georgia, serif
    font-size 24px text-align center

Declarations
A more readable way of writing CSS rules
8
CSS Rules Declaration Parts
Values
Properties
  • h1 font-family Times, Georgia, serif
    font-size 24px text-align center



Each declaration separated with a semi-colon
Properties and values separated with a colon
Declarations consist of 2 parts a property and a
value. Each declaration ends with a semi-colon (
). Properties and values are separated with a
colon ( ).
9
CSS Rules Declaration Parts
Only values with a space in the name need to be
enclosed in quotes
  • h1 font-family Trebuchet MS, serif
    font-size 24px text-align center

Unlike XHTML, values do not have to be enclosed
in quotation marks, unless the value name
includes a space (e.g multi-word name).
10
Versions of CSS
  • Like XML and XHTML, CSS specifications are laid
    down by the World Wide Web Consortium.
  • The current, most widely used version of the CSS
    specification is version 2.1
  • There are over 100 different properties available
    in CSS 2.1. You can view the current CSS 2.1
    specification at www.w3.org/TR/CSS21/
  • You can also validate the CSS you are working on
    by going to http//jigsaw.w3.org/css-validator/

11
CSS Simple, or Element Selectors
  • The most basic form of CSS selector is an XHTML
    element name
  • h1, h2, p, ol, ul, table, etc.
  • This is the simple or element selector. Example
  • p color 003366
  • This will set every occurrence of content marked
    up the ltpgt paragraph tag to be a dark blue colour.

12
CSS Class Selectors
  • However, in XHTML markup, elements can have class
    attributes assigned to them. The value attached
    to a class attribute can be one (or more) names,
    separated by spaces. Example
  • lth1 classspecialgt or
  • lth1 classspecial underlinedgt
  • The actual definition of the value special is
    defined in a CSS class selector

13
CSS Class Selectors
  • h1.special color FF0000
  • This will now make all lth1gt elements with the
    class special display text with a red colour.
    lth1gt elements that dont have the class attribute
    special will continue to display in the default
    lth1gt colour.
  • A CSS class selector can also be defined more
    generally, without the element name (just the
    dot)
  • .special color FF0000
  • This class can now be applied to any XHTML
    element that has the class attribute special.
  • Actually the full CSS syntax is .special, where
    is a selector that matches anything. However,
    CSS shorthand means we can drop the .

14
CSS ID Selectors
  • XHTML elements can also have id selectors
    assigned to them. Example
  • ltp idsummarygtblah, blah, blah.lt/pgt
  • In the CSS, the id summary can be styled in a
    rule, thus
  • summary font-style italic
  • Whereas class selectors can be used across a
    number of elements in an XHTML document, ID
    selectors can only be assigned to one specific
    element in any given XHTML document.

15
CSS ID Selectors
  • In the CSS, id selectors are always defined with
    a (hash) symbol first
  • summary font-style italic
  • Again, this is CSS shorthand for
  • summary font-style italic
  • meaning the id summary can be applied to any
    XHTML element (but only one element can have that
    id name in the XHTML document).

16
Class Selectors vs ID Selectors
  • How do we know which to use and when?
  • ID selectors
  • As they must be unique to a page, ID selectors
    are useful for persistent structural elements,
    such as navigation zones, or key content areas,
    that occur once on a page, but that are
    consistent across a site.
  • For example, mainNav may be the selector to
    style the the main navigation element, which will
    likely appear on every page of your site.
  • So, ID selectors are generally applied to
    conceptually similar elements across a site.

17
Class Selectors vs ID Selectors
  • How do we know which to use and when?
  • Class selectors
  • As they can be allied to any number of elements
    on a page, class selectors are useful for
    identifying (and targeting) types of content, or
    similar items.
  • For example, you have a news page with a date at
    the start of each story. If you use ID selectors,
    youd have to give every occurrence of the date a
    separate ID name. Much easier to give every date
    one class name and style that one class.

18
CSS Pseudo-Classes
  • Pseudo-classes are CSS classes used to add
    effects to certain elements. They are used most
    often to style the anchor elements ltagt of
    hyperlinks. Example
  • alink color blue text-decoration
    underlined
  • Can also be written without the a (anchor)
    element
  • link color blue text-decoration underlined

19
CSS Pseudo-Classes
  • There are four pseudo-class elements provided to
    make rollover and on-click effects possible
  • alink color blue text-decoration
    underlined link not yet visited
  • avisited color green text-decoration
    underlined visited link
  • ahover color red text-decoration none
    effect on the link when the mouse hovers over
    it
  • aactive color purple text-decoration none
    effect on the link when the mouse button is
    pressed down on it
  • Note that pseudo-classes for rollover effects
    must be written in this order in a CSS file for
    them to work correctly.

20
Combining Pseudo-Classes with Classes
  • Pseudo-classes can also be combined with regular
    CSS class selectors to create multiple link and
    rollover styles, depending on the parent class.
    Examples
  • a.mainlink color blue a.sidebarlink
    color grey a.footerlink color white

21
Element Selector Grouping
  • Element selectors can be grouped together if you
    want to apply one CSS rule to a range of
    elements. Example
  • h1, h2, h3, h4, h5, h6 color FF0000
  • Each element is separated by a comma (except for
    the last element before the start of the
    declaration).
  • However

22
Inheritance
  • Certain CSS properties are inherited by the
    descendents of the elements those styles are
    applied to.
  • For example, if you give the ltbodygt element a
    color style of gray, all descendents of ltbodygt
    will inherit the color gray, until you specify
    otherwise.

23
Inheritance
  • By setting a number of basic styles in top-most
    elements, such as ltbodygt, you can avoid having to
    style many descendent elements. This
  • body color gray
  • Is much better than having to write this
  • p, div, h1, h2, h3, ul, ol color gray
  • Note inheritance is not the same as cascade!

24
The Universal Selector
  • There is also a Universal Selector, that acts
    like a wildcard, styling every available element
    that isnt specifically styled elsewhere.
    Example
  • padding 0 margin 0
  • would usefully set the overall page styling to
    zero padding and margin, which could then be
    adjusted as-needed further down the line.
  • The universal selector is donated by an symbol

25
Descendent Selectors
  • Descendent Selectors (sometimes called
    contextual) can give a finer level of control
    over class selectors. Examples
  • p em font-weight bold color red
  • Bold and blue will be applied to the ltemgt
    element, only if it occurs inside a ltpgt element.
    It would not apply if the ltemgt was inside say an
    lth1gt element.
  • mainNav ul font-family Arial, sans-serif
  • The font of the ltulgt element would only change to
    Arial if it was inside the content area defined
    by the ID mainNav
  • Each descendent element is separated by a single
    space in the CSS code (no commas!)

26
Class Element Selector Order
  • A class selector will take precedence over a more
    general element selector. Example, These two CSS
    rules set the color of paragraph elements
  • p color gray
  • p.first color red
  • The top rule sets all general ltpgt content to a
    grey colour. The next rule sets all paragraphs
    with the class attribute first (i.e. ltp
    classfirstgt ) to red text.
  • The p.first rule takes precedence and changes the
    text to black.

27
Class Element Selector Order
  • If an XHTML element belongs to more than one
    class, then the later CSS rules take precedence
    over earlier ones Example
  • p.first color 000000
  • p.changed color purple
  • If a ltpgt element in the XHTML is specified with
    both classes (i.e. ltp classfirst changedgt )
    then the text will become purple, not black.
  • The last class rule in the order takes precedence.
About PowerShow.com