• HTML vs HTML + CSS • What is CSS? CSS syntex

advertisement
•
•
•
•
•
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
Download