Simple CSS

CSS

It makes things look pretty.

HTML tags simply describe the content of a web page. They let us know what content is meant to be. CSS solves the problem of "How do we make it look pretty?"

There are different ways to define CSS, with <style> tags, in-line style or a separate style sheet. The most common is a separate page for styles, linked to the HTML documents they will edit. Some situations may call for in-line style, but not often. It is important to note that in-line styles will always have the highest priority, meaning they will overwrite styles from the <style> tag or external style sheet.

Syntax and Selectors

Where HTML is written within < > brackets, CSS is written with a couple components:

selector { property: value }

The selector can be:

• An HTML Element, also called a Grouping Selector (like an h1 tag or nav tag or any other tag you use!)

• An ID (labeled "id" in the HTML tag)

• A Class (labeled "class" in the HTML tag)

To name a few options. Let's look at the Codepen below. Take some time to review the comments on each CSS selector and note the syntax as well. Hop between the CSS and HTML files to get a feel for how they are connected. Even better: open up the codepen and play around with it! Try adding the !important flag where it's commented and see how it changes the CSS.

If we look back at our HTML layout for our blog you can start to see where we may pull our selectors from.

The best way to learn how these work, is to experiment! Try them out by forking the codepen and making your own changes to it, or start making some changes to the CSS on our blog-in-progress. As we move along, we'll discuss what changes I am making to the blog, and cover some more in-depth CSS tricks of the trade, as they call them, from grid to flexbox for positioning our content.