Hsabes

Posted on Jun 18, 2022 • Edited on Jun 24, 2022

Three beginner CSS tips to make your life easier

#css #html #beginners #webdev

When I started learning how to code, the first two languages I learned were HTML and CSS. Like most people, I found HyperText Markup Language to be fairly straight forward. The element names were intuitive, the structure made sense, and was fairly easy to memorize the more discrete details. Cascading Style Sheets was starkly different in comparison, especially for a beginner. I found myself caught in a lot of frustration trying to figure out why elements were behaving one way when I was expecting them to act in a different way. Here are a few tips that I found helpful when learning CSS.

Tip 1: Selectors

The first thing you're going to learn when jumping into CSS is how do I actually style my webpage? In order to style the elements in your HTML document, you'll need to use selectors. With CSS selectors you can style one element, a collection of elements, everything at once, or even style certain elements on an event that occurs when a user is interacting with your webpage (we'll get to that last one a little later). Here's your basic HTML webpage:

1 <!DOCTYPE html>
2
3 <html lang="en">
4    <head>
5        <title>Hello World</title>
6        <link rel="stylesheet" href="./styles.css" />
7        <meta charset="UTF-8">
8    </head>
9    <body>
10       <h1>Hello World!</h1>
11   </body>
12 </html>

Let's say we want to get spicy and change the color of our h1 tag to red. If you notice on line 6, we've linked our CSS file, titled styles.css, to our HTML file. This grants our CSS file access to modify our HTML elements. Now we can use our selectors to target our h1 element:

1 h1 {
2     color: red;
3 }

But what if we have more than one h1 tag, and want them to be different colors? Using IDs!

10 <h1 id="beans">Potatoes</h1>
11 <h1 id="greens">Potatoes</1>

Our CSS will have a slightly different syntax to target the specific ID's of those h1 tags:

1 #beans {
2     color: red;
3 }
4 
5 #greens {
6     color: blue;
7 }

CSS uses hashtags to tell the engine that it's targeting an element with an ID of whatever follows the hashtag. Pretty nifty.

Selecting elements can go even further with classes. Lets say you want the first h1 tag to be red, the second h1 tag to be blue, but you want both of them to have a border? We can keep our IDs, but this time we'll add on classes to our h1 tags:

10 <h1 id="beans" class="tomatoes">Potatoes</h1>
11 <h1 id="greens" class="tomatoes">Potatoes</1>

To target our the class of "tomatoes", our CSS will need to use dotted notation:

9  .tomatoes {
10     font-size: 100px; /* larger size for readability */
11     text-shadow: -1px 0 black, 0 1px black, 1px 0 black ,0 -1px black;
12 }

Now your headers should have a neat little border around them!

Already things are looking stylish.

Tip 2: Properties

If you want to be a pro at CSS, knowing your properties and how they interact with your webpage is key. There are over 200 properties, of which have multiple values, so committing all of them to memory and their value pairs AND what they all do would be quite the task. To get you started, here's a few that can instantly turn a web page into a more organized experience for a user:

Display

Display is a good property to understand and implement when you need to. By default, each element has a display of either block or inline, although there are other values that can be useful such as inline-block or none. The following elements' display are as follows:

Inline

<span>
<a>
<img>

Block level elements (like our h1 tags) by default go from top to bottom by making a new line, and take up the full width of the web page unless specified otherwise. If you notice in our Potatoes headers, they are stacked on top of eacher. But what would happen if we changed those h1 tags to a span tag?

Now they're being displayed inline! Knowing this distinction between block and inline displays, and which elements are either by default will save you a lot of confusion moving forward.

Block:

<div>
<h1> through <h6>
<p>
<form>
<header>
<footer>
<section>

In the picture above we have 4 div elements inside a parent div. Each one has a specific id to change the color, and all of them have a class name that modify their width, font-size, and padding. You may have noticed one other thing about these block elements that seem to contradict what I said earlier... can you identify what it is?

Block elements by default go from top to bottom, but these ones are going from left to right, or inline. The key difference between block and inline elements isn't just the direction they render, it's your ability to style them as well. The height/width of an inline element cannot be altered, only block level elements. So if we want to alter the height/width of our block level elements and have them be inline, you can use display: inline-block; or float: left;. Both of these will achieve the same thing, but typically display: inline-block will be better. This is because when developers are maintaining your code at a later point, display: inline-block; will make it much more obvious as to what you're trying to achieve. Another option is display: flex;. This gives you access to more styling options:

justify-content

So we have all of our inline divs pushed to the left of our cotainer. What if we have a header, and each of those colored divs are a button we can press that will navigate us to a new page? Having them all pushed to the left could be fine, but we may want them all centered across the screen. justify-content gives us a few ways to alter our header:

justify-content: flex-end

This will push the content in our parent div to the right, or the end:

justify-content: space-between

This will separate your content so the space between all of them are equal:

justify-content: space-evenly

This will create equal space between the edges of all divs, including the outermost child divs and the parent:

justify-content: space-around

Similar to space eveny, but spaces on either edge have half-sized spaces:

Tip 3: Hover

The hover selector is a fantastic and simple selector tool you can easily implement into your CSS. Consider this HTML:

9    <body>
10       <p>Hello World!</p>
11   </body>

...and this CSS:

1 p {
2     font-size: 100px;
3     color: red;
4 }

What if we wanted to change the styling of our paragraph tag when the user hovers over the element with their mouse? Well, we can simply create another selector that's called on the same element, but with the :hover selector attached!

1 p {
2     font-size: 100px;
3     color: red;
4 }
5
6 p:hover {
7     color: blue;
8 }

There are many ways this can be implemented, the one we've done here is very basic. But here's an exercise, go to any web page. When you hover over a button, does the styling change? Is there a border when you hover over it? Does the color change or is there a shadow?

Bonus Tip

Transition

Transition is one of my favorite properties in CSS. It makes things look very smooth when a user interacts with a web page! Let's take our previous example, but add a transition:

1 p {
2     font-size: 100px;
3     color: red;
4 }
5
6 p:hover {
7     color: blue;
9     transition: 1s;
8 }

If you tried out the hover in our last example, you probably noticed it switch color instantly. With the transition property, the change in styling will take effect over the course of 1 second, or however many seconds you want it to take. Try it out! We're still not done though... what if you don't want the styling to instantly revert back to it's normal state? Simple:

10 p:not(:hover) {
11     transition: 1s;
12 }

Now we've told CSS that we want it to revert back to our old styling over the course of one second when the user is no long hovering over the element.

Conclusion

CSS is basic in syntax, but can get extremely complex in functionality. There are very advanced implementations of CSS out there, but this is a great starting point for beginners.

For more information on CSS properties, visit MDN.