Some CSS Basics

#css #html #styling #flexbox

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 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?

 th {    
    color: green;
 }

Cool so now instead of the typical text, I will have green text for <th> tags:

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.

 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:

 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:

 .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.

.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!

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?
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!