Info Tech 10/11/12 Looking at CSS for design

CSS Introductions:  ONCE YOU HAVE LOOKED AT THE EXAMPLES TRY TO TALOR THE LEARNING FOR YOURSELF.  SEE WHAT IMAGE YOU CAN FIND TO USE OR COLOURS.  THINK ABOUT THE LAYOUT

What is CSS?

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Syntax

1. A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

In the following example all <p> elements will be centre-aligned, with a red text colour:

Example: TRY IT YOURSELF

2. If you have elements with the same style definitions. It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
In the example below we have grouped the selectors from the code above:

Example: TRY IT YOURSELF

3. CSS Colours
Colours are specified using predefined colour names, or RGB, HEX, HSL, RGBA, HSLA values.

COLOUR NAMES
In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Example: TRY IT YOURSELF

4. Background Colour

You can set the background colour for HTML elements:

Hello World

This will help define your website and give it clarity and focus.  It is important to think about what colours go together and how you can make it look as nice as possible.  Remember no one likes a jarring or messy looking website.

Please change the paragraph to say something you would like to say about he website you will create.
Example: TRY IT YOURSELF

5. Border Colour

You can set the colour of borders:

Hello World

Hello World

Hello World

 Try different colours than those suggested. Example: TRY IT YOURSELF

6. CSS Backgrounds

The CSS background properties are used to define the background effects for elements.

CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS Colour Background:

The background-color property specifies the background colour of an element.
The background colour of a page is set like this:

Example: TRY IT YOURSELF

Background Image - Repeat Horizontally or Vertically

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Example: TRY IT YOURSELF

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Example: TRY IT YOURSELF