Docstoc

CSS

Document Sample
CSS Powered By Docstoc
					Cascading Style Sheets




      Jesse Nordstrom
        Justin Essary
                      Basics

●   Cascading Style Sheets determine how elements
    of an HTML document are displayed

●   CSS holds the formatting and style of page

●   HTML holds the content of page

●   One CSS page can be used to format the
    content of multiple web pages

●   File extension is .css
                      History

●   CSS was developed in the middle of the 1990’s, by
    Hakon Wium Lie and Bert Bos.

●   Lie was working on Cascading HTML Style Sheets
    and Bos was working on Steam-based Style Sheets.

●   The two combined their work and came up with CSS.
                        History

●   The standards for CSS were completed in 1996

●   The first internet browser to be totally compatible
    with CSS was not released until 2000

●   The World Wide Web Consortium used CSS to
    clearly divide the formatting and the content of web
    pages
                       Syntax

●   The syntax of CSS is made up of three parts:
     – Selector- HTML tag to be defined
     – Property- attribute to be changed
     – Value- value to be assigned


●   The property and the value are surrounded by curly
    braces and are separated by a colon and semicolons
    separate multiple properties

●   Comments are opened with ‘/*’ and closed with ‘*/’
          Code Examples - CSS


This is the CSS Code:


body {background-color: blue}
h1 {font-size: 36pt; color: red}
h2 {fort-size: 24pt; color: green}
p {margin-left: 50px; color: yellow}
         Code Examples - HTML

This is the accompanying HTML code:
<HTML>
<head>
<link rel="stylesheet"
type="text/css" href="example1.css" />
</head>
<body>
<h1>Example header 1</h1>
<h2>Example header 2</h2>
<p> This is an example of the paragraph format.</p>
</body>
</HTML>
Code Examples - Result
   Code Examples – CSS Changed


Using the same HTML code and changing the CSS code
to:

body {background-color: black}
h1 {font-size: 52pt; color: yellow}
h2 {fort-size: 14pt; color: blue}
p{
margin-left: 50px;
color: green;
border-top: medium solid orange}
Code Examples – New Result
                 Works Cited



“Cascading Style Sheets” Wikipedia: The Free
Encyclopedia .2 February 2008
http://en.wikipedia.org/wiki/Citing_Wikipedia

W3Schools 2 February 2008
http://en.wikipedia.org/wiki/CSS

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:10
posted:1/14/2012
language:English
pages:11