Share:
Take Concept 1 Quiz »
Intro to CSS
Chapter
-
Chapter 1
To begin learning CSS, we will start off with giving an understanding of Selectors. Type selectors, ID selectors, Class selectors, just to name a few. These are important for picking out what on a page we want to apply a style to.
Estimated time: ~27 Minutes -
Chapter 2
In this chapter, we will look at what the Cascade in CSS stands for. This will cover topics such as inheritance and specificity. An understanding of these concepts allows a designer to more effectively create styles and write less code.
Estimated time: ~19 Minutes -
Chapter 3
In this middle chapter, we will take time to introduce a good portion of the tools at a designer's disposal when styling content with CSS. We will primarily go over styling text, colors, and backgrounds.
Estimated time: ~32 Minutes -
Chapter 4
In this chapter, we will exert energy to address the matter of space. Space is important stuff; Most of the universe is made up of it, and so is most of your page. In order for elements to sit on the page where you want them, you must be familiar with concepts such as margins, padding, borders, and dimensions.
Estimated time: ~17 Minutes -
Chapter 5
Finally, learn how to position elements in the page, and master the crazy float property of elements.
Estimated time: ~23 Minutes -
Locked
You must complete all chapters before taking the course exam.
Concept
-
1
Concept 1
In this 1st video from Programming Videos, we see how boxes and elements in HTML are given their outline. Borders are very useful for separating content, or indicating a break in your page. You will see them used for widgets, navigation, or lists.
Estimated time: ~2 Minutes -
2
Concept 2
In this 2nd video from Programming Videos, we quickly go over the difference between margins and padding with regards to HTML elements. The box-model describes how browsers read HTML content and separate it visually.
Estimated time: ~2 Minutes -
3
Concept 3
In this 3rd video from Programming Videos, we see how dimensions are handled, like width and height, of your elements.
Estimated time: ~2 Minutes -
4
Concept 4
Here is a demonstration of inline versus block level elements. The creator of this video catches their mistake of adding a "position" to the display property. The 'none' value and visibility options do exactly what you think, by hiding the entire element from the page.
Estimated time: ~4 Minutes -
5
Concept 5
This tutorial steps the user through a number of different designs for a box element on a page. Applying our knowledge of margins, padding, borders, and backgrounds to get whatever look and feel we need.
Estimated time: ~5 Minutes -
Test
Chapter 4 Test
Take the chapter 4 test and unlock the Box Model badge.
Concept 1: The Web Has No Borders
In this 1st video from Programming Videos, we see how boxes and elements in HTML are given their outline. Borders are very useful for separating content, or indicating a break in your page. You will see them used for widgets, navigation, or lists.
edit
You are making progress towards completing chapter 4 and unlocking the Box Model Badge
This badge is worth: 50 Points
Ask a Question
You must be logged in to post or rate a comment.
Questions & Answers
No one has said anything yet!
Start the discussion by asking a question.
Quiz Questions
Concept 1: The Web Has No Borders
- With the declaration "border-color: red blue aqua lime;" one can expect the left side of an element to be what color?
- With the declaration "border-color: red blue aqua;" one can expect the left side of an element to be what color?