Home

Complete Guide to Getting Started with CSS

Pratham

A handful of tips and tricks on getting started with CSS to make your website visually interesting.

CSS is an amazing and unique language that servers a great purpose. We can make our websites visually interesting using CSS. CSS describes the presentation of web pages, including typography, layouts, colors, and more.

A Web Without CSS

Web development without CSS wouldn’t be the same. Consider a page like this:

Website with CSS

Now remove the CSS and here’s what we have:

Website without CSS

Begin with Colors

The main characteristic of a great website is its color scheme. Forget about everything else and learn about background and color properties initially. The colors are something from which users interact first whenever they visit your website.

There are a lot of great color palettes out there, and various tools which you can use to generate pleasant color schemes. For example, Adobe has a tool for generating accessible color palettes.

Adobe color site

Background Property

Don't think that background property as being just for setting a solid color. background is a shorthand property for background-image, background-position, and more.

The Box Model

Box model is one of the most important concepts of CSS, and it's not so difficult to learn. The box model covers height, width, padding, border, and margin.

CSS box model

Height & Width

The height and width properties are used to set fixed height and width to the element. There’s also max-width, min-width, max-height, and min-height to control height and width boundaries.

Padding & Margin

Proper and uniform separation of elements is something that can give your webpage an appealing look. The margin and padding properties can do this for you.

Padding and margin have two different purposes. Padding is for spacing within elements. Margin is for spacing between elements. However, there's a lot more to it! Read the definitive guide to padding and margin for a great overview and introduction.

Border

border properties apply styles between the padding and margin styles. You can control the color, width, and style of borders, which can help give your elements a pleasant look.

Typography

Typography is an essential facet of web page. A good font can make your site visually appealing by establishing a strong visual hierarchy, providing a graphic balance to the website, and setting the site’s overall tone.

Font Classifications

There are five basic classifications of fonts:

  1. serif
  2. sans serif
  3. script
  4. monospaced
  5. display

Give this article a read for more detailed explanation.

CSS font classifications

Font Libraries & Properties

The easiest way to get started is by browsing Google’s free font library.

When applying fonts to your website, there are three CSS properties to focus on: font-family, font-weight, and font-size.

Positioning

CSS starts to get a little tricky when we get into positioning.

CSS positioning

I have already written a detailed thread on CSS positioning. If you're interested check it out.

Layouts

The previous sections have provided a brief intro into styling your website. But you also have to be concerned with building a layout system for each page. This is most often accomplished today with flexbox and grid. Grid is little bit tough to master, but flex isn't as bad.

There is a great guide to flexbox on CSS-Tricks. And for more information on CSS grid, check out this thread.

Responsive Layouts

Layouts are where responsive web design comes into play. Don't skip learning this concept! There are millions of devices on which your website is viewed. Styling responsively ensures that your site will look good on any device.

There are few quick points you need to remember while writing CSS code.

  • Use meta viewport element
  • Don't use large fixed width
  • Try to use Layouts
  • Use box-sizing: border-box
  • Media Queries are your savior
  • Use auto in media
  • Use frameworks if possible

I suggest that you add responsive styles while writing CSS, rather than handling responsiveness in the end. Here’s a thread I wrote to help with responsive web design.


I think that's pretty much it in order to give you a quick overview of CSS. If you have any doubts, feel free to drop a comment in the Twitter thread. If you liked this, a retweet means a lot! ❤️

Let's Connect

Keep Reading

A Beginner's Guide to Z-Index

The z-index is a powerful yet confusing concept of CSS. Let's make it easy!

Pratham
Jun 04, 2021

Everything You Need to Know about CSS Position Property

Dive deep into CSS position with real examples.

Pratham
Aug 19, 2021

100 Free CSS Resources

There are countless ways to learn CSS. Here are 100 resources in various categories to get you started.

Pratham
Oct 14, 2021