Select Lesson
Cascading Style Sheets
5 min
3 Ways to add CSS
5 min
The parts of a CSS rule
5 min
Formatting CSS
5 min
Add background images background-image: url( );
3 min
CSS color table
5 min
Lesson 11. Introduction to CSS
15 min
Lesson 12. Common CSS Mistakes
15 min
CSS Introduction Quiz
5 min
CSS Intro HTML/CSS
Level OneCascading Style Sheets
5 min
3 Ways to add CSS
5 min
The parts of a CSS rule
5 min
Formatting CSS
5 min
Add background images background-image: url( );
3 min
CSS color table
5 min
Lesson 11. Introduction to CSS
15 min
Lesson 12. Common CSS Mistakes
15 min
CSS Introduction Quiz
5 min
60 min
CSS Introduction
Cascade style sheet (CSS) is another markup language used for styling the webpage.
Concepts
Cascading Style Sheets
CSS is a different markup to HTML and they work together to create your webpage.
You select HTML elements to target and style them.
Cascading means the styles of outer elements apply to the styles of inner elements (nesting) -What happens to the parent element will happen to the child element.
For example, if we have a page full of elements and want everything inside the header section to be a different color to the rest of the page, we can select header
and any elements inside it will also be colored.
Style means all visual elements of a page, like:
C O L O R
position
size
borders
Concepts
3 Ways to add CSS
There are 3 ways to add CSS to your page: External, Internal and Inline style-sheet.
1. External - style-sheet is added with this head element;
<link rel="stylesheet" href="fancyname.css" type="text/css">
This is a separate file declaring the styles wanted on your website and linked to all HTML pages.
2. Internal - adds CSS at top of webpage between the tags;
<style></style>
3. Inline - CSS is written inside start tag by adding a style attribute;
<h1 style="color:steelBlue;">Heading</h1>
Concepts
The parts of a CSS rule
Below is a CSS rule:
1. A CSS rule contains a selector and declarations.
2. A selector is the html tag/s we want to change.
In this example it is h1 headings. One CSS rule affects all text inside h1 elements.
3. The first property is called color.
4. The value is set to blue.
5. There are 4 declarations in the declaration block of this example.
Each declaration has a property and one (or more) values
The CSSS will apply to all the h1 headings on the webpage. They will change color from black to blue.
Concepts
Formatting CSS
A declaration has one property and should be on a new line. We end a property with a colon :
and we end a declaration after the value/s with a semicolon ;
.
Like HTML, you need to use extra whitespace and add line breaks to make it more readable.
Instead of this:
body { background-color: gray; color: white; font-family: Helvetica, Verdana, Arial, sans-serif; }
The formatting should look like this:
body {
background-color: gray;
color: white;
font-family: Helvetica, Verdana, Arial, sans-serif;
}
Our first selector —body{}
body
is a selector that applies styles to the entire page, and all of its content.
All the elements in the page will change to match your style properties.
body {
font-family: sans-serif;
}
Our first style —background-color:
background-color
is a property that can be applied to any tag, such as the body.
Changing font color color:
Now the text is a bit hard to read on the blue background. Because the <body>
tag is the highest possible visible HTML tag, the body selector will also allow us to target the font color on the entire page.
Concepts
Add background images background-image: url( );
You can also add background images to your web page (background-image: url(/images/textures/light2.png);
)
with the property background-image:
and the value url(link to image file);
For example:
Remember: All the text on a web page is in the body
section.
You can use the html{}
selector in the same way as EVERYTHING on a webpage is nested inside this element.
Concepts
CSS color table
Here is a link to the the wiki page.
If you have time, play around with some colors.
You can also find them under "tools" in the CA lessons.
indianRed | orange | mediumPurple | forestGreen | cadetBlue | wheat |
lightCoral | gold | blueViolet | green | steelBlue | burlyWood |
salmon | yellow | darkViolet | darkgreen | lightSteelBlue | tan |
darkSalmon | lightYellow | darkOrchid | yellowGreen | powderBlue | rosyBrown |
lightSalmon | lemonChiffon | darkMagenta | oliveDrab | lightBlue | sandyBrown |
red | lightGoldenRodYellow | purple | olive | skyBlue | goldenRod |
crimson | papayaWhip | indigo | darkOliveGreen | lightSkyBlue | darkGoldenrod |
firebrick | moccasin | darkSlateBlue | mediumAquamarine | deepSkyBlue | peru |
darkRed | peachPuff | slateBlue | darkSeaGreen | dodgerBlue | chocolate |
pink | paleGoldenRod | mediumSlateBlue | lightSeaGreen | cornflowerBlue | saddleBrown |
lightPink | khaki | greenYellow | darkCyan | royalBlue | sienna |
hotPink | darkKhaki | chartreuse | teal | blue | brown |
deepPink | lavender | lawnGreen | aqua | mediumBlue | maroon |
mediumVioletRed | thistle | lime | cyan | darkBlue | white |
paleVioletRed | plum | limeGreen | lightCyan | navy | snow |
lightSalmon | violet | paleGreen | paleTurquoise | midnightBlue | honeydew |
coral | orchid | lightGreen | aquamarine | cornsilk | mintCream |
tomato | fuchsia | springGreen | turquoise | blanchedAlmond | azure |
orangeRed | magenta | mediumSeaGreen | mediumTurquoise | bisque | aliceBlue |
darkOrange | mediumOrchid | seaGreen | darkTurquoise | navajoWhite | ghostWhite |
whiteSmoke | seashell | beige | oldLace | floralWhite | ivory |
linen | lavenderBlush | mistyRose | gainsboro | lightGray | silver |
darkGray | gray | dimGray | lightSlateGray | slateGray | darkSlateGray |
black |
HTML/CSS 1 Lesson
Lesson 11. Introduction to CSS
Lesson Outline
task 0: Introduction to CSS
task 1: Remove external CSS, <link>
task 2: Add internal CSS, <style>
task 3: CSS rules
task 4: CSS selectors
task 5: Multiple selectors
HTML/CSS 1 Lesson
Lesson 12. Common CSS Mistakes
Lesson Outline
task 0: Common CSS Mistakes
task 1: Mispelled or incorrect selector names
task 2: Lowercase and code format
task 3: Layout CSS rules nicely
task 4: Format property & style the page
task 5: Format property name & tidy code
Code Avengers Quiz
CSS Introduction Quiz
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F