N5 CSS

CSS
HTML is a style sheet language used for describing the presentation of a
document written in a markup language (e.g. HTML).
CSS stands for Cascading Style Sheets.

Why CSS?
HTML was intended to describe the content of a web page, not the design.
As HTML developed it allowed web designers to define design style information
for a page and so the HTML for each web page became unwieldy. Changing a
web site design involved changing the attributes on every web page.

Why CSS?
HTML was intended to describe the content of a web page, not the design.
As HTML developed it allowed web designers to define design style information
for a page and so the HTML for each web page became unwieldy. Changing a
web site design involved changing the attributes on every web page.
CSS removes the style information from the HTML page.
CSS style definitions are commonly stored in a separate file. Changes to the
style information in this file can change the style of the entire website.

Internal & External CSS
Internal CSS
With internal CSS, the internal styles are defined in the <head> of each
HTML page.
Advantage: Faster download – CSS loads with the page
Disadvantage: Each page may need to be updated if redesigning the style.
Larger file size.

Internal & External CSS
External CSS
With external CSS, the CSS is held in a separate file.
Advantage: Changing the file will update the style change across all pages in
website

CSS
CSS Rule
A CSS rule set consists of a selector and a declaration block.

CSS
In this example:
Each page will have the background colour #ffffb3
All h1 content will be red, centred
All paragraph content will be Times New Roman 18

CSS
ID Selector
It’s possible to define individual elements which to have a style specified in
CSS. To do this, use an ID Selector.
Note that ID Selectors can only be used once on any page.
CSS HTML

CSS
Class Selector
Class selectors work like ID selectors but they can be applied to many
elements on a page.
CSS HTML

CSS
External CSS
When using external CSS, each page needs to specify the name of the CSS
file being used
The <link> tag is used and should be placed within the <head> element of
the page

N5 CSS

More Related Content

What's hot

Similar to N5 CSS

More from Forrester High School

Recently uploaded

N5 CSS