Getting to d3.js: Intermediate CSS

Written By Amber Reed

Continuing on with CSS, the next stop in this journey is a course on Intermediate CSS.

My first lesson was on why the C in CSS stands for Cascading. This all basically comes down the hierarchy of how the rules are applied. The four broad categories that determine the overall level of importance are:

  • position

  • specificity

  • type, and

  • importance

Check out this resource for more detailed information on how this works.

The mini project from this section was to take some already written HTML and CSS and write a few more lines of CSS to get the file to match a goal image that had certain color texts, backgrounds, and borders. The first thing I did was review the HTML to try and point out which parts I believed to be of the highest level of importance to then apply the CSS rules to, then I updated my CSS style sheet, here was my CSS output.

This resulted in the following output, desired to complete this mini-challenge

The next lesson was on combining CSS Selectors.

This lesson took the one from above a step further in explaining how you can get very specific to the elements you are wanting to apply your style.

The different ways to combine CSS selectors reviewed were:

  • group rule

    • this is done with a comma and it works by selecting both selectors and applying the same style

      • selector, selector {color: blue} - the result would be both selectors are blue

  • child

    • this is done with the use of two selectors, the first selector is the parent selector and the second selector is the child selector

      • selector > selector {color:blue} - the result of this would be where the child selector exists inside the parent selector, it would be blue

  • descendant

    • this one uses a single space, and it means that the style of selector after the space (descendant) is going to be applied as long as it has an ancestor that matches the first selector (ancestor).

      • selector selector {color: blue}

Below is a result of choosing the correct combination of selector to get this as the desired output:

CSS Positioning

This next lesson was on CSS positioning and four types of positioning were reviewed:

  • static

    • this is the HTML default

  • relative

    • most common, the item is positioned relative to the default position

  • absolute

    • relative to the nearest ancestor, OR if no ancestor is present, then it is relative to the top left corner of the webpage

  • fixed

    • the item is positioned relative to the top left corner of the browser

To the right is my output from a quick challenge, creating two shapes and positioning one shape (the circle) relative to the other.

Final Project: CSS Flag

This project was to use all of the things learned in the Intermediate section with the goal of creating the flag of Laos, with the text “The Flag of Laos” over top, with ‘The Flag’ and the top and center and ‘of Laos’ centered in the white circle of the flag.

Because the HTML provided was very barebones, this one was a little challenging in remembering the specificity rules. In real practice, you would probably use more ids and classes to define things, but we got there eventually!

And with that, Intermediate CSS is completed!

Up next: Advanced CSS


Amber Reed
Previous

Getting to d3.js: Advanced CSS
Next

Getting to d3.js: CSS