All CSS Properties You Need to Know to Build a Website

All CSS Properties You Need to Know to Build a Website: Whether you’re just starting out with CSS or have a lot of experience with it, you have to admit that there are a lot of CSS properties.

And in that big sea, it’s easy to get confused.

You’re copying and pasting code from StackOverflow until you discover one that works. But how will that work on a larger scale? Why does it work in the first place?

The most of the time, you are worried by the answer. You simply concentrate on the end product.

Some CSS features are important when building a website, yet they can be hard to detect.

This article is meant to enable you in resolving the most frequent CSS issues that you may encounter while developing a website.

Let’s take a look at certain properties you can’t ignore.

display: flex;

Is it necessary to center an element?

You’ll probably find tens of alternative answers by Googling it; however, you’ll only need one most of the time.

.your-class-name {
  display: flex;
  justify-content: center;
  align-items: center;
}

display: flex; will align your child elements in a horizontal row one after the other. To make it a vertical row, add flex-direction: column; to the end of the code.

Your main axis is defined by flex-direction. Row is the default value.

The elements on your main axis will be aligned if you use justify-content: center. For our code sample, this indicates the item will be horizontally centered.

Your cross axis is defined by align-items, which means your elements are vertically centered.

Many properties can be passed here, but I’ll only highlight one: justify-content: space-between; There will be no margins at the beginning or end of the row as a result of this.

margin

This property will determine the distance between certain elements.

.your-class-name {
  margin-top: 16px;
  margin-right: 12px;
  margin-bottom: 16px;
} 
// shorthand
.your-class-name {
  margin: 16px 12px;
}

You can directly attach properties to sides by using margin-top, margin-right, and so on, or you can use a single margin property to cover everything:

margin: {{ top }} {{ right }} {{ bottom }} {{ left }};

If you omit bottom, it will inherit top (check out our example)! If you omit left, it will inherit right.

padding

Padding appears to be similar to margin at first appearance.

The syntax is the same as the margin, and the shorthand is the same as well.

So, why do we require it?

Consider the case of a physical suitcase. You’d want to make a note about the case.

You don’t want to begin writing at the top-left corner, though. You should slightly indent your content.

Padding will be used for this. The inside of our element is affected by padding.

If you have two luggage close to each other and want to create a space between them, however, you’ll use margin.

background-color

This is a relatively simple one, but it’s a must-have. This property is applicable to the majority of HTML components.

background-color: blue;
background-color: #232323;
background-color: rgb(255, 255, 128);
background-color: rgba(255, 255, 128, 0.5);

The attributes might range from a basic color name to its HEX value and RGB value (even HSL).

RGBA is fascinating since it allows you to set the opacity as well as the color. Do you see that 0.5? That means there will be 50% transparency.

color

Color is similar to background-color, with the exception that it affects the color of the text. Everything else is the same, even the transparency.

opacity

But we can make anything transparent!

opacity: 0.1; // 10% visibility
opacity: 0.9; // 90% visibility

This is useful for disabled states or interesting effects.

>> 20 Best CSS3 Library For Developers

width

This is a difficult question. You don’t want to have fixed widths most of the time. Your design should be mobile-friendly, which you may do with margins and paddings.

However, there are times when you must be fixed. Then you’d want to set your icon’s size to 24px?

Also, take a look at this article. Explore with zooming out of the page. You’ll notice that it doesn’t go all the way around.

Because the entire page contains the max-width property, this is the case. It’s a good idea to wrap it around your website.

height 

Because of the nature of our scroll direction, height is much easier than width.

You should, however, utilize as few preset heights as possible. One place where you may do this is in your header.

All of the other qualifiers, such as min-height and max-height, are also present.

cursor: pointer;

Hover your mouse over any of the buttons on this page. Can you see how the cursor became a small hand?

The explanation for this is cursor: pointer. You should use it whenever you can get them to do something (buttons, links, etc.).

font-size

This one is easy to use and controls the text sizes. If you’re a complete beginner, I recommend sticking to px.

If you want to dive a little deeper, look into rem. Simply put, you set your default font size in px, and all other fonts are proportional to that figure.

If your base value is 16px, for example, 2rem will be 32px.

font-family

Are you looking for a variety of fonts? Google Fonts are amazing, and select one, including it in your index.html, and adding its name to font-family is a breeze.

:hover

This will add any effects to a certain element on hover.

.your-class-name:hover {
  cursor: pointer;
}

Our example will change the cursor to a pointer.

Conclusion

What if I told you that you’ll solve most of your CSS problems with these 12 properties? Sure, you’ll maybe need a few more depending on your case, or you’ll need to dig deeper into some of those.But this is enough to build a solid-looking website.

Happy Coding….☺️

About us: Codelivly is a platform designed to help newbie developer to find the proper guide and connect to training from basics to advance

2 thoughts on “All CSS Properties You Need to Know to Build a Website”

Leave a Comment