CSS Four Ways
Tags: css, beginners, html, react
Published: 2021-05-10 02:44:26

After writing my last blog post about my top 5 favorite design tools (which you can find [here](https://dev.to/maxjacobzander/my-top-5-free-design-tools-5hd8) if you missed it!), I have definitely had a little front end on the mind. And as I worked through a code challenge at the beginning of last week and a few projects over the course of the rest of the week, I have been thinking about the different ways that one can implement CSS. So today I just want to take a minute to talk about four different ways to write CSS.

------

### The OG

The way that most people probably think about writing CSS is in an external style sheet. After all, CSS stands for Cascading Style Sheets. We use external style sheets by creating a separate file (such as `style.css`) importing the file as a `stylesheet` in the `head` element of your `html` file. The beauty of using an external style sheet is reusability. If you have multiple `html` pages, you can import the `stylesheet` at the top of each of them and the styles therein will apply to each of them. Your syntax for importing the style sheet looks a little something like this:
```
<head>
<link rel="stylesheet" href="styles.css">
<title>A Project with An External Stylesheet</title>
</head>
```

When we're writing CSS in an external style sheet, our syntax is as follows:
```
body {
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

.container {
    display: flex;
    width: 90vw;
}
```

To break down a few key points here, our specific CSS properties are listed within curlybraces `{}`, followed by colons `:` and each properties definition is semicolon `;` separated.

To apply CSS to a class, we precede the class name with a dot `.` (ex. `.container`) and list the CSS as previously mentioned.

To apply CSS to something with an ID, we precede the ID name with a `#` (ex. `#container`) and again, list the CSS as previously mentioned.

---------

### Inline CSS

Another way to write CSS is to use what we call, **inline CSS**. This can be helpful if you're looking to add styling to a single HTML element.

We do this by including the CSS in the element tag. For example:
```
<h1 style="font-style: italic; color: gold;">Now I'm Italicized & Golden!</h1>
```

To break that down, we tell the tag that we are applying styling by saying `style=` and then, in we put the properties and definitions (colon-separated `:`) in quotes `" "`. If we are applying more than one property (as in the example above), they are semicolon-separated `;` within the same quotation marks.

---------

### In the `<head>`

Another option you have is to put your styling within the `<head>` element. This may be the option for you if you are trying to style all of the elements in a single `html` (rather than multiple pages). They syntax for CSS in the `<head>` element is as follows:
```
<head>
    <style>
      body {background-color: red;}
      h1   {color: gold; font-style: italic;}
    </style>
</head>
```
The above code will give us a red page with the golden, italicized `<h1>` from before. To break down that syntax, we put `<style>` tags within our `<head>` tag and within that, we put the tag type (ex. `body` or `h1`) and then, within curlybraces `{}`, we list the properties and definitions (colon-separated `:`). We follow those with a semicolon `;` and, if we are applying more than one style to a certain tag type, we semicolon-separate those too, but leave them within the same set of curlybraces.

---------

### Styled Components

If you're using React, you have a fourth (terrific) option! [Styled Components](https://styled-components.com/) allow you to add styling directly to react components, therefore only loading in the necessary styling and nothing extra.

To use styled components, we first need to install `styled-components` by running `npm i styled-components`.

Once we've added `styled-components` to our package, we need to import it into our component(s) as such:
```
import styled from 'styled-components';
```
Then, the syntax for adding the styling is as follows:
```
const Title = styled.h1`
  color: gold;
  font-style: italic;
`
render(
  <Title>
    I'm still Italicized & Golden!
  </Title>
);
```
To break that down, we set a `const` (capitalized) and set it equal `=` to `styled.` whatever the tag type is (in this case `h1`, but you can set a styled `div`, `p`, `a`, or whatever you'd like). We follow the tag type with a backtick (`) and then we list the properties and definitions (colon-separated `:`) and follow them each with a semicolon `;`. Make sure you close the backticks and then, in your render, you can call the const you defined like a tag and then, within the opening and closing tag, input whatever it is that you want styled.

-------

So that's a little introduction to (or a little refresher on) different ways of implementing CSS. With study and practice, you can become a CSS master and, trust me — that is super valuable!