Understanding CSS

by M. Douglas Wray

Press → key to advance.

http://www.macwebguru.com/bda-understanding-css/

M. Douglas Wray

HTML: A Brief History

  • 1989 – Tim Berners-Lee invents HTML basing it on SGML
  • 1992 – NCSA* creates Mosaic browser
  • 1993 – Lynx browser invented
  • 1994 – IETF** sets up HTML work group,
    HTML 2 spec released,
    WWW consortium forms
  • 1995 – HTML 3 spec released
  • 1996 – Scripting and standardization added
  • 1997 – HTML 3.2 released and endorsed by W3
  • More details here
  • *National Center for Supercomputing Applications
    ** Internet Engineering Task Force

CSS Syntax

element { attribute: value; }

element child { attribute: value; }

ul li { padding: 5px; }

#topnav ul { list-style: none; }

CSS Cheat Sheet

CSS Cheat Sheet by Leslie Franke

CSS Selectors

  • tag
  • ID
  • class
  • pseudo-class

CSS Selector - Tag

Any 'block' element, p, img, table, etc.

<p style="border:1px solid red; padding:5px; color:blue;">Visible text</p>

Visible text

CSS Selector - ID

<div id="topnav">

#topnav { attributes }

IDs must be unique.

CSS Selector - class

<p class="alert">

p.alert { attributes }

CSS Selector - pseudo-class

<a href="#">

Anchors have four pseudo-classes:
a:link | a:visited | a:hover | a:active

Define them in that order.

a:link, a:visited { attributes }
a:hover, a:active { attributes }

Writing CSS Styles

First, consider your structure:
Example

Have a design in mind, don't build blindly!

Typical Selector

#container
{ width: 760px;
border: 1px solid red;
margin: 50px;
margin-left: auto;
margin-right: auto;
padding: 20px;
background: #666; }

Internal vs External CSS

Styles can be embedded in the html page itself or linked via a command in the header.

<style> p { color:red } </style>

<link rel='stylesheet' href='url' type='text/css' media='all' />

Embedded stylesheets LIMIT what the CSS affects.
Linked stylesheets can affect MANY pages.

Customizing Text

<p style="color:red; font-weight:900; padding:5px; border:3px solid #000; width:40%; margin-left:auto; margin-right:auto;">Visible text.</p>

Visible text.

The role of the DIV tag

DIVs are DIVisions of a page.

Containers. BOXES. They are the structure of your page.

Graphic Example

Code Example

Reset Stylesheet

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Eric A. Meyer is one of the most-often referenced CSS experts.

Example

Let's Build Something!

Using an example from maxdesign.com let's walk through building a CSS layout.

Russ Weakley is a 20-year veteran of design, much of it on the web.

CSS Layouts

Two Column Responsive Layout

End of Segment 1

See you Thursday night!

Questions?

macguiguru@spamcop.net

Link to next section slides