André Restivo

CSS Exercises

1. Online Newspaper Design

1.1 Main Style

We will start by designing the main components of the main page without worrying about the positioning of any elements (style.css). The final result should be this.

Take notice that:

Some helper values:

Info: Lora and Poppins are not web-safe fonts; most people won't have them installed in their browsers. But we can still use them by adding this line into our CSS file thanks to Google Fonts
@import url('https://fonts.googleapis.com/css?family=Lora:400,700|Poppins:300,200');
Info: You may have noticed that the nav section contains an input and a label. These are just to be used in exercise 1.3. You can start by hiding them using CSS for now (with 'display: none').

What did I learn:

1.2 Positioning

We will position the elements in their proper places (layout.css). The final result should be this.

Some helper values:

Tip: Use a flexbox for the menu and a grid to position the elements on the page.

What did I learn:

1.3 Responsive Design

Now we make the design responsive by establishing two breaking points (responsive.css):

Some helper values:

Tip: Start by making the menu without any animations (using display to hide and show the menu items). After that, try using transitions to change the height of each menu item instead.

What did I learn:

1.4 Comments Design

Add CSS rules (comments.css) to create the design for the comment section that can be seen on the item.html page. The final result should be this.

Some helper values:

Tip: Use a grid for the comment form design.

What did I learn:

1.5 Register Design

Add CSS rules (register.css) to create the design for the register and login forms that can be seen in the register.html and login.html pages. The final result should be this.

Make sure that the form fills the content area in smaller screens like this.

What did I learn:

2. No Flexbox/Grid Design

Without using the flexbox and grid CSS layouts, try to recreate some designs.

Extra: Now try the same exercises, this time using flexbox and grid layouts.

What did I learn:

3. Cascading

Consider the following HTML code:

<section id="foo">
  <ul class="bar">
    <li class="first"><a href="#">A</a></li>
    <li class="second"><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>
  </ul>
</section>

And the following CSS rules:

section ul li               { color : green }    /*R1*/
.bar .second                { color : red }      /*R2*/
li a                        { color : cyan }     /*R3*/
section li:first-child ~ li { color : yellow }   /*R4*/
#foo .bar li :first-child   { color : inherit }  /*R5*/
.bar li                     { color : magenta }  /*R6*/
During this exercise, don't try this code in the browser until the end.

3.1 Specificity

  1. Without using a specificity calculator, calculate the specificity of each rule.
  2. In the end, verify if you got it right.

3.2 Rules

What rules apply to each of the elements:

  1. section with id foo:
  2. ul with class bar:
  3. first list item:
  4. second list item:
  5. third list item:
  6. fourth list item:

3.3 Selected Rule

What is the rule with the highest specificity for each element:

  1. section with id foo:
  2. ul with class bar:
  3. first list item:
  4. second list item:
  5. third list item:
  6. fourth list item:
  7. first link:
  8. second link:
  9. third link:
  10. fourth link:

3.4 Color Value

What is the color value (including inherit) assigned to each element:

  1. section with id foo:
  2. ul with class bar:
  3. first list item:
  4. second list item:
  5. third list item:
  6. fourth list item:
  7. first link:
  8. second link:
  9. third link:
  10. fourth link:

3.5 Final Color

What is the final color value presented in the browser:

  1. first link:
  2. second link:
  3. third link:
  4. fourth link:

4. Extra

Let's continue exercise 5. Extra:

  1. Pick a page from a website you use a lot.
  2. Without looking at its HTML code, try writing your own version using good HTML semantics.
  3. Validate the HTML code.
  4. Using CSS, create a design for that page.
  5. Make sure the design works in devices of different sizes.
  6. Validate your CSS code.