Now that you’ve learned a thing or two about CSS, let’s put them into practice.

TODO -

• Add a section for CSS like that for HTML and add 4 CSS facts you picked up

• Ensure the new tags are after the last <div> tag of HTML facts and before the <p> tag

Sample html to add

<h3>CSS</h3>


<div>CSS adds style to the HTML document</div>

<div>"link" tag can be used to set the CSS file to be used</div>

<div>Child elements inherit styles from its parent</div>

<div>Different metrics like px, %, pt can be used to specify length</div>

TODO - Add the below <div> tag after the current <h1> tag

<div>Topics learnt: HTML, CSS</div>

Hmm, the new <div> also gets styled into a grey box as we have a CSS rule set for any <div> tag. How would you set CSS style for all your <div> tags other than the "Topics learnt" one?

HTML provides a class attribute to group elements. The class name can be used to apply a particular style to all the elements in that class.

TODO -

• Add a class attribute with value tile to all the <div> elements apart from the "Topics learnt" element (Reference)

• Replace the current CSS rule set for <div> elements to that for elements of the class tile by changing the CSS selector

You’ll see the styles not applied to the "Topics learnt" div if you did this correctly

You will have changed the selector from div to .tile to do this. The period (.) character tells that the selector is for an HTML class.

<!-- to add class to each of the HTML/CSS fact divs -->

<div class="tile">All HTML tags go inside the "html" element</div>

<div class="tile">"title" tag content is displayed on the browser's title bar</div>

// to replace div selector with .tile in css/styles.css

.tile {

  background-color: #999999;

  margin: 5px 0px 5px 0px;

  padding: 10px 5px;

  height: 200px;

  width: 20%;

}

Now, how would you set a CSS style for just the "Topics learnt" <div> element?

The HTML id attribute can be used to uniquely specify an HTML element.

TODO - Set the font of just the "Topics learnt" <div> element to "Courier New"

The id attribute specifies id for an element

<div id="topics-learnt">Topics learnt: HTML, CSS</div>

You will have had to add a new rule like this

#topics-learnt {

  font-family: "Courier New";

}

The id names are preceded by the # character to use it as a CSS selector.

What happens if there’s a conflicting rule for an element, i.e., the background is set to red using the element’s tag, set to gray using the element’s class and set to blue using the element’s id?

TODO - Finding selector specificity

• Add an id attribute, tile1 to the first <div> tag in the HTML facts section (which also belongs to the tile class)

• Add a CSS rule using the tag type (<div>) to set the background color to red

• Add a CSS rule using the id value to set the background color to blue

• Which of these are of higher priority ie, what color does the background display?

/* This rule is already present */

.tile {

  background-color: #999999;

  margin: 5px 0px 5px 0px;

  padding: 10px 5px;

  height: 200px;

  width: 20%;

}


div {

  background-color: red;

}

#tile1 {

  background-color: blue;

}

You’d have found that the background color set by id attribute gets displayed for the element you set an id of tile1 meaning that it’s of the highest priority among these.

VS Code also helps by displaying the selector specificity of a rule which can be used to determine the priority. Hover over the selector name to see it. Here, the rule has a specificity of (0, 1, 0). Check the same for the other two rules.

Priority of rule with selector specificity: (1, 0, 0) > (0, 1, 0) > (0, 0, 1)

Note: Remove the extra CSS rules added in the previous TODO (div and #tile1 selectors)

Let’s separate the HTML and CSS sections.

TODO -

• Wrap the complete HTML facts section (<h3> and the <div>s) in a <div> element

• Set the class attribute for the new parent <div> element to container

• Do the same for the CSS section

• For each of these new <div>s belonging to the container class

  • Add 100px padding on top

  • Add 10px margin on bottom

To summarise,

• class is useful to identify a group of same or different tag types easily and apply CSS styling for the entire group elements

  • Multiple elements can have the same class names. Eg: all the elements below belong to the class, "tile"

<div class="tile" id="tile1">All HTML tags go inside the "html" element</div>

<div class="tile">"div" tag divides content across sections</div>

<div class="tile">"b" tag makes text bold</div>

* A single element can belong to multiple classes. Distinct classes are space-separated in a single "class" HTML attribute like below

<div class="tile last-card">"b" tag makes text bold</div>

• id is useful to identify a specific element and to apply CSS styles for a single element

  • id names across the HTML document should be unique and shouldn’t repeat. Eg: Below scenario shouldn’t happen

<h1 id="topics-learnt">Learning HTML by doing!</h1>

<h1 id="topics-learnt">Happy Learning!</h1>

<div id="topics-learnt">Topics learnt: HTML, CSS</div>

* An element should contain only a single id. Eg: Below scenario shouldn’t happen

<div id="topics-learnt div-element">Topics learnt: HTML, CSS</div>

• An element can have both id and class properties

<div class="tile" id="tile1">All HTML tags go inside the "html" element</div>

Here’s the checkpoint code

• HTML

• CSS