Introduction To CSS

Introduction to CSS
Web Workshop: CSS

Objectives:
- What is CSS?
- Structure of CSS
- How to use CSS in your webpage
What
Whatis isCSS?
CSS?(1)
CSS stands for Cascading Style Sheets
Cascading: refers to the procedure that
determines which style will apply to a
certain section, if you have more than one
style rule.
What
Whatis isCSS?
CSS?(2)
Style: how you want a certain part of your
page to look. You can set things like color,
margins, font, etc for things like tables,
paragraphs, and headings.
What
Whatis isCSS?
CSS?(3)
Sheets: the sheets are like templates, or a
set of rules, for determining how the
webpage will look.
What
What
is is
CSS?
CSS?
(4)
So, CSS (all together) is a styling language
a set of rules to tell browsers how your
webpage should look.
What
WhatisisStyle?
Style
Style is a command that you set to tell the
browser how a certain section of your
webpage should look.
You can use style on many HTML elements
(like <p> <h1> <table> etc)
How
Howtotowrite
writestyle
stylerules
rules(1)
Two parts: (1) selector and (2) declaration.
Selector: the HTML element you want to
add style to.
<p> <h1> <table> etc
Declaration: the statement of style for that
element. Made up of property and value.
How
Howtotowrite
writestyle
stylerules
rules(2)
Selector {declaration;}
Declaration = {property: value;}
Property: what aspect you want to change
ex: color, font, margins, etc.
Value: the exact setting for that aspect.
ex: red, italic, 40px, etc.
How
Howtotowrite
writestyle
stylerules
rules(2)
selector {property: value;}
Essentially means:
The thing I want to change
{the aspect of that thing I want to change:
what I want it to be;}
How
Howtotowrite
writestyle
stylerules
rules(3)
Selector {property: value;}
h1 {color: red;}
Means: Speaking of my heading1, I want the
text color to be red.
How
Howtotowrite
writestyle
stylerules
rules(3)
I want the color of the text in my paragraph to be
yellow.
p {color: yellow;}
This is the text in this paragraph.
How
Howtotowrite
writestyle
stylerules
rules(4)
h1 {color: blue;
background-color: green;}
Means:
Speaking of my heading1, I want the text color
to be blue and the background color to be
green.
How
Howtotowrite
writestyle
stylerules
rules(4)
I want the text color of my link to be red and the
background color to be yellow.
a {color: red;
background-color: yellow;}
This is my link
WhereThree
do I put
types
myofstyle
stylerules?
There are three types of style-rule-places that
we will cover:
- Inlined
- Internal Style Sheet(embedded)
- External Style Sheet
a) Inlined example-1
<html>
<head><title>My Wonderful Example</title>
</head>
<body>
<p>What was I thinking?</p>
</body>
Original
html
</html>
code
a) Inlined example-2
<body>
<p style=text-align: center; fontweight: bold; color: yellow;>What was I
thinking?</p>
</body>
What was I thinking?
b) Internal-1
<style type=text/css>
body {
text-align: left;
font-family: trebuchet,
verdana;}
</style>
</head>
b) Internal-2
body
{
text-align: left;
font-family: Trebuchet,
verdana;
}
</style>
</head>
Internal: Statement of style
</style>
this is a style
sheet (style type)
written (text) in
css (CSS)
language
Internal: Brackets & Declaration

body
I want the align

text property to be
given the value of
left
{
text-align: left;
font-family: trebuchet, verdana;
}
</style>
c) External
<html>
<head><title>My Way</title>
<link rel="stylesheet"
href="http://www2.hawaii.edu/~myway.
css"
type="text/css>
</head>
<body> </body>
</html>
Link to a
separate css page
External
link element associates style sheet with doc.
Contd..
type attribute specifies style language used

href attribute provides style sheet URL
title attribute provides style sheet name

Alternative, user selectable style sheets
can be specified
Contd..
CSS Styled Doc

A styled HTML document
produced by the style sheet style2.css:
CSS Introduction
Note that alternate, user selectable style is not
widely supported: firefox 3 and IE 8 do, but
IE 6, IE 7 and Chrome dont.
CSS Introduction
Single document can be displayed on multiple
media platforms by tailoring style sheets:
This document will be printed differently than

it is displayed.
CSS Syntax
Parts of a style rule (or statement)
CSS Syntax:
Selector Strings
Single element type:
Multiple element types:
All element types:
Specific elements by id:
CSS Syntax:
Selector Strings
Source anchor elements:
pseudo-classes
Element types that are descendents:
CSS Syntax:
Selector Strings
Source anchor elements:
Element types that are descendants:

rule applies to li element that is
CSS Syntax
Style rules covered thus far follow ruleset
syntax
At-rule is a second type of rule
URL relative to style sheet URL
Reads style rules from specified URL

Must appear at beginning of style sheet
Style Sheets and HTML

Rules of thumb:
Use external style sheets to define site-wide style
Prefer style sheets (either external or embedded)
to style attributes
XML special characters
Must use references in embedded style sheets and
style attribute
Must not use references in external style sheets
CSS Rule Cascade

What if more than one style declaration
applies to a property of an element?
The CSS rule cascade determines which

style rules declaration applies

Introduction To CSS

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Introduction To CSS

Diunggah oleh

Hak Cipta:

Format Tersedia

Introduction to CSS

Web Workshop: CSS

Internal: Statement of style

Internal: Brackets & Declaration

I want the align

link element associates style sheet with doc.

type attribute specifies style language used

title attribute provides style sheet name

CSS Styled Doc

produced by the style sheet style2.css:

This document will be printed differently than

Element types that are descendents:

Element types that are descendants:

Reads style rules from specified URL

Style Sheets and HTML

CSS Rule Cascade

The CSS rule cascade determines which

Anda mungkin juga menyukai