Thursday, 18 July 2013

PPT ON CSS

CLICK HERE TO DOWNLOAD PPT ON CSS

CSS Presentation Transcript

1.HTML vs. CSS
HTML marks up the content
<h1>Some heading</h1>
This is a heading
Nothing said about how to display the heading
HTML 4 included style options
XHTML does NOT include style options

2.CSS SYNTAX
CSS document = many CSS rules
CSS rule = selector : declaration
Declaration = { property : value; }
A declaration can hold any number of property + value pairs

3.SELECTORS
Type selector
A specific element is styled
H1 { color: red; }
Universal selector
All elements are styled
* { color: blue; }
ID selector
Only THE element with the specified ID is styled
#Footer { color : yellow; }
<div id=“footer”>some text</div>
Class selector
A set/class of elements is styled
.HighLight { color: orange; }
<h1 class=“HighLight”>abcd</h1>

4.WHERE TO ADD STYLING
Styling information can be added in many places
Separate file
Called “External style sheet”
Referenced from the HTML file
This is good for re-use, since the same external style sheet can be included in many HTML files
In the HEAD section of the HTML file
Called “embedded style sheet”
On the element that needs styling
Called “Inline style sheet”

5.CASCADE
If an element is styled in different conflicting ways the “nearest” style definition wins:
Inline style sheet
Embedded style sheet
External style sheet. PREFERRED
If you have more style definitions on the same level the latest definition wins
Example: You include two external style sheets with conflicting style definitions
The last one wins

6.CSS IN THE BROWSER
Users may
ingore parts of a style sheets
add their own style sheet in the browser
This will override style definitions in web pages
Internet Explorer
Tools ? Internet Options ? Accessibility

7.HTML WITH CSS
This short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before.
It does not explain much of CSS. It just explains how to create an HTML file, a CSS file and how to make them work together. After that, you can read any of a

8.number of other tutorials to add more features to the HTML and CSS files. Or you can switch to using a dedicated HTML or CSS editor,that helps you set up complex sites.
At the end of the tutorial, you will have made an HTML file that looks like this:

9.WRITING THE HTML
For this tutorial, I suggest you use only the very simplest of tools.
E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even /a> </ul>

10.
to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.
Don't use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.

11.Step 1 is to open your text editor (Notepad, Text Edit, Edit, or whatever is your favorite), start with an empty window and type the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html><head> <title>My first styled page</title> </head> <body>  <ul class="navbar">

12.<li> <a href="index.html">Home page</a> </li>

<li> <a href="musings.html">Musings</a> </li>

<li> <a href="town.html">My town</a> </li>

<li> <a href="links.html">Links</a></li>

13.<h1>My first styled page</h1>
<p>Welcome to my styled page! It lacks images, but at least it has style. And it has links, even if they don't go anywhere… </p>There should be more here, but I don't know what yet.  <address>Made 5 April 2004<br> by myself.</address>
</body>
</html>

14.ADDING SOME COLOURS
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html> <head> <title>My first styled page</title> <style type="text/css"> body { color: purple; background-color: #d8da3d } </style>
</head>
<body> [etc.]

15.ADDING FONT
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head> <title>My first styled page</title> <style type="text/css"> body { font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } </style> </head> <body> [etc.]

16. ADDING A NAVIGATION BAR
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html> <head> <title>My first styled page</title> <style type="text/css"> body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple;

17.background-color: #d8da3d } ul.navbar {

position: absolute; top: 2em; left: 1em;

width: 9em } h1 { font-family: Helvetica

, Geneva, Arial, SunSans-Regular, sans-serif } </style> </head> <body> [etc.]

18.<!DOCTYPE html PUBLIC "-//W3C//DTD

HTML 4.01//EN"> <html> <head>

<title>My first styled page</title> <style

type="text/css"> body { padding-left:

11em; font-family: Georgia, "Times New

19.Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em;

left: 1em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li {

20.STYLING THE LINKS
background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black } ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } </style> </head> <body> [etc.]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>My first styled page</title> <style type="text/css"> body { padding-left

21.ADDING A HORIZONTAL LINE
: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em } h1 .