Scribd
Upload
5 views

Web L2 CSS

Uploaded by

Andrea Omotosho
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

Web L2 CSS

Uploaded by

Andrea Omotosho
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

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?

You might also like