Day 2: CSS Basics

CSS Selectors

For us to be able to add styling to our web pages we need to be able to select that element first. There are a few ways to select our HTML elements, starting with the element selector, where we simply select the element by its tag name. If we want to group certain elements together and(&&) / or(||) refer to certain elements by another name we can give them a class and select them by class. If we want to be more specific we can give unique elements an id.

Element, class, and id selectors -featuring some nice colors.

File Paths & Linking Pages

To be able to link to another page or file on our website we need to pass the path to this page or file. It is best practice to use a relative path when linking pages that way your project will work the same way on different machines. We can link a CSS file to an HTML file so that the browser will know which files it should apply certain styles. We may also want to link to another website on the internet or have a link to visit another page of our multipage website!

Some different link tags.

Writing CSS

Once we link our pages and select our elements, we need to provide the styling rules in CSS. After the selector, we declare the property we want to change and the value for that property. The property and value are separated by a colon and the entire line is finished with a semicolon. CSS rules will be applied based on specificity with element selectors being overwritten by class and id selectors.

Some CSS rules.

The output.

Closing

CSS allows us to make our HTML pages look nice and make the user experience much more pleasant for people. Developing my CSS skills will be foundational to success as a front-end developer! Back at it again tomorrow ✌️.