CSS
HTML and Website
Development
HTML and Website Development
L2 CSS
Learning Objective
• Understand how CSS is used to set the styles in web
pages and websites
• Keywords: CSS, responsive, embedded, syntax
• Do Now: How would you keep the look of a website
consistent?
HTML and Website Development
I Do L2 CSS
CSS (Cascading Style Sheets)
• HTML defines the structure and content of
your web page
• CSS defines the style and layout of web pages
• CSS can be used to change the style of a whole
website, one web page or a single occurrence
of an element, e.g.
<h1 style="text-align:center">
HTML and Website Development
I Do L2 CSS
Embedded styles
• Style declarations are placed in the <head>
section of a web page, between new <style>
</style> tags
• To change the heading colour, for example:
<style>
h1 {color: blue;}
</style
HTML and Website Development
I Do L2 CSS
CSS Syntax
Selector Declaration
h1 {color: blue;}
Property Value
HTML and Website Development
I Do L2 CSS
Adding CSS to a web page
• Define the style at the top between the <style> tags
<style>
h1 {color:blue; text-
align:center}
</style>
</head>
<body>
<h1>
……………………………..
</h1>
• Everything that falls inside that tag or selector in
the html body adopts that style
HTML and Website Development
I Do L2 CSS
Change the style of links
• Add CSS to apply styles to the <a> tag:
• Test your code!
<style>
h1 {color: ADD A COLOUR HERE; font-size:
24pt;}
a:link {color: INSERT COLOUR HERE;}
a:visited {color: INSERT COLOUR HERE;}
a:hover {color: INSERT COLOUR HERE;}
a:active {color: INSERT COLOUR HERE;}
</style>
HTML and Website Development
I Do L2 CSS
The <div> tag
• Divide up your page using the <div> tag
• Each <div> section can have its own
formatting applied
Header
Container
Content
Navbar
HTML and Website Development
I Do L2 CSS
Margins, Borders and Padding
Margin
Border
Padding
Content
HTML and Website Development
I Do L2 CSS
Responsive Design
• Websites are viewed on different size screens
• Webpages must automatically adjust to fit
• Set widths as percentages rather than pixels
HTML and Website Development
We Do L2 CSS
What makes
good web
design?
HTML and Website Development
We Do L2 CSS
Common Web Design Features
• Limited colour palette
– Maximum 3 colours (+ black & white)
• Limited font selection
– Maximum 3 different font styles
• Common interface across all pages
– All pages in a site look similar with a similar layout
• Navigation bar
– Helps to find your way around the site
HTML and Website Development
We Do L2 CSS
Limit your Colour Palette
• Keep to just 3 Colours (+
Black & White)
• Use either:
– colours next to each
other on the Colour
Wheel
– Colours opposite each
other
– Three shades of the
same colour
HTML and Website Development
We Do L2 CSS
Keep a Common Layout
• Create a design that
all pages can use
Header or Banner
• Keep links in the
same place on each
page
Links Content
• Save development
time - just change the
content
HTML and Website Development
You Do L2 CSS
Consider your Audience and Purpose
• Define your audience clearly
– Young children learning to ride a bike
– Elderly people who have difficulty walking
– Parents who enjoy travel with young children
– Teenage boys interested in cars and racing
• What is the purpose of your website?
– To inform?
– To persuade? (maybe to buy?)
– To entertain?
• How will this affect your design?
