DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for All CSS Properties You Need to Know to Build aΒ Website
Domagoj Vidovic
Domagoj Vidovic

Posted on

All CSS Properties You Need to Know to Build aΒ Website

Whether you're at the beginning of your CSS journey or somewhere else, you got to admitβ€Š-β€Ša number of CSS properties is massive.

And it's easy to confuse yourself in that vast sea.Β 

You're copying code from StackOverflow until you find a solution that fits. But how will that scale? Why does it even work?

Most of the time, you don't care about the answer. You just focus on the result.

When building a website, some of the CSS properties are must-haves; yet, it's hard to recognize them.Β 

This article exists to help you solve the most common CSS problems while building a website.

Let's dive into properties you cannot avoid.


1. display:Β flex;

Do you need to center an element?

Googling that will likely offer tens of different solutions; however, you'll need only one most of the time.

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

display: flex; will align your child elements one next to each other in a horizontal row. Tip: you can add flex-direction: column; to change it to a vertical row.

flex-direction determines your main axis. Default value is row.

justify-content: center; will align the items on your main axis. That means the item will be horizontally centered for our code snippet.

align-items controls your cross axis, i.e. your elements are vertically centered.

You can pass many attributes here, but I'll mention only one: justify-content: space-between;. This will distribute the elements across the row without any margins at the beginning or end.


2. 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;
}
Enter fullscreen mode Exit fullscreen mode

You can directly connect properties with sides by doing margin-top, margin-right, etc., or cover everything with a single margin property:

margin: {{ top }} {{ right }} {{ bottom }} {{ left }};
Enter fullscreen mode Exit fullscreen mode

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


3. padding

At the first glance, padding looks similar to margin.Β 

The syntax is identical as margin too; shorthand as well.

Why do we need it then?

Imagine that you have a physical suitcase. You want to write something on the case.

However, you don't want to start writing in the top-left corner. You want to indent your text a bit.

For that, you will use padding. Padding influences the inside of our element.

However, if you have two suitcases next to each other and you want to make a distance between them, you'll use margin for that.Β 


4. background-color

This one is pretty simple and an absolute necessity. You can apply this property to most of the HTML elements.

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

Attributes can vary: from a simple color name, over its HEX value, to the RGB (even HSL).

RGBA is interesting here because instead of just setting a color, you can also set the opacity. Seeing that 0.5? That means that transparency will be 50%.


5. color

color is similar to background-color; the only difference is that it influences the text's color. Everything else is the same, transparency included.


6. opacity

But we can make anything transparent!

opacity: 0.1; // 10% visibility
opacity: 0.9; // 90% visibility
Enter fullscreen mode Exit fullscreen mode

This is useful for disabled states or interesting effects.


7. width

This is a tricky one. Most of the time, you don't want to have fixed widths. Your design should be responsive and you can accomplish that with margins and paddings.

However, sometimes you need to be fixed. Maybe you want to set your icon with to 24px?

Or look at this article. Try to zoom out of the page. You'll see that it won't go from edge to edge.

That's because the whole page has max-width property. Useful to wrap your website with it.


8. heightΒ 

height is much simpler than width due to the nature of our scroll direction.

However, you'll still want to use as few fixed heights as possible. One example where you could is your header.

All the other caveats like min-height and max-height exist here too.


9. cursor:Β pointer;

Hover over any button on this page. Can you see how the cursor changed into a little hand?

cursor: pointer; is the reason for that. Whenever you can induce any actions (buttons, links, etc.) you need to use it.


10. font-size

This one is pretty simple and controls the sizes of your font. If you're an absolute beginner, I recommend using only px here.

However, if you want to dig deeper, investigate rem. Basically, you set your default font size in px, and all the other fonts will be relative to that base value.

For example, if your base value is 16px, 2rem will be 32px.


11. font-family

You want different fonts, right? Google Fonts are impressive and it's so easy to pick one of them, include them in your index.html, and add its name to font-family.


12.Β :hover

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

.your-class-name:hover {
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

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.

Check out the bottom of the article originally published on Medium for the best CSS courses!

Top comments (42)

Collapse
 
junihh profile image
Junior Hernandez • Edited on

It's a good post but I think you could improve it if you turn it into a series. For example, this would be the first post; the second could deal with CSS units of measure; the third on pseudo-classes.

I mention it because you were pretty lazy about the units of measures (px, rem, vh, etc) and because you didn't mention about the pseudo-classes beyond :hover, which are quite useful (::before, :not(), etc)

Collapse
 
domagojvidovic profile image
Domagoj Vidovic Author

I both agree and disagree!

The goal of this article was how to create a simple website, and I believe I included everything what's absolutely necessary. Sure, we can add more stuff here, but I wanted to keep it as simple as possible.

Diving deeply in px, rem, vh, ::before, and similar seems a bit too complex for a beginner and its simple website.

But I could write an article about more advanced CSS properties you need to build a website!

Collapse
 
junihh profile image
Junior Hernandez

πŸ‘

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for the tips.

Collapse
 
domagojvidovic profile image
Domagoj Vidovic Author

Good luck with development! πŸ’ͺ

Collapse
 
imiahazel profile image
Imia Hazel

Thanks. Trying to explore, explore and explore..
Things are changing at very fast pace. It seems we need to refactor the code after some time :)

Thread Thread
 
domagojvidovic profile image
Domagoj Vidovic Author

For sure, especially in the beginning.

If your code still looks fine to you after a few months or a year, that means you didn’t grow fast enough!

Thread Thread
 
imiahazel profile image
Imia Hazel

Agree.

Thread Thread
 
riobrewster profile image
RioBrewster

Absolutely NOT TRUE. If you look at your code after a few months or year and it still looks fine, that means you wrote elegant code the first time.

Thread Thread
 
imiahazel profile image
Imia Hazel

Agree in a a sense, that elegant codes have long life and we should pat on our back for writing such algorithms.

Disagree with respect, that we have to refactor such elegant codes if we found a better way to execute our logics.

Term refactoring, means we need to update our codes according to latest standards.

Good example of refactoring is CSS Vars.

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

I think it depends. You don't need to do any refactoring just to use the latest features if your website doesn't need that. The danger of using the cutting edge stuff is that sometimes it's not always the best approach. Just look at CSS Grid, I barely see that used any more, yet it was at the time thought to be the perfect solution to replace the various custom grid layouts across the many CSS frameworks.

Thread Thread
 
imiahazel profile image
Imia Hazel

Yes you have point. Refactoring requires a lot of head scratch to implement the new standards without breaking the functionality and UX. Caniuse is my best friend :)

Thread Thread
 
riobrewster profile image
RioBrewster

Besides - who has time to refactor old code? You should absolutely try to learn something new with each new project. But it's pretty rare to have to go back and rewrite working code.

Unless of course accessibility standards keep changing under your feet. But that's a rant for another post. ;^)

Thread Thread
 
ashleyjsheridan profile image
Ashley Sheridan

I agree you should try to learn something new as you progress from project to project, but there's absolutely a place for refactoring, unless everything you do is for throwaway short-term campaigns, but even then you should be looking into producing something that's a bit more flexible and reusable. I now work at a place where the code is long running, and constantly being refactored and added to over time, and building from scratch every time something new came out would be an impossible task. My last job was at a media agency, where most things existed for a few months at a time, but even there I could see the pattern of what was being produced and put together something that could be re-used for each new project. This itself was updated over time, and refactored to be better and offer more features as we needed them.

As for shifting accessibility standards, it doesn't happen ofter (we've had WCAG 2.1 for quite some time now) but WCAG 2.2 is round the corner (minor changes to what already existed, but 9 additional guidelines), and WCAG 3.0 is being worked on.

Collapse
 
asyncnavi profile image
Navraj Sandhu

For every situation I have one solution

display: flex
Enter fullscreen mode Exit fullscreen mode


😁

Collapse
 
domagojvidovic profile image
Domagoj Vidovic Author

Flex is so powerful πŸ’ͺπŸ˜„

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

If you've got :hover, then you need :focus for the separate styling that you need for accessibility. Then border and outline are good ones too, as that's usually how the browsers default focus styles are applied for various interactive elements.

Collapse
 
careertheta profile image
careertheta

Its really useful post. Can I get some information about GB WhatsApp. I want to code this app but it not working properly.

Collapse
 
gochi88 profile image
gochi88

I know GB whatsapp is a most popular Whatsapp Mod which has lots of features but it's required update and I personally suggest you to download the latest version for here for free.Β GbWhatsApp

Collapse
 
biggbosstv profile image
Bigg Boss 16 Download

Bigg Boss OTT 2 is a spin-off Indian Hindi-language reality digital, Bigg Boss 16
series of the show Bigg Boss that airs exclusively on Viacom 18's streaming service

Bigg Boss 16 Full Episode

Collapse
 
erikin1 profile image
erikin1

GB Instagram is the best solution for these problems. With the use of Gb Instagram apk, you can easily download anyone’s posted pictures, videos, and even their Instagram stories. These new features add more glory to the GB Instagram APK download file.

Collapse
 
erikin1 profile image
erikin1

OGWhatsApp Apk is a modded version of the original WhatsApp that has some new features that make it easier and safer to use. OGWhatsApp APK can be defined as dependable and free for its users.

Collapse
 
apkford profile image
APKFORD

APKFORD is a website that allows download the latest Mod APK Games & Apps,
unlimited money, unlocked premium mod version easily overcoming the most.
Dude Theft Wars Mod APK

Collapse
 
muzafar20201537 profile image
Muzafar Baloch

This blog is very good This is no copy writerd, This Bolg is very
Informated For every One I Recmended to All Visit On This Bolg and Website.

Bigg Boss 16 Live

Collapse
 
biggbos36253463 profile image
Bigg Boss

Android application PacKage called APK An application file ready for installation in an
Android device. The compressed APK file, which is a ZIP archive in the JAR format

JTWhatsApp APK

Collapse
 
biggbos36253463 profile image
Bigg Boss

Android application PacKage called APK An application file ready for installation in an
Android device. The compressed APK file, which is a ZIP archive in the JAR format

PUBG Mobile KR APK

Collapse
 
innocent_khan64 profile image
Broken Angel

Anupama Desi Tv Is going to on air since november 2019. Anupama, and Anuj in the latest episode of
TV serial Anupama, The show is doing extremely well and is topping the BARC ratings every week.

Ghum Hai Kisi Ke Pyar Mein

Collapse
 
ayoaduwo profile image
Fola

πŸ˜šπŸ‘Œ

Collapse
 
64467904macias profile image
Juan macias

Relative absolute

Collapse
 
domagojvidovic profile image
Domagoj Vidovic Author

True! Although you can survive without it πŸ™‚

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.