Scribd
Upload
165 views

CSS PDF

CSS (Cascading Style Sheets) is a language for styling and formatting web pages. It allows customization of HTML elements through properties like color, font, size and layout. CSS separates design from content, making pages lighter and faster loading. It can be applied through inline styles, embedded style sheets or external style sheets. CSS follows inheritance and cascade rules to determine which styles get applied.

Uploaded by

raghuraman36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
165 views

CSS PDF

CSS (Cascading Style Sheets) is a language for styling and formatting web pages. It allows customization of HTML elements through properties like color, font, size and layout. CSS separates design from content, making pages lighter and faster loading. It can be applied through inline styles, embedded style sheets or external style sheets. CSS follows inheritance and cascade rules to determine which styles get applied.

Uploaded by

raghuraman36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 46

CSS Introduction

Colin Gourlay & Kevin Vanderbeken


CSS
=
(the presentation layer)
Today:

What is CSS?
Where can CSS be used?
CSS Syntax - selectors, properties & values
Selecting HTML elements
Inheritance & the cascade
what is CSS?
CSS = Cascaded Style Sheets

• A way to customise the presentation of your HTML.


• A language designed to allow us select and style
the elements on our page.
• Like HTML, it has gone through various changes.
• Also like HTML, it is not a programming language.
• It can allow us to present our content in multiple
formats for multiple devices.
why do we use CSS?
better type & layout controls
less work
smaller documents
and faster downloads
better type & layout controls
less work
smaller documents
and faster downloads
more accessible sites
better type & layout controls
less work
smaller documents
and faster downloads
more accessible sites
reliable browser support
less work
smaller documents
and faster downloads
more accessible sites
reliable browser support
smaller documents
and faster downloads
more accessible sites
reliable browser support
a great example...

http://www.csszengarden.com
where can you use CSS?
inline styles

embedded style sheets

external style sheets


<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1 style="color: red;">
Introduction
</h1>
</body>
</html>
inline styles

embedded style sheets

external style sheets


<html>
<head>
<title>Document Title</title>
<style type="text/css">
h1 { color: red; }
</style>
</head>
<body>
<h1>Introduction</h1>
</body>
</html>
inline styles

embedded style sheets

external style sheets


<html>
<head>
<title>Document Title</title>
<link rel="stylesheet"
href="stylesheet.css"
type="text/css" />
</head>
<body>
<h1>Introduction</h1>
</body>
stylesheet.css
</html>
h1 {
color: red;
}
CSS syntax
selectors, properties & values
selector { property: value; }

selector {
property1: value1;
property2: value2;
property3: value3;
}
h1 { color: orange; }

p {
color: #000000;
font-size: 12px;
font-family: Arial;
}
h1 {}

<h1>Introduction</h1>
#article {}

<p id="article">...text...</p>
.tab {}

<li class="tab">...text...</li>
inheritance & the cascade
(a.k.a. the BIG concepts)
inheritance
HTML
<p class="bold">
<a href="http://www.google.com">
Google
</a>
is an excellent search engine.
</p>

CSS

p.bold {
font-weight: bold;
}
document structure
all elements contained within another
element are its descendants

title, style and head are descendants of html


a direct descendant is called a child element

body is a child of html


a containing element is called the parent element

html is the parent of body


the trail of parents leading back to the
root are an element’s ancestors

p, body and html are ancestors of img


all elements with the same parent are siblings

h1, p, p, h2, etc are siblings


If we wanted all text elements to be shown in
verdana font, we apply one rule to the <body>

body { font-face: Verdana; },


Then all the decendant text elements inside the body
tag get that style applied.
the cascade
the closer the style sheet is
to the content, the more
weight it is given
rules can still conflict...

...but the cascade still applies


HTML
<li class="myHappyShoes">
One of many happy shoes
</li>
<li id="happyShoe" class="myHappyShoes">
A <a href="http://shoe.com/">happy shoe</a>
</li>
<p class="myHappyShoes">Happy shoes paragraph</p>

CSS
.myHappyShoes { color: yellow; }
.myHappyShoes { color: green; }
li.myHappyShoes { color: orange; }
#happyShoe { color: red; }
li#happyShoe { color: violet; }
li#happyShoe a { color: blue; }
about CSS & web standards

http://www.w3.org/Style/CSS
how’s our speed?
email us...

[email protected]
[email protected]
next week...
file:///C:/Users/C
olin.Gourlay/Down
loads/BackToTheF
utureLogo.jpg

You might also like