Scribd
Upload
8 views10 pages

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a mechanism for adding styles like fonts, colors, and layouts to web pages. CSS rules consist of selectors and declaration blocks containing property-value pairs separated by semicolons. There are three scopes for CSS - local styles applied to a single element, internal styles for an entire page, and external styles that can affect multiple pages with local having highest precedence.

Uploaded by

Jason Villa
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
8 views10 pages

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a mechanism for adding styles like fonts, colors, and layouts to web pages. CSS rules consist of selectors and declaration blocks containing property-value pairs separated by semicolons. There are three scopes for CSS - local styles applied to a single element, internal styles for an entire page, and external styles that can affect multiple pages with local having highest precedence.

Uploaded by

Jason Villa
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/ 10

Cascading Style Sheets (CSS)

What is CSS?

Cascading Style
Sheets (CSS): is a
simple mechanism for
adding style (e.g. fonts,
colors, layouts) to Web
documents.
Styles provide powerful
control over the
presentation of web
pages

Internal Style Sheet

A style sheet consists of a set of rules.


Each rule consists of one or more
selectors and a declaration block.
A declaration block consists of a list
of declarations in curly braces ({}).
Each declaration consists of a
property, a colon (:), a value, then a
semi-colon (;).

Style Sheet Syntax


Explained

selector

property

value

rule

Basic CSS Syntax

CSS Syntax
selector {property: value;}

Three Different Scopes of CSS

Local
confined to a single element (tag)

Internal
affect elements in an entire page

External
can affect multiple pages

Precedence
Local > Internal > External

Local Style Sheet

Example

<h1 style="color:white; background:orange;


font-weight:bold;">Internal Style Sheet Applied
to Header 1</h1>

Practice
1. add text-align property to make it centered
2. add border property to let it has black, 1px
thick, solid border at left, right, top, and bottom

Tip: use border: <top> <right> <bottom>


<left>; format for 4 sides; use border<side>: xx yy zz; for a particular side,
where <side> can be left, right, top or
bottom. Can apply to other similar
properties.

Internal Style Sheet

How to create?
Put <style> </style> tag between
<head> and </head> tags of your HTML
page
Use type attribute to indicate the style
sheet type, usually type=text/css
Specify a default style sheet language for
the whole document by
<meta http-equiv="Content-Style-Type"
content="text/css" />
Put your set of style sheet rules in
between <style> and </style> tags

Internal Style Sheet

Practice
Create same style in the example in the
local style sheet section, but using
internal style sheet instead.

External Style Sheet

An external style sheet is simply a textonly file that contains only CSS rules.
How to link to external style sheet?
<link href=URL of CSS File"
rel="stylesheet" type="text/css" />

Practice
Create a file called mystyle.css and do
the example in local style sheet, but as
external style sheet

You might also like