introduction to css

Introduction to CSSMr. Smyth

Stoneham High School

HS7535 – Video Game Web Design

CSS – Cascading Style Sheets

• Language used to describe appearance and formatting of your HTML

• “Stylesheet” is the file describing how the HTML file should look

• “Cascading” means that you can apply formatting when more than one style applies

Three Ways to Incorporate CSS

• External Style Sheet – as a separate file referenced via <link> tag within the <head> tags

• Internal Style Sheet – within the <head> tags

• Inline Styling – within tags as attributes

Direction of the Cascade

• Inline Styling overrides an Internal Stylesheet

• Internal Stylesheet overrides an External Stylesheet

•Cascading allows you to specify global settings while making local changes as needed or desired

1st Method: Examples of Inline Styling•<p style=“color: red”>Red font color

here</p>

•<h1 style=“text-align: center”>Centered Header</h1>

• Limitations: formatting changes have to be made for each element

2nd Method: Example of Internal Stylesheet

3rd Method: External Stylesheet• Separate file with CSS code

• File is named with .css extension: somename.css

•Must have the following in between <head> tags:

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

• Stylesheet name is often simply stylesheet.css

•Advantage: changes made to .css file apply to entire website

CSS Syntax

CSS Syntax Variant

introduction to css

Education