html overview - cascading style sheets (css). before we begin make a copy of one of your html file...

HTML Overview -HTML Overview -Cascading Style Cascading Style

Sheets (CSS)Sheets (CSS)

Before We BeginBefore We Begin

Make a copy of one of your HTML file Make a copy of one of your HTML file you have previously createdyou have previously created Do this in ‘My Computer’ Do this in ‘My Computer’ Use copy/paste to copy the fileUse copy/paste to copy the file Rename the copy to ‘stylesheets.html’Rename the copy to ‘stylesheets.html’ Remove everything between the <body> Remove everything between the <body>

and </body> tagsand </body> tags Remove any formattingRemove any formatting

Before We BeginBefore We Begin

Add some basic HTML to your fileAdd some basic HTML to your file<h1>Simple stylesheet demo</h1><h1>Simple stylesheet demo</h1>

<h2>By your name here</h2><h2>By your name here</h2>

This is some unmarked textThis is some unmarked text

<br><br>

<p>This text is a paragraph</p><p>This text is a paragraph</p>

<p>This is my second paragraph</p><p>This is my second paragraph</p>

<p>This is my third paragraph</p><p>This is my third paragraph</p>

<p>This is my fourth paragraph</p><p>This is my fourth paragraph</p>

Why CSS?Why CSS?

HTML was originally intended to HTML was originally intended to define content and structure, not define content and structure, not formattingformatting

Format tags caused problemsFormat tags caused problems Must apply format to every tagMust apply format to every tag If changes are needed, you must change If changes are needed, you must change

it EVERYWHEREit EVERYWHERE

Why CSS?Why CSS?

CSS was created to take over the CSS was created to take over the formatting and display settings formatting and display settings

It ‘centralizes’ web page formattingIt ‘centralizes’ web page formatting You can move all formatting to a single You can move all formatting to a single

location or filelocation or file

CSS SyntaxCSS Syntax

Individual statements are called rulesIndividual statements are called rules Rules have 2 partsRules have 2 parts

Selector – identifies what you want to Selector – identifies what you want to style (usually an HTML element)style (usually an HTML element)

Declaration(s) – property:value pairs Declaration(s) – property:value pairs (like we did using the STYLE attribute)(like we did using the STYLE attribute)Each pair is a declarationEach pair is a declarationYou can have more than one (a group)You can have more than one (a group)


For Declarations and Declaration For Declarations and Declaration Groups…Groups… Properties and values are separated by Properties and values are separated by

a colon :a colon : Each declaration ends with a semicolon Each declaration ends with a semicolon

;; Declaration groups are enclosed in curly Declaration groups are enclosed in curly

braces {}braces {}


ExampleExampleh1 {color:blue; font-size:12px;}h1 {color:blue; font-size:12px;}

Selector Declaration Declaration

Declaration Group


You can also format like this for You can also format like this for better readabilitybetter readability

h1h1

{{

color:blue;color:blue;

font-size:12px;font-size:12px;

}}

Assigning The StyleAssigning The Style

The Selector can be one of 4 things:The Selector can be one of 4 things: HTML tag – the style will apply to all HTML tag – the style will apply to all

instances of that taginstances of that tag An ID – the style will apply to all tags An ID – the style will apply to all tags

with the same ID= attributewith the same ID= attribute A Class – the style will apply to all tags A Class – the style will apply to all tags

with the same CLASS= attributewith the same CLASS= attribute Tag.Class – the style will apply to all Tag.Class – the style will apply to all

instances of that tag and classinstances of that tag and class

Assigning The Style - exampleAssigning The Style - example

p {color:blue}p {color:blue}Which text will be turned blue below?Which text will be turned blue below?

<p>paragraph 1</p><p>paragraph 1</p><p class=“p2”>paragraph2</p><p class=“p2”>paragraph2</p><p class=“cc”>paragraph3</p><p class=“cc”>paragraph3</p><h1 class=“cc”>header</h1><h1 class=“cc”>header</h1>


h1 {color:blue}h1 {color:blue}Which text will be turned blue below?Which text will be turned blue below?



.p2 {color:blue}.p2 {color:blue}Which text will be turned blue below?Which text will be turned blue below?



.cc {color:blue}.cc {color:blue}Which text will be turned blue below?Which text will be turned blue below?



p.cc {color:blue}p.cc {color:blue}Which text will be turned blue below?Which text will be turned blue below?


Where To Put CSSWhere To Put CSS

Inline style using STYLE attribute that Inline style using STYLE attribute that we’ve already seenwe’ve already seen Not a good option since you’re putting it Not a good option since you’re putting it

on every tagon every tag Winds up being similar to HTML Winds up being similar to HTML

formattingformatting


Inline style exampleInline style example In your 4 paragraphs, make this change In your 4 paragraphs, make this change

(use copy/paste to make it easier)(use copy/paste to make it easier)<p<p style=“font-family:arial; style=“font-family:arial; font-size:24”font-size:24”>>

Next, change the font size to 28. How Next, change the font size to 28. How many changes did you have to make?many changes did you have to make?


Internal style sheetInternal style sheet Use for a unique single documentUse for a unique single document Goes in the HEAD sectionGoes in the HEAD section Uses STYLE tag and TYPE attributeUses STYLE tag and TYPE attribute

<head><head>

<style type=“text/css”><style type=“text/css”>

. . . rules go here. . . rules go here

</style></style>

</head></head>


Internal style sheet exampleInternal style sheet example In your 4 paragraphs, completely In your 4 paragraphs, completely

remove the style attributeremove the style attribute Add the following to the HEAD sectionAdd the following to the HEAD section<style type=“text/css”><style type=“text/css”>

p {font-family:arial; font-p {font-family:arial; font-size:24}size:24}

</style></style>


Internal style sheet example (cont.)Internal style sheet example (cont.) Next, change the font size to 36. How Next, change the font size to 36. How

many changes did you make? How many changes did you make? How many paragraphs did it affect?many paragraphs did it affect?


External style sheetExternal style sheet Can be applied to many pagesCan be applied to many pages You can change the look of all the pages You can change the look of all the pages

by changing one fileby changing one file Rules go in a separate text file with Rules go in a separate text file with

a .css extensiona .css extension Each page links to the css file by using Each page links to the css file by using

the LINK tag in the HEAD section the LINK tag in the HEAD section


External style sheet (cont.)External style sheet (cont.) For example, assume you create a rules For example, assume you create a rules

file called myrules.css file called myrules.css To use it, web pages must include:To use it, web pages must include:

<head><head>

<link rel=“stylesheet” type=“text/css” <link rel=“stylesheet” type=“text/css” href=“myrules.css” />href=“myrules.css” />

</head></head>


External style sheet exampleExternal style sheet example Make a copy of your stylesheets.html Make a copy of your stylesheets.html

file and call it extstylesheets.htmlfile and call it extstylesheets.html Open it and remove the entire style tagOpen it and remove the entire style tag Put this in the HEAD sectionPut this in the HEAD section<link rel="stylesheet" <link rel="stylesheet" type="text/css" href="myrules.css"> type="text/css" href="myrules.css">


External style sheet exampleExternal style sheet example Using Notepad, create a new empty file Using Notepad, create a new empty file

and name it myrules.css (you’ll have to and name it myrules.css (you’ll have to specify ‘all files’ with this one, too)specify ‘all files’ with this one, too)

Type this in the empty file Type this in the empty file p {font-family:arial; font-size:42}p {font-family:arial; font-size:42}

h1 {color:red;}h1 {color:red;}


If you use more than one type of If you use more than one type of CSS, rules are applied in this order:CSS, rules are applied in this order:

1.1. Browser default Browser default 2.2. External style sheet External style sheet 3.3. Internal style sheet (in the head section) Internal style sheet (in the head section) 4.4. Inline style (inside an HTML element) Inline style (inside an HTML element)

The same style is overlayed, so the The same style is overlayed, so the higher the number, the higher the higher the number, the higher the priority (WITH EXCEPTIONS)priority (WITH EXCEPTIONS)


Multiple styles exampleMultiple styles example In your extstylesheets file, enter this In your extstylesheets file, enter this

AFTER the link tagAFTER the link tag <style type=“text/css”><style type=“text/css”>h1 {color:blue;}h1 {color:blue;}</style></style>

What color is the level 1 heading?What color is the level 1 heading? A Style attribute would trump bothA Style attribute would trump both

html overview - cascading style sheets (css). before we begin make a copy of one of your html file...

Documents