M1D5: CSS Part 2

Linking CSS

  • Inline
  • Style tags
  • External stylesheets

Link External Stylesheets

t is a self-closing tag and requires the following three attributes:

  • href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
  • type — this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
  • rel — this attribute describes the relationship between the HTML file and the CSS file.
<div id="test" style="font-size:54px">This is HTML.</div>

Style Tags

<!-- In the HTML file, add this to the <head> tag, style tag-->
#test {
  text-transform: uppercase;


Here is the logical order of selectors from least to most weight assigned. Hierarchy, least important to most important.

  1. !important
  2. ID selectors (e.g., #example).
  3. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  4. Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).

Note on !important – Always look for a way to use specificity before even considering !important. Never use !important on site-wide CSS.

The Box Model

The difference between the padding and the margin is the location of the space based on the border. Note that not all elements have visible borders, which makes the padding and the margin confusing.

Padding – space you add inside the border, this will be the space of the element from the border.
Margin – space you add outside the border.

Content – content of the box itself, which has a height and width. This could be an image, text, or any elements.

Padding – this is the space between the box’s content and its border. The size is in addition to the content’s height and width.

Border – this is the usual border. Most contents have invisible border

border-bottom: 1px solid #5D6063;

Margin – surrounds the rest of the box. This is outside the border.

Difference between padding and margin – margin adds space around an element, padding adds space inside of an element.

Display and Positioning: Inline & Block

CSS Display Property

display: inline; //no with and height, because it just occupies the space it takes up with its text content

display: inline-block; //like inline except you can add width and height

display: block; //takes up its entire line no matter what

display: none; //nothing is displayed -- takes up no width and height from the DOM

Difference between inline and inline-block.

HTML Document

<!DOCTYPE html>
<html lang="en"> //language
    <meta charset="utf-8"> // UTF-8 is a character encoding system. It lets you represent characters as ASCII text, while still allowing for international characters, such as Chinese characters. As of the mid 2020s, UTF-8 is one of the most popular encoding systems
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> //page looks the same on all devices.
    <title>Colored Markers</title>

Leave a Reply