An Introduction to Cascading Style Sheets Basic CSS Syntax

1
An Introduction to Cascading Style SheetsBasic
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.