Accessing HTML in CSS

• CSS stands for Cascading Style Sheets. CSS is used to style HTML elements, and generally to make your websites look amazing!

• Similarly to accessing HTML in Javascript, we can access HTML in CSS using elements types, classes, and ids (and in some other ways, but this is enough for now!)

• Consider the following element:

<p id=para1 class="paraClass"> My Paragraph </p>

• To access it by its element type in CSS, we would use the following syntax:

p {
    font-size: 30px;
}

• We simply type out the element type, followed by curly brackets, in which we put all the styling that we want. The styling that we apply to it (in this case, changing the font size), will apply to every element of that type.

• CSS properties are in property and value pairs, with a colon inbetween, and a semi-colon between each pair. Properties are pre-defined, and the format of values changes depending on the type of property.

• To access our element by its class, we would use the following syntax:

  .paraClass {
  color: blue;
  background-color: green;
  }
  

• We use a period to access classes. Again, this CSS will style any element in the paraClass class.

• To access this element by its id, we would use the following syntax:

#para1 {
  color: red;
  font-size: 10vh
}

• We use a hash symbol to access the id. This will style only the specific element that has this id. An id styling will always take precedence over a class or element. This is useful, becuase you can use a class to style the basic properties of elements that you want to look the same, and id to make more specific stylings.

• The codepen example shows a few different elements with ids and classes to illustrate the specificity of different stylings.

Accessing the Body of the Webpage

• We can apply stylings to the whole webpage by accessing the body element in CSS. Because there is only one body of the webpage, we access the body just with the word “body”, we don’t need to use classes or ids:

body {
    background-color: pink;
    font-family: Arial;
}

• This will change the background color and font of the whole document.

Exercise 5.1