Some CSS Basics
Tags: css, html, styling, flexbox
Published: 2021-04-17 16:08:31

# Introduction 
When I was first learning software engineering and programming one of the more difficult aspects for me to learn was CSS and styling the pages. I've recently been learning more in-depth CSS so I am going to share some of that with you here! 

# What is CSS 
According to [MDN](https://developer.mozilla.org/en-US/docs/Glossary/CSS) CSS is defined as;
> CCSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser. The browser applies CSS-style declarations to selected elements to display them properly. A style declaration contains the properties and their values, which determine how a webpage looks.

# Let's get Started 
I have some basic data inside of a blog app that I will be manipulating in this post today. As of now, it looks like what you'd expect when you build a new app without styling. The stylesheet is linked and I'm ready to go! Let's start with something simple, I am going to tell my CSS file that I want the text of all my `<th>` tags to be green, simple enough right?
```css
 th {    
    color: green;
 }
```
Cool so now instead of the typical text, I will have green text for `<th>` tags: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71dc6lxgry95dpzg32jw.png)
Alright, that looks good lets good. A commonly used property in CSS is `flex` let's take a look and see how that will change our page. When I add `display: flex;` to the above code, it moves my content so that it is directly under the title. While that may be great in some cases, not so much in this case so, I'll remove it. What else can we do? let's set a background color to our app. 
```css
 th {    
    color: green; 
    background-color: magenta;
 }
```
I refreshed the page and I'm only getting the magenta color in a small section behind the title and content why is that? If you remember, we are only styling the `<th>` tags right now so the stylings we apply are only going to apply to that element, not the entire app. Let's take a look at this so far:
```css
 th {    
    color: green; 
    background-color: magenta;
    width: auto;
    height: auto;
    border: 100%, double, burlywood;
 }
```
The border property sets the width, style, and color of the border, you can also set these properties individually. 

# Styling the content of our blog posts 
To get started here I added a class of `content` to the content on our show page. I have specified width, height, background-color, and a transition, that code looks like this so far:
```css
 .content {
width: 500px;
height: 500px;
background-color:mediumslateblue;
transition: 1s;

}
```
I want to try to get the background color to change when I hover over the content of my blog post. In order to attempt this I'm going to add a new `.content:hover` and set the border-radius as well a the background-color I want to see when hovering. 
```css
.content:hover {
    background-color:turquoise; 
    border-radius: 50%;
}
```
Here is the moment of truth, if we hover over the content, do we get a `background-color: turquoise`? Let's take a look!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atjpqvsv8jgqk6vamjza.png) 
Yes! It works. Let's add a `transform: rotate` to the hover as well:
```
.content:hover {
    background-color:turquoise; 
    border-radius: 50%;
    transform: rotate(20deg);
}
```
Now when we hover what will happen? ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xep2ln1tejvsb06zsb4o.png)
So, now when we hover not only do we change the `background-color` but the content also rotates 20deg, cool! 

#Conclusion
CSS is how we manipulate the color, style, fonts, borders, etc. It's a very important aspect of web development and an area that I feel a lot of juniors struggle with. There are lots of resources online and courses (paid and free) you can find to help boost your skills in this area!


#Resources
[W3 Schhols](https://www.w3schools.com/css/default.asp)
[MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
[Hulya on Dev.to](https://dev.to/hulyakarakaya/level-up-your-css-with-these-38-resources-2g39)