Today we’re going to take the HTML elements that we coded yesterday in codepen and style them! 

This video is taken from our Website in a Weekend online course, so please ignore mentions to other lessons and just focus on the content in this one! 

As elements are added to a web page, they may be styled using CSS. A selector designates exactly which element or elements within our HTML to target and apply styles to (such as color, size, and position). The most basic form of selectors target the type of element, such as <h1>or <p>.

CSS is made up of selectors, properties and values.

selector { property: value; }

Within CSS, selectors are followed with curly brackets, { }, which encompass the styles to be applied to the selected element. Below is an example of a p selector that would apply the styles listed within the curly brackets to all paragraphs on the page.

p {...}

Once an element is selected, a property determines the styles that will be applied to that element. Property names fall after a selector, within the curly brackets, { }, and immediately preceding a colon, :. There are numerous properties we can use, such as background, color, font-size, height, and width.

Here we are selecting all <p> elements and setting the value of the (font) color property to be blue and the value of the font-size property to be 16 pixels (px).

p {
  color: blue;
  font-size: 16px;
}

Each property has particular units of values that it will accept. For example, the value or a color property can be a common color name (like red, blue or green) or a hex code (#FEFEFE) or an rgb value ( rgb(60,60,60) ).

It is a common practice to indent property and value pairs within the curly brackets. As with HTML, these indentations help keep our code organized and legible.

CSS Cheat Sheet

Examples	Notes
background-color: red; background-color: #FCF7DE; background-color: rgb(60,60,65);	You can use simple color names, hex codes or rgb values
color: #FF9AA2;	As with background colors, you can use names, hex codes or rgb values.
padding: 2.5rem; padding: 5%; margin: 10px; margin-bottom: 1rem;	Padding and margin can be specified in lots of different units, most commonly pixels, rems, and %.  You can apply them on all sides by just using the padding or margin property or target specific sides with the properties like ‘padding-left’ or ‘margin-bottom’
font-size: 16px; font-size: 2rem;	Font sizes are commonly set it rems or pixels.
text-align: left; text-align: center; text-align: right;	Text alignment can be applied to individual elements or the whole page (the body)

Universal Selector & CSS Reset

This selector selects everything on the page, and we use it to override the default browser styles. 

* {
  padding: 0;
  margin: 0;
}

Multiple Selector 

This is an advanced selector that wasn’t covered in the video but might be helpful for this activity. You can use the multiple selector by putting a comma in between each element name and it will then select multiple elements and style them all together. 

h1, h2, h3 {
  color: red;
}

This for example would select all the h1, h2 and h3 elements and make them red. 

 

Activity Styling with CSS

This is what we’ll be creating. If you get stuck, you can have a look at my codepen here. 

1. Create 6 html element (for example, h1 to h5 and then a paragraph)

2. Use the universal selector and CSS reset to reset your browser styles 
    

   * {
     margin: 0;
     padding: 0;
   }
   

3. Give the body element some padding and a background color

   body {
     padding: 5%;
     background-color: #FCF7DE;
   }
   

4. Let’s use a multiple selector to select all the headings and paragraphs and give them the same padding and margin.

   h1, h2, h3, h4, h5, p {
     padding: 1rem;
     margin: 0.5rem;
   }
   

5. Now let’s style each element one by one

   h1 {
     color: #ff6874;
     background-color: #FF9AA2;
     font-size: 2.5rem;
   }
   
   h2 {
     color: #ff877f;
     background-color:#FFB7B2;
     font-size: 2.2rem;
   }
   

Hint: Colors

You are welcome to use your own colors for this challenge but if you want it to look the same as the example the color codes are:

H1   #ff6874 &  #FF9AA2

H2 #ff877f  & #FFB7B2

H3 #ffbc8e & #FFDAC1

H4   #c1df90 & #edf6df 

H5   #79d9b7  & #c9f0e2

P #8f9dd5  & #C7CEEA

Printable CSS Cheat Sheet - Download here