NM4208 Lecture Notes: CSS

Web Pages and CSS
Charlene Wee

What’s new about the web?
- Most web-authoring software use HTML 4.0 or XHTML 1.0
  - Recommended by the W3 Consortium.
  - Standard still HTML 4.01
  - HTML 5 published as working draft
    - Though Dreamweaver CS5 incorporates a HTML 5 extension pack.
    - Apple also supports HTML 5 for its video function; backed by Microsoft for its IE9.
- HTML 4 tags are not case-sensitive
  - It formerly was standard practice to use ALL CAPS so tags were easy to locate on source file.
  - HTML 4 recommends using CAPS for elements and lower case for attributes.
- But tags in XHTML are case sensitive.
  - Use lower case to meet all specifications.
  - However, XHTML 1.0 is not scheduled for updating
    - HTML 5 will be the new standard. It’s not clear whether lower case tags will be required, but all examples in W3C working document show lower case tags.
- Graphics extended beyond jpg and gif formats
- Portable Network Graphics (PNG)
  - Lossless, portable, well-compressed storage format that uses raster images (bitmaps)
  - Features rich color control
    - Supports true color, grayscale (JPG) and 8-bit (GIF)
    - Allows better color precision & smoother fades
  - Designed for Web, but not print (no CMYK).
  - Does not support animation.
  - Better compression than GIF but not JPG.
    - Except pictures with text or line art.
- Scalable Vector Graphics (SVG)
  - Allows rich graphical content including vector images, interactive animations.
  - Generally bandwidth-friendly.
  - Gaining increasing acceptance.
    - SVG Tiny is supported by some web-enabled mobile phones.
    - SVG will only be supported by IE9 onwards.
Foundations of Websites

Cascading Style Sheets (CSS)

Language for describing the visual and aural display of pages, for a variety of devices.
- Can format text, color etc., globally, for entire website, rather than page-by-page.
- Has become primary resource for style, layout
- HTML focuses on the content, CSS focuses on the format
  - CSS Zen Garden

CSS Syntax

selector { property: value; }

declaration

Selector: element to be formatted
Declaration: style properties

H2 {
font-size: 14 px;
font-family: Trebuchet MS;
font-weight: bold;
}

Attributes of Style Sheets
- Inheritance
  - Tags added inside other tags inherit the formatting rules (values) of the outside tags
- Cascade
  - When different rules are applied, a cascade is formed for certain rules to take precedence
  - through their specificity
    - More specific selectors override more general ones
- Selectors can be combined
  - h1, h2, h3, h4 {
    font-family: Garamond;
    }
Inserting CSS Rules
- In Inline Styles
- In Internal Stylesheets
- In External Stylesheets
Benefits of External Style Sheets
- Easier to maintain web site over time (cleaner code, different web masters)
- Smaller file size, shorter browser loading time
- Convenience
- Greater flexibility and control over presentation
Selectors

Class
- Can be used across various elements in a HTML document
- Similar to inline styles

ID
- Styles a particular element in the HTML document

selectors

Divisions vs. Spans

Divisions
- Block level HTML element used to define sections of a HTML file

divisions

Spans
- Inline elements styling certain areas of text

spans

What happens with HTML tables?
- You can use CSS on its own
  - Through Div IDs
- You can combine CSS with tables
  - Through styling entire tables or parts of tables
  - Applying inline styling or external stylesheets
Using Inline Styles
- Create a new inline style
  1.Highlight text to be formatted
  2.Select <New Inline Style> under Targeted Rule options in Properties panel
  3.Define properties

inline styles

Using an Internal Style Sheet

internal stylesheet

Create a new CSS rule
1.Ensure CSS Styles window is open
2.Click on New CSS Rule icon
3.Define properties under Body
4.Ensure rule is placed under (This document only)

new css rule

Creating an External Style Sheet
1.Create layout, defining element properties based on new CSS rules
2.Save as (New Style Sheet File) under Rule Definition
3.Name style sheet file with a .css extension
4.Link style sheet file through Attach Style Sheet icon
5.Browse for .css file, add as Link, and select the type of Media

external stylesheet

CSS Box Model
- Margin - Clears an area around the border from the other elements surrounding the box
- Border - A border around the padding and content in the box
- Padding - Clears an area around the content, before the edges of the border
- Content - The text and images within the box

Creating a CSS web site
- Set the body properties
  1. Create a new HTML file, giving it a name
  2. Click on New CSS Rule, save as New Style Sheet File with a separate name
  3. Choose Tag under Selector Type and ensure “body” in Selector Name
  4. Select “white” as Background; under Block, ensure Text Align is “center”; under Box, ensure padding and margins are all zero
- Create the outer wrapper
  1. In the Style Sheet file, create New CSS Rule with Selector Type “ID” and Selector Name“wrapper”
  2. Under Type, choose “Verdana, Geneva, Sans Serif” for Font-family; under Block, choose “left” for Text-align; under Box, type “750 px” for Width and set “auto” for left and right margins
  3. In the HTML document, from the Insert panel, select Insert Div Tag. Select “At insertion point” for Insert and choose “wrapper” for ID.
- Create the header
  1. In the Style Sheet file, create New CSS Rule with Selector Type “ID” and Selector Name “header”
  2. Under Background, place Background-image, set “no repeat” under Background-repeat, with “20 px” for both X and Y positions; under Box, set height to “110 px”
  3. In the HTML document, from the Insert panel, select Insert Div Tag. Select “At insertion point” for Insert and choose “header” for ID.
- Create the navbar
  1. In the Style Sheet file, create New CSS Rule with Selector Type “ID” and Selector Name “navbar”
  2. Under Type, select Font-size “12px”, color “#FFFFFF”; under Background, choose Background-color as “#003399”; under Box, set height as “30px”
  3. In the HTML document, from the Insert panel, select Insert Div Tag. Select “At insertion point” for Insert and choose “navbar” for ID.
- Create the content
  1. In the Style Sheet file, create New CSS Rule with Selector Type “ID” and Selector Name “content”
  2. Under Type, set color as “#FFFFFF”
  3. In the HTML document, from the Insert panel, select Insert Div Tag. Select “At insertion point” for Insert and choose “content” for ID.
- Create the footer
  1. In the Style Sheet file, create New CSS Rule with Selector Type “ID” and Selector Name “footer”
  2. Under Type, set Font-size to “60%”, Font-weight to “bold”, Color to “#FFFFFF”; under Background, set Background-color to “#FF6600”; under Box, set Height to “20px”
  3. In the HTML document, from the Insert panel, select Insert Div Tag. Select “At insertion point” for Insert and choose “footer” for ID.
Sample page template

sample template

Modifying the template for pages
- Create/modify the homepage
  1. In your Source Code HTML document, create a new CSS rule for #content ID, saving as (This Document Only)
  2. Under Box, set Height of 390px
  3. Create new CSS Rule for #left sidebar in Source Code, with Type color “#333333”, Background-color “#CCCCCC”. Under Box, set Width to 150px, Height to 390px, Float “left, left and right Padding of 20px, right Margin of 20px
  4. In the CSS Styles window, right-click #left_sidebar to Duplicate it.
  5. Name the duplicate #right_sidebar, changing Box properties to Float “right” and left Margin of 20px
  6. In the #navbar, insert Image Placeholder (Insert > Image Objects > Image Placeholder) of 150px Width and 30px Height. Create 5 placeholders with names “About NUS”, “Education”, “Research”, “Campus”, “Contact”.
Sample Homepage

sample home page

More Resources