INTRODUCTION TO CSS

OBJECTIVES:

• DEFINE WHAT CSS IS.

• KNOW THE HISTORY OF CSS.

• KNOW THE REASON WHY CSS IS USED.

• CSS SYNTAX.

• CSS ID AND CLASS.

CASCADING STYLE SHEETS

• a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

• a way to style and present HTML; the style sheet is the presentation of the document.

• you will be able to put out pages with much less work, that load much faster, and will be easy to update and print

HISTORY

• Style sheets have existed in one form or another since the beginnings of Standard Generalized Markup Language (SGML) in the 1980s.

• Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents.

• Cascading HTML Style Sheets (CHSS) and Stream-based Style Sheet Proposal (SSP) were chosen as the foundation of the CSS today

• Håkon Wium Lie and Bert Bos  worked together to develop the CSS standard (the 'H' was removed from the name because these style sheets could also be applied to other markup languages besides HTML)

• CSS was proposed by Håkon Wium Lie in October 1994. 

• Bert Bos was working on a browser called Argo, which used its own style sheet language called SSP

WHY USE STYLE SHEETS?

• separate structure from appearance

• create consistent appearance • ease of maintenance

• Create one style sheet

• Use link tag to use for several web pages

• Make changes in one file

• increase accessibility

• apply additional effects • Add hover effect to links

• Remove underlines on links

• Add horizontal rule to headings

• Use instead of a table for a border

• Control paragraph, line, letter spacing

• Use instead of tables for layout

WHY USE STYLE SHEETS?

• reduce use of non-standard tags• Some tags and attributes have been

deprecated in HTML 4.0 Strict

<font face=arial color=red size=+2><basefont …>

<center>

<h1 align=center>

<td valign=top height=45 >

<ul type=square>

• reduce web page file size• Every keystroke counts!

• Smaller files load more quickly

• Save disk space

• to save a lot of work and our time

COMMENTS

• are used for the explaining the code

• It can help to edit the code later

• A CSS comment begins with "/*", and ends with "*/"

/*This is a comment*/

{text-align:center;/*This is another comment*/color:black;font-family:arial;}

CSS SYNTAX

• Made up of three parts:

selector {property: value}

• The selector is normally the HTML element/tag you wish to define

• The property is the attribute you wish to change

• Every property has the value

• the property and value are separated by a colon and surrounded by curly braces;

CSS SYNTAX

• if the value consists from multiple words, it should be with quotes around it:• body {color: “navy blue”}

• if there are more than one property, each property should be separated with a semi-colon

• To make the style definitions more readable, you can describe one property on each line• p {text-align: center;

color: maroon; }

Grouping

• you can group selectors:

• h1, h2, h3 {color: maroon}

• h4 {color: green}

Note: each selector has been separated with a comma

Things to remember about CSS:

Remember that CSS code is simply written instructions that tells Web browsers (like FireFox and Internet Explorer) how to display things on a page. For example:

• make text bold.

• position things a page.

• set the font style for a page or paragraph etc.

The sister language to CSS is HTML: code that tells the Web browser WHAT is actually in the page.

CSS ID AND CLASS

• CSS allows you to specify your own selectors called "id" and "class".

The id Selector

• The id selector is used to specify a style for a single, unique element.

• The id selector uses the id attribute of the HTML element, and is defined with a "#".

• The style rule below will be applied to the element with id="para1":

Do NOT start an ID name with a number!

CSS ID AND CLASS

• The class Selector

• The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

• This allows you to set a particular style for many HTML elements with the same class.

• The class selector uses the HTML class attribute, and is defined with a "."

• Do NOT start a class name with a number!

WHERE DO YOU PUT STYLES?

External style sheets

• ideal when the style is applied to many pages

• you can change the look of an entire Web site by changing one file

• your style sheet should be saved with a .css extension

• Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

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

Advantages

• ease of maintenance

• use less disk space

• increase accessibility

Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px

WHERE DO YOU PUT STYLES?

Internal Style Sheet

• You define internal styles in the head section of an HTML page, by using the <style> tag• Put rules between style tags

• Add html comment tags

• Use when single document has unique style

<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>

WHERE DO YOU PUT STYLES?

• In-line • Similar to adding attributes to html tags

• <H1 style="color: maroon">

• Disadvantages

• decreased accessibility

• increased file size

• harder to update

fin