Web Design Wikiclass | Lecture / Introduction to Cascading Styles Sheets

A Web Design Lecture by Steven Choy

Overview: Three different ways to apply CSS to HTML - CSS Selectors, Properties, and Values - How to use color - How to manipulate text - How to space things out - How to make a border around an element - Class and ID Selectors - Grouping and Nesting

Three different ways to apply CSS to HTML

(1) In-line

They are put straight into the HTML tags using the style attribute.

Examples

<h1 style="color:#f00; font-size:22px;">Some Heading</h1>

<p style="margin-top:30px;">Some Text</p>

(2) Embedded

They are put inside the head tags using the style tag.

Example

      <style type="text/css">
        p  { margin-top:30px; }
        h1 { color: #f00; font-size:22px; }
      </style>

Class discussion: what is the difference between these two ways of applying CSS?
(3) External

They are put in an external file that can be linked to in the HTML using the link tag. The link to the CSS file should be put inside the head tag of the HTML.

Example

<link rel="stylesheet" type="text/css" href="style.css" />

Note: there are other ways of linking external style sheets, but the above way should be suffice for most people.

Class discussions:

1) What are the pros and cons of these three ways of applying CSS?

2) Which way should we used when we make Web pages?

Why they are called cascading style sheets?

"The cascade in CSS or cascading style sheets is the ability to have multiple styles from different sources merge together into one definitive style. CSS defines the cascade in several ways, but the simplest is to remember that style properties that come later are more likely to be applied than those that come earlier."

CSS Selectors, Properties, and Values

For each HTML tag, there is a CSS selector. They are called HTML selectors in CSS.
For each selector, there are properties.
For each property, we can assign value to it.
Example:

    body {
      font-size: 12px;
      color: #000;
    }

How to use color?

use color names

17 color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

use RGB (red, green, blue) value

Example of rgb value: rgb(0,0,255) = blue color, rgb(255,0,0) = red color

use HEX code

Example of hex code: #0000FF = blue color, #FF0000 = red color

The hex color code is six digits in length.

The three-digit version of the hex color code is a compressed version of the six-digit.

Examples: #00f = #0000ff, #96c = #9966cc

Colors can be applied in foreground or background.

Example:

    h1 {
      color: #0033CC;
      background-color: #EEEEEE;
    }

How to manipulate text?

font-family
font-size
line-height
text-align: left, right, center, or justify
font-weight: bold or normal
font-sytle: italic or normal
font-decoration: overline, line-through, underline
text-transform: capitalize, uppercase, lowercase, none
letter-spacing
word-spacing
text-indent

How to space things out?

Margin: the space outside of the element

Properties:

      margin-top
      margin-right
      margin-bottom
      margin-left

Padding: the space inside the element

Properties

      padding-top
      padding-right
      padding-bottom
      padding-left

The Box Model: in the middle you have the content area, surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin'.

How to make a border around an element?

border-style

The value can be solid, dotted, dashed, etc

border-color
border-width
- border-left-width, border-right-width, border-bottom-width, border-top-width

Example

     h2 {
        border-style: solid;
        border-width: 1px;
        border-color: red;
      }

CSS Shorthand Properties

Some CSS properties allow a string of values, replacing the need for a number of properties. These are represented by values separated by spaces.
Examples

      border-width: 1px 5px 10px 20px;

      border: 1px #F00 solid;

      margin: 10px 20px 20px 10px;

      padding: 20px 10px 20px 10px;

Background Images

There are a number of properties involved in the manipulation of background images.
background-color
background-image

the location of the background image (relative to the CSS location of HTML location).

background-repeat

specify how the background image repeats itself, which can be

repeat, repeat-y, repeat-x, no-repeat

background-position

it can be top, center, bottom, left, right or any sensible combination, such as above.

Class and ID Selectors

In CSS, you can define your own selectors in the form of Class and ID selectors.
Class Selector - a name preceded by a full stop (.)

Format

      .Class_Name {
        property_1:value;
        property_2:value;
        ...
      }

Example

      .xyz {
        color:#ccf;
        background-color: #ccc;
        padding: 20px;
      }

Some examples of applying this style to the HTML

      <h2 class="xyz">This is heading 2</h2>

      <p class="xyz">This is a paragraph</p>

      <div class="xyz">. . . </div>

ID Selector - a name preceded by a hash character (#)
Class vs ID

"The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one."

"The difference between ID and class is that an ID selector can be called only once in a document, while a class selector can be called multiple times in a document. The second difference is that ID can be called by Javascript's getElementByID function."

Grouping

You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.

Format

      h2, h3, .thisClass, .anotherClass {
        property:value;
      }

Nesting Example

In CSS:

      #top {
        background-color: #ccc;
        padding: 1em
      }

      #top h1 {
        color: #ff0;
      }

      #top p {
        color: red;
        font-weight: bold;
      }

In HTML

      <div id="top">
        <h1>Chocolate curry</h1>
        <p>This is my recipe for making curry purely with chocolate</p>
        <p>Mmm mm mmmmm</p>
      </div>

CSS Display Property

inline - follows the flow of a line
block - puts a line break before and after the element
none - does not display the element

CSS Position Property

It can be absolute, relative, static or fixed.
position: static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

position: relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

position: absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

The absolute element can be placed anywhere on the page using top, right, bottom and left.

position: fixed

The element is positioned relative to the browser window

CSS Float Property

Floating an element will shift it to the right or left of a line, with surrounding content flowing around it.

References

Thanks for Reading

If you would rather like to have this lecture note in printed format, please click the print action link in the top right corner.

If you find any problem in this lecture note, please feel free to tell Steven via steven [at] findaway.hk.