Learn CSS
CSS - Cascading Style Sheets.
HTML focuses entirely on the content of a web page...
Whereas CSS focuses on the design or style of the website. It can be used to change many different things from background color to font.
Whereas CSS focuses on the design or style of the website. It can be used to change many different things from background color to font.
Getting Started
|
Task: Open up your waluigi page and change the colours.
At the top of the page enter the following code: <style> html { background-color: #551a8b; color: white; } </style> Anything inside the style tags is CSS Task 2: Change the colour of the hyper links to white. If we want to change the font colour of the hyper links then we need to use a { } a:visited { } Task 3: Update the Wario page with these two colours: #FDD50B #0D8129 |
|
More CSS Techniques - Sections
|
We can now make changes to particular sections of our website
For example we can add <header> tags to the top of the code: 
Then, edit it in CSS
This will simply change the background and font for the header section.
Task: Make the Waluigi page look like the picture on the right.
You will need this: 
Task 2: Make the hyper links look like buttons by adding:
Borders Background Colours Text Aligns Rounded Corners Padding Text Decoration Task 3: Make the Wario Page, look like the picture on the right
use: #f5e17d Task 4: Make the links change colour when the mouse hovers over them by using a:hover {} |
Extra for Experts: Only apply the button effect to the top two hyper links...
Do this by moving by adding a class to the buttons: <a class="button" href="index.html">Waluigi</a> Then setting html for that class: .button { } 
|
Standards for CSS
Read through the CSS formatting rules found here:
https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules
Fix up your waluigi code as per the rules (important for Merit and Excellence)
https://google.github.io/styleguide/htmlcssguide.html#CSS_Formatting_Rules
Fix up your waluigi code as per the rules (important for Merit and Excellence)
Inquiry - W3 Schools
|
Task - Make the downloaded text look like the picture on the right.
You will need to use the following google fonts:
EXO 2, Dancing Script, Baskervville font-family: 'Dancing Script', cursive; font-family: 'Baskervville', serif; font-family: 'Exo 2', sans-serif; |
| ||
External CSS
|
Imagine creating 50 profiles like the previous one.
What would happen if you were asked to change the background colour for all of them. You would have to go by each page and change the CSS. That is 50 changes... What if they didn't like the colour you choose? External CSS puts our CSS in one location so that we don't have to constantly update it. Task 1: Download the other two profiles and attach all three profiles to an external CSS sheet Task 2: Create two CSS sheets for both Wario and Waluigi, change the styling around. |
Steps
1.) Create a seperate file called style.css in brackets 2.) Copy all the CSS lines from inbetween <style> </style> into it Do not copy the style tags 3.) Create this as a link <link rel="stylesheet" type="text/css" href="style.css"> href refers to the style sheet. 4.) Repeat step 3 for the other two profiles.
| ||||||
