Complete Guide to Getting Started with CSS

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:

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

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.

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.

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.

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.

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

Positioning in CSS allows you to display your element wherever you want on the screen

But when I was learning it, I found it little bit confusing😅

So in this thread I'll try to explain it in easiest manner with practical implementation. Let's start

THREAD🧵👇 pic.twitter.com/M3UnegtQUk

— Pratham (@Prathkum) January 31, 2021

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.

A complete beginner's guide to CSS Grid layout 👇🏻

Thread🧵 pic.twitter.com/e0EvyZWTHS

— Pratham (@Prathkum) March 24, 2021

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.

Complete guide to Responsive Web Design

🧵👇🏻 pic.twitter.com/u3nDi06ki4

— Pratham (@Prathkum) April 10, 2021

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! ❤️