1. INTRODUCTION TO CSS

2. OBJECTIVES: D EFINE WHAT CSS IS. K NOW THE HISTORY OF CSS. K NOW THE REASON WHY CSS IS USED. CSS SYNTAX. CSS ID AND CLASS.

3. C ASCADING S TYLE S HEETS 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

4. H ISTORY 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

5. W HY USE S TYLE S HEETS ? 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

6. W HY USE S TYLE S HEETS ? reduce use of non-standard tags Some tags and attributes have been deprecated in HTML 4.0 Strict 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

7. C OMMENTS 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; }

8. CSS S YNTAX 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;

9. CSS S YNTAX 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; }

10. Grouping you can group selectors: h1, h2, h3 {color: maroon} h4 {color: green} Note: each selector has been separated with a comma

11. 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.

12. CSS I D AND C LASS 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!

13. CSS I D AND C LASS 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!

14. W HERE 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 tag. The tag goes inside the head section: 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

15. W HERE DO YOU PUT STYLES ? Internal Style Sheet You define internal styles in the head section of an HTML page, by using the tag Put rules between style tags Add html comment tags Use when single document has unique style hr {color:sienna;} p {margin-left:20px;} body {background- image:url("images/back40.gif");}

16. W HERE DO YOU PUT STYLES ? In-line Similar to adding attributes to html tags Disadvantages decreased accessibility increased file size harder to update

17. fin