CSS Basics 2019

What is CSS?

“Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.” -Wikipedia

The whole world wide web uses CSS, and is used to style web pages. Without CSS the internet would look like plain old text.

How do you apply CSS?

There are 3 ways to apply CSS.

  1. In the head tag of an HTML file
  2. In a div in line of an HTML file
  3. Create a separate file usually named main.css

There are some concepts to understand visually

CSS Selectors

The most important concept to understand about CSS is selectors. Selectors allow you to target exactly what you want to change. Here is a list of CSS Selectors.

There are so many different selectors to choose from but the most common are just the element tags already made in HTML. Also classes and id’s made within HTML are common selectors.

CSS reads from the top to bottom because of that the bottom code overrides previous changes made on the same element. However, the more specific you are with choosing a selector it will override other changes. Essentially the longest chain of events to be triggered to get to the targeted selector overrides any change for that element.

CSS Properties

Here is a great source for CSS properties it also shows you how it affect the web page visually next to the property name. The most common properties to refer back to are in regards to style text, box model, box sizing, display, and positioning elements.

CSS Units

Besides properties and selectors another concept to understand is units used to make changes in properties and selectors. The most common ones you’ll run into are PX, EM, REM, PER.

PX just stands for pixels which is used for fonts and images.

EM is relative to the font-size of the element (2em means 2 times the size of the current font). This however affects the closest parent.

REM is relative to font-size of the root element so this is based off the top line of code.

PER only affects the closet parent as well.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Up ↑

%d bloggers like this: