Download presentation
Presentation is loading. Please wait.
1
CSS HTML and website development
2
Learning objectives Learn how CSS is used to set the styles in web pages and websites Write CSS code to set styles, e.g. background colour of sections of the page; size, font, colour and alignment of text Learn what is meant by responsive design, and create a responsive web page Learn the main principles of good website design
3
What web page styles can you change?
4
<h1 style="text-align:center">
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">
5
Embedded styles <style> h1 {color: blue;} </style>
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>
6
CSS syntax Selector Declaration h1 {color: blue;} Property Value
7
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> SEE AMAZING SCENERY </h1> Everything that falls inside that tag or selector in the html body adopts that style
8
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>
9
The <div> tag Divide up your page using the <div> tag
Each <div> section can have its own formatting applied Content Header Navbar Container
10
Margins, borders and padding
Content Padding Border Margin
11
Responsive design Websites are viewed on different size screens
Webpages must automatically adjust to fit Set widths as percentages rather than pixels
12
What makes good web design?
13
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
14
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
15
Keep a common layout Header or Banner Links Content
Create a design that all pages can use Keep links in the same place on each page Save development time - just change the content Header or Banner Links Content
16
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?
Similar presentations
