Transcript Slide 1
•
•
•
•
•
What is CSS?
Why was CSS created?
CSS pros & Cons
CSS browsers support
CSS specification
•
•
•
•
HTML vs HTML + CSS
CSS syntex
Selector
CSS implementation
(imbedded/external/inline)
• CSS property
What is CSS (Cascading Style Sheets)?
A simple styling language which allows attaching
style in to HTML
Style
the rule to control the appearance of various
properties
Style Sheets
: text file(.css) containing the styles
:
What is CSS (Cascading Style Sheets)?
Cascade
:Major concept in avoiding conflicting styles
within a document….
:Basically, “the lower an element is within
the document, the higher the priority it is
given ”.
Why was CSS created?
Web site become large and stylish
HTML
: originally designed
for indicating the structure
of a document
CSS
: W3C
: to separate content
from its appearance
(to distinguish structure from style)
www.westciv.com
CSS pros & cons
Pros:( by Nick Badbury)
more control over the design of web page
Structured content in web document
Easier to update web site
possible to decide how web page look when
printed (@media)
Cons:
• Inconsistent browsers support
• Bugs
Browser support table
Basic Concepts Browser Support
Netscape
Navigator
Opera
All Platforms
All Platforms
Internet Explorer
Macintosh
Windows
4.0
5.0
5.5
6.0
4.0
5.0
4.x
6.0
7.0
3.5
5.0
7.0
Embedding a style
sheet
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
Linking to a style
sheet
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
Y
@import
Y
Y
Y
Y
Y
Y
N
Y
Y
Y
Y
Y
@media
N
N
Y
Y
N
Y
N
Y
Y
N
Y
Y
Specify
Y
Y
Y
Y
Y
Y
B
Y
Y
Y
Y
Y
Inheritance
Y
Y
Y
Y
Y
Y
B
Y
Y
Y
Y
Y
Y=supported, P=partial, B=buggy, N=no
CSS browsers support
Internet Explore :
Netscape navigator :
Opera :
Browser info :
http://www.westciv.com/style_master/academy/browser_support/index.html
Bug info :
http://www.richinstyle.com/bugs/
Validation info :
http://jigsaw.w3.org/css-validator/validator-upload.html
CSS specification
more precise formatting than HTML (W3C)
http://www.w3.org/Style/CSS/
CSS1(1996)
: extensively supported
CSS2(1998)
: built in CSS1 + a variety of properties
: very limited support in most browsers
CSS2, revision1(2003)
HTML vs HTML + CSS
HTML : myfile.html
HTML+CSS : myfile.html
: myfile.html + mystyle.css
CSS rule Syntax
Selector : equivalent of HTML element(s)
Declaration :style attached to a specific selector
www.westciv.com
Class selector & ID selector
• Class selector : like ‘customized’ tag
• ID selector :almost similar but only one occurrence
<head><style>
.navbar{…}
.title {background :white}
#specialtitle{ background :ff99f}
</style></head>
<body>
<ul class=”navbar”>
<li class=”title”>What is CSS?
<li class=”title”>CSS standard
<li class=”title”>CSS syntax
<li id=”specialtitle”>Link
</ul>
<head><style>
#adbar {postion: fixed; height: 20%}
#menu {position: fixed; width: 20%;
top: 20%}
#main {position: fixed;top: 20%;
left: 20%
</style></body>
<body>
<DIV id="adbar"> .</DIV>
<DIV id="menu"> . </DIV>
<DIV id="main"> . .</DIV>
</BODY>
Adding style to HTML documents
Inline style
:the style attached to one specific element
Embedded style sheet
:the style attached to one specific document
External style sheets
:style sheets to format and restyle the entire
web site
:method - link / @import
Adding style to HTML documents
• Inline style
• Embedded style sheet
• External style sheets: link , @import
<body>
<h2 style=”color: blue”>inline style</h2> //inline
</body>
<head>
<title>My first styled page</title>
<style type=”text/css”>
//embedded
body{
color: #661400;
background-color: rgb(194,255,102) }
</style>
</head >
Adding style to HTML documents
Inline style
Embedded style sheet
External style sheets: link , @import
<head>
<link rel=”stylesheet” href=”mystyle.css” type=”text/css”> //link
</head>
<head>
<style type=”text/css”>
@import url(mystyle.css);
@import url(mystyle_head.css);
</style>
<head>
//import
Properties
To validate http://jigsaw.w3.org/css-validator/validator-upload.html
Category
Formatting
type
Definition & Examples
font family, font size, font style, line height, font weight,
text-decoration, color
Background
background color, background image, repeat, attachment,
horizontal position, vertical position
Block
word spacing, letter spacing, vertical alignment, text align,
text indent,whitespace, display
Box
margin, padding, border-style, border width and height,
float, clear,
List
Type, bullet image, position
Position
Extensions
Type, visibility, width, height, z index, overflow, placement,
clip
page breaks, visual effect,
Properties Examples
P:first-letter
Various font-size
stylish table
clear :
float :left
myfile.html
<html>
(content)
<head>
<title>My new first styled page</title>
<style type="text/css">
#specialtitle {
background :#ccebff;
font-weight: 600}
body {
padding-left: 11em;
font-family: Georgia, "Times New
Roman",Times, serif;
color: #661400;
background-color: rgb(194,255,102) }
.navbar {
list-style-type: none;
padding: 0;
margin: 0;
mystyle.css
position: absolute;
(style)
top: 2em;
left: 1em;
width: 9em }
.heading {font-weight:900}
h1 {
font-family: Helvetica, Geneva,
Arial,SunSans-Regular, sans-serif ;
color :#cc2900}
span{
text-decoration:underline}
.title{
background : white ;
font-weight: 600}
ul{ list-stle-type:circle }
ul li {
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul a {text-decoration: none }
a:link {color: blue }
a:visited {color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
………
</body>
</html>
from Embedded to External
myfile.html (content) + mystyle.css(style)
:external style sheets (link)
//myfile.html
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css” type=”text/css”>
</head>
<body>….</body>
</html>
example
reference
Niederst,J.(2001) Web design in a nutshell (2nd ED). Sebastopol,CA.: O’Reilly &
Associates, Inc.
Carey, P.(2001). Creating Web Pages with HTML and Dynamic HTML. Thomson
Learning
Meyer,E.A.(2004). Cascading Style Sheets. Sebastopol,CA.: O’Reilly & Associates,
Inc.
Dean,D.(2000). Cascading Style Sheets for Dummies. Indianapolis,IN: Dummies
Press
Allsopp,J & Sherrin M.(n.d.).The Complete CSS guide. Retrieved October 20, 2004.
from http://www.westciv.com/courses/course_info/complete_css_guide/index.html
Bos,B (2004/10/21). Cascading Style Sheets home page. Retrieved October 20, 2004
from http://www.w3.org/Style/CSS/learning
Sanders,B (2004). HTML/CSS Course. Retrieved October 20, 2004
from http://sandwil.beigetower.org/HTMLcourse/index.php
Lawang,B(n.d.). RichInStyle.com CSS bug table. Retrieved October 20, 2004
from http://www.richinstyle.com/bugs/table.html