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!
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.
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?
Cool so now instead of the typical text, I will have green text for
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.
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:
border: 100%, double, burlywood;
The border property sets the width, style, and color of the border, you can also set these properties individually.
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:
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 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!