twitter.svg

Twitter

codepen.svg

Codepen

github.svg

GitHub

linkedin.svg

LinkedIn

email.svg

Email Me

mast-logo.svg

Mastodon

# What is CSS?
CSS (Cascading Style Sheets) is used to modify the style and layout of a webpage. While HTML may be considered the bones of a website, CSS could analogically be considered the skin.

Every single website you see that doesn’t look like left-aligned black Times New Roman text on a white background with blue underlined links, has indeed been styled with CSS. 

# CSS Syntax
CSS is rule based and because of this, it allows you to specify specific styles to be applied to specific elements on your web page. For example, one could set a rule to state, “I want all paragraph text on this web page to be 16px and green”.

This could be accomplished with the following CSS rule:

```css
p {
	font-size: 16px;
	color: green;
}
```
## The anatomy of a rule
![css-f1.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/css_f1_9cef662a00.png)

As seen in the image above,  there are several key pieces to a CSS rule.
### The Selector
The selector is how you tell the browser what element(s) should have their properties updated with the properties’ paired value in the declaration. The selector can take many different forms.

In the example above, we see that the selector is simply using `p`. This is called a `type` selector, and will select _all_ paragraph elements in the HTML document that this stylesheet is applied to.

Of course the type selector is just one of many ways to select an element. We will explore some of the other selectors later in this article.
### The Property and Value
Properties and values are the bread and butter of CSS.

Simply put, a property within a declaration is an identifier for a particular attribute to be altered by the properties’ paired value. CSS allows you to modify a multitude of properties. The list of properties includes just about everything you can think of!

You can check out a [full list of valid properties here](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference#index).
### The Declaration
The declaration is simply everything contained within the curly braces after the selector. It is a collection of `property: value;` pairs. In nearly every case, the top-down order of your `property: value;` pairs is not important!
### The Rule
The rule is the entirety of the code block. It's what you get when you put everything all together!
## Comments
A comment is simply a piece of code that will be ignored. To create a comment in CSS, you can wrap your text in `/* …… */`. This can be on a single line, or on multiple lines:
```css
/* This is what a comment looks like */
p {
	color: red;
}

/*
This is a comment
that spans
multiple lines
*/

h1 {
	color: green;
}
```
# Adding CSS to HTML
As usual, there’s more than one way to add your CSS to your HTML.
## Inline Styles
Inline styles is generally regarded to as the opposite of a best practice. In using inline styles, you are writing one rule per element. This is detrimental because any time you may need to change a particular CSS rule, you will have to attempt to find every place you’ve declared that rule in your HTML, and update it in each place.

```html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>

    <body>
        <h1 style="color: red; font-size: 36px;">Hello world!</h1>
	    <p style="color: blue; font-size: 16px;">I am an example!</p>
    </body>
</html>

```
As you can see in the above code, we have an inline style applied to our H1 element that sets the color to red, and the font size to 36px. We also have a paragraph element with a color of blue, and font size of 16px.

Let’s imagine for a moment that we have several `<p>` elements:
```html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>

    <body>
        <h1 style="color: red; font-size: 36px;">Hello world!</h1>
	    <p style="color: blue; font-size: 16px;">I am an example!</p>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
        <p style="color: blue; font-size: 16px;">I am an example!</p>
    </body>
</html>

```
With multiple elements each individually styled, we will have to update the inline style of _every_ element, even if we just want to change a single property. It's much simpler instead to use a CSS file that is linked to our HTML that contains a style for _all_ paragraph elements.
## External Stylesheets
Now that we know we should be using external stylesheets, how do we do it? Well its actually very simple.

The first thing we have to do is to create a file in the same directory as our HTML document. You can call this anything you like, but it must end with the extension `.css`. A common practice, especially if only using a single CSS file, is to call this `styles.css`.

Once your CSS file is created, you have to link it to your HTML document. This can be accomplished by simply adding a `link` tag somewhere inside of your `<head>` element in your HTML document:
```html
<link rel=“stylesheet” href=“styles.css”>
```
This `<link>` tag defines a relationship between the current HTML document and an external resource. It’s most often used to link to external style sheets. 

There are two properties that we see here, the first of which is `rel`. `rel` stands for relationship, and this specifies the relationship between the current HTML and linked resource.

The second property we see is `href`. Similar to the `href` that you’ve probably already seen in `<a>` elements, this tag specifies the URL of our resource. This must be the name of the CSS file that you previously created.

Now, we can setup some CSS code in our new file:
```css
h1 {
    color: blue;
    font-size: 36px;
}

p {
    color: green;
    font-size: 16px;
}
```
In addition to our new CSS, we can remove our inline styles from the HTML:
```html
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Hello world!</title>
    </head>

    <body>
        <h1>Hello world!</h1>
	    <p>I am an example!</p>
        <p>I am an example!</p>
        <p>I am an example!</p>
        <p>I am an example!</p>
        <p>I am an example!</p>
    </body>
</html>
```
Now, if we edit the rule that is altering our `<p>` elements, we only have to make that change in a single place to alter all five `<p>` elements.
# Diving into selectors
## Basic selectors
As mentioned previously, there are many ways to select elements with CSS. We’ll go over a handful of them here.
### Type Selector
The type selector selects all elements that have a type matching said selector. Here are a few examples:
```css
p {
	color: red;
}

h1 {
	text-align: center;
}

div {
	display: flex;
}
```
### Class Selector
The class selector selects all elements matching a particular class name. It’s prepended with a period like so:
```css
.blog-content {
	color: red;
	font-size: 16px;
}
```

```html
<p class="blog-content">
	This is p content with the blog-content class.
</p>
```

This is particularly useful if you don’t want to select every element of a given type. In your HTML document, you can simply assign a class to each of the elements you wish to target.
### ID Selector
The ID selector selects all elements matching a particular ID. Instead of prepending with a period the way that class selectors are, you prepend with a hashtag:
```css
#blog-title {
	font-size: 36px;
	color: green;
}
```

```html
<h1 id="blog-title">I am a blog title!<h1>
```

It’s important to note that IDs should generally be unique per HTML document. Because of this, the ID selector is not typically used as often as the class selector.
### Universal Selector
The universal selector simply selects _everything_.  You can further specify what this _everything_ is by combining it with a combinator. We will dive deep into combinators in a different post.

```css
/* 
This style will be applied to all
elements on the page
*/

* {
	background-color: red;
}

/*
This style will only be applied to all
elements that are descendants of a <div> 
element.
*/

div * {
	background-color: pink;
}
```
# CSS Is powerful
In summary, CSS is an extremely powerful tool that allows you to completely change the look and feel of a web page. This post is just the tip of the iceberg of what can be accomplished with CSS. 

Thanks for reading, and stay tuned for more!

Header photo by <a href="https://unsplash.com/@grakozy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Greg Rakozy</a> on <a href="https://unsplash.com/s/photos/css?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

large_greg-rakozy-vw3Ahg4x1tY-unsplash.jpg

medium_greg-rakozy-vw3Ahg4x1tY-unsplash.jpg

small_greg-rakozy-vw3Ahg4x1tY-unsplash.jpg

thumbnail_greg-rakozy-vw3Ahg4x1tY-unsplash.jpg

greg-rakozy-vw3Ahg4x1tY-unsplash.jpg

In this post, we dive head first into the basics of CSS. We will cover what CSS is, how to write CSS, how to add it to your HTML, and a couple of best practices.

CSS for the complete beginner

# Introduction
Since we’ve covered the basics of selectors, we’ll take some time to go into some of the more advanced ways to select elements in CSS.

# Advanced Selectors
Things can get a bit messy and limiting when you’re selecting only classname and element type. Thats where grouping, combinators, pseudo-elements, and pseudo-selectors come into play.

## Grouping Selectors
What if I want my rule to apply to more than one thing, what gives? Well, have I got a treat for you! You can easily group selectors by simply by separating them by a comma. Take this for example:

```css
.button-forward {
	width: 400px;
	height: 50px;
}

.button-backward {
	width: 400px;
	height: 50px;
}
```

We can combine these two rules into a single rule like so:

```css
.button-forward, .button-backward {
	width: 400px;
	height: 50px;
}
```

## The Pseudos
Some of the handiest features of CSS are pseudo classes and pseudo elements. While they aren’t selecting actual DOM elements, they are an additional level of specificity when selecting elements in particular states.

### Pseudo-classes
Pseudo-classes, as their name implies, are not actually classes at all. They are simply keywords that can be added to selectors to specify a particular state of that selected element.

One of the more popular pseudo-classes is `:hover`. This pseudo class is used to select the state an element enters when the mouse is hovered over it. It’s particularly useful when you want to change the color of a link while hovering over it.

```html
<a href="#" class="link--home">Home</a>
```

```css
.link--home {
	color: red;
}

.link--home:hover {
	color: pink;
}
```

The example above will render a red link while not hovered, and a pink link while hovered.

There are a *ton* of pseudo selectors! For a full list, check out [pseudo-selectors on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#alphabetical_index). Some of the ones I find myself using very frequently are `:first-child`, `:last-child`, `:hover`, `:enabled`, and `:disabled`.

### Pseudo-elements
Much like pseudo-classes, pseudo elements are special keywords that can be added to selectors that also let you style particular parts of the element.
The main difference between pseudo-classes, is that pseudo-classes allow you to style an element based on its *state*, while  pseudo-elements are special non-DOM elements associated with DOM elements. 

When using pseudo elements, it is a best practice to prepend them with double colons `::` rather than single colons `:` as pseudo-classes do. While this is not strictly enforced in most browsers, it helps with readability and distinction.

Two of the most popular pseudo-elements are the `::before` and `::after`  pseudo-elements. These selectors create pseudo-elements in the DOM that are either the first-child or last-child of the selected element respectively.

```html
<blockquote>So long, and thanks for all the fish!</blockquote>
```

Our markup before CSS is pretty plain.

![Screen Shot 2021-04-11 at 6.37.55 PM.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/Screen_Shot_2021_04_11_at_6_37_55_PM_0428c20fb6.png)


```css
/* To keep our code DRY, we can apply common styles
to both elements with a single grouping selector */

blockquote::before,
blockquote::after {
    font-size: 3rem;
    color: red;
}

blockquote::before {
    content: "“";
}

blockquote::after {
    content: "”"
}

blockquote {
    color: purple;
}
```

As a result, we get extra large red quotes appended and prepended! We have also changed the color of our base element to purple.

![Screen Shot 2021-04-11 at 6.37.45 PM.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/Screen_Shot_2021_04_11_at_6_37_45_PM_221b89bfed.png)


## Selector Combinators
Sometimes you just need to get a little more specific with your selectors, and that’s where combinators come into play.  Combinators are simply ways to spice up your selectors by adding a little bit of specificity.

### Combinator List
We’ll go through each type of combinator in a bit of detail.
#### Descendant
The descendent combinator is denoted by a space ` `. It selects all nodes that are *descendants* of the element before the space.
##### Example
```html
<div class="banana">
	<p>I am a banana!</p>
	<div>
		<p>I am a banana too!</p>
	</div>
</div>

<div class="orange">
	<p>I am an orange.</p>
	<div>
		<p>I am an orange too.</p>
	</div>
</div>
```

![Screen Shot 2021-04-11 at 6.38.25 PM.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/Screen_Shot_2021_04_11_at_6_38_25_PM_ab4b42a287.png)

Now, we have four different `p` elements; two as descendants of the div with a class of `.banana`, and two as descendants of the div with a class of `.orange`. Here’s how we select them!
```css
.banana, .orange {
	background-color: gray;
}

.banana p {
	color: yellow;
}

.orange p {
	color: orange;
}
```

![Screen Shot 2021-04-11 at 6.44.09 PM.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/Screen_Shot_2021_04_11_at_6_44_09_PM_2981c836aa.png)

#### Child
The child combinator, denoted by a greater than symbol  `>` , works in a very similar way to descendent combinator, except that it only selects elements that are direct children of the element before the operator.
##### Example
Using the same HTML as the previous example, we could edit our CSS in such a way as to only select the direct children `p` tags of the `.banana` and `.orange` classes.

```css
.banana, .orange {
    background-color: gray;
}

.banana > p {
    color: yellow;
}

.orange > p {
    color: orange;
}
```

As you can see, our second `<p>` element in each respective `div`  did not have its colors changed by the selector.

![Screen Shot 2021-04-11 at 6.43.58 PM.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/Screen_Shot_2021_04_11_at_6_43_58_PM_25551f54f3.png)

#### General Sibling
The general sibling combinator, with a symbol of `~`, will select all sibling elements after the element before the selector. It is similar to the descendant combinator, but instead *descendants*, it selects *siblings*.

##### Example
This time we’ll change up our HTML just a bit to show the full effect of the combinator.
```html
<div class="banana">
	<div>
		<p>I am an imposter! Orange!</p>
	</div>

	<p>I am a banana!</p>

	<div>
		<p>I am a banana too!</p>
	</div>
</div>

<div class="orange">
	<div>
		<p>I am an imposter! Banana!</p>
	</div>

	<p>I am an orange.</p>

	<div>
		<p>I am an orange too.</p>
	</div>
</div>
```

With our previous CSS, our markup renders like this:

![Screen Shot 2021-04-11 at 6.50.46 PM.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/Screen_Shot_2021_04_11_at_6_50_46_PM_5218e6055a.png)

So, let’s change up our CSS a bit and use some of the stuff we learned earlier as well.
```css
.banana, .orange {
    background-color: gray;
}

/* Here we select any DIV
that is the FIRST CHILD (div:first-child)
and DIRECT DESCENDANT (>)
of any element that has a class
of BANANA or ORANGE (.banana .orange) */
.banana > div:first-child,
.orange > div:first-child {
    color: crimson;
}

/* Reading backwards through this selector,
of any element type (*)
that is a sibling of and comes after (~) 
a div that is first of its siblings (div:first-child)
and an immediate child (>)
of any element with the classes of
.banana or .orange */

.banana > div:first-child ~ * {
    color: yellow;
}
.orange > div:first-child ~ * {
    color: orange;
}
```

![Screen Shot 2021-04-11 at 7.07.36 PM.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/Screen_Shot_2021_04_11_at_7_07_36_PM_e1ef42ef2a.png)

#### Adjacent Sibling
The adjacent sibling `+` is very similar to the general sibling combinator, but instead of selecting all instances of the element that comes after the combinator, it only selects the first instance.

##### Example
Here we’ll use the previous HTML, and change up the CSS just a little bit.
```css
.banana, .orange {
    background-color: gray;
}

/* Here we select any DIV
that is the FIRST CHILD (div:first-child)
and DIRECT DESCENDANT (>)
of any element that has a class
of BANANA or ORANGE (.banana .orange) */
.banana > div:first-child,
.orange > div:first-child {
    color: crimson;
}

/* Reading backwards through this selector,
of any element type (*)
that is a the first of that type after (+) 
a div that is first of its siblings (div:first-child)
and an immediate child (>)
of any element with the classes of
.banana or .orange */

.banana > div:first-child + * {
    color: yellow;
}
.orange > div:first-child + * {
    color: orange;
}
```

![Screen Shot 2021-04-11 at 7.10.23 PM.png](https://jasonprickett-strapi.s3.us-west-2.amazonaws.com/Screen_Shot_2021_04_11_at_7_10_23_PM_1c3c2eb787.png)

And as you can see in the example, we’ve only changed the colors of the text in the divs after the selected element.

# Wrapping up
I hope this has enlightened you a bit as to how to be more efficient when selecting specific elements in CSS. Theres still plenty more to cover, so stay tuned for the next installment!


Header photo by <a href="https://unsplash.com/@jstrippa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">James Harrison</a> on <a href="https://unsplash.com/s/photos/programming?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.
  

large_james-harrison-vpOeXr5wmR4-unsplash 2.jpg

medium_james-harrison-vpOeXr5wmR4-unsplash 2.jpg

small_james-harrison-vpOeXr5wmR4-unsplash 2.jpg

thumbnail_james-harrison-vpOeXr5wmR4-unsplash 2.jpg

james-harrison-vpOeXr5wmR4-unsplash 2.jpg

Things can get a bit messy when using basic selectors in CSS. This post is intended to help bring clarification and ease to using advanced CSS selectors.

A Deep Dive Into CSS Selectors

Jason Prickett

Full Stack Developer

A Deep Dive Into CSS Selectors

April 12, 2021