Pratham Profile picture
3 May, 27 tweets, 7 min read
A complete beginner's guide to styling your website with CSS.

Thread 🧵👇🏻
CSS is an amazing and unique language that servers a great purpose. We can make our website visually good using CSS. It describe the presentation of web pages, including typography,. layouts, color etc...

{ 2 / 27 }
First and foremost

The characterstic of a great website is it's color scheme. Forget about everything and learn about background and color properties initially.

The colors are something from which users interact first whenever they visit your webpage

{ 3 / 27 }
There are a lot of great color palette out there using which you can generate pleasant color schemes

Check this great tool for generating accessible colors…

{ 4 / 27 }
Don't think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..

{ 5 / 27 }
Box model is one of the most important concept of CSS. It's not so tough to learn. The box-model covers

- Height
- Width
- Padding
- Border
- Margin

{ 6 / 27 }
Height and width property are pretty intuitive. These are used to set fixed height and width to the element

I suggest to give a look at max, min-width and max, min-height properties as well (we will cover these further in this thread)

{ 7 / 27 }
Proper and uniform separation of elements is something that can give your webpage a appealing look. Margin and padding can do this for you.

Give this article a short read for Definitive guide of padding and margin…

{ 8 / 27 }
Border are used to set the color, width and style to elements. You can learn it in 5 min😄

Some good border selection can give your element a good pleasant look

{ 9 / 27 }
Moving forward, typography is an essential thing of web page. A good font can make your webpage and establish a strong visual hierarchy, provide a graphic balance to the website, and set the product's overall tone.

You can add free fonts from Google's official site

{ 10 / 27 }
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

{ 11 / 27 } (Download free fonts from here)

You just need to look at few fonts properties. For ex,

🔹 font-family
🔹 font-weight
🔹 font-size

{ 12 / 27 }
Alright moving further, We have CSS positioning.

From here, a bit tricky CSS starts. Using CSS positioning you can change the position of you element. This might seems bit tough but you can learn it in 2-3 days

{ 13 / 27 }
I have already written a detailed thread on CSS positioning, If you're interested check it out

{ 14 / 27 }
Up to this point you have some decent knowledge of styling your website. It would be great if you learn about a layout system now.

Flex and Grid

Grid is little bit tough to master but flex isn't

{ 15 / 27 }
I have covered both the layout systems in my other threads. Check them out


{ 16 / 27 }
We have covered almost everything upto this point except one thing.

📌 Responsive Web Design

This is the most trickiest part let's cover it in detail 👇🏻

{ 17 / 27 }
In order to make a RWD, you just need to consider one thing.

"Ability of content to fit inside any device that look good and it will be for user to interact with that"

{ 18 / 27 }
Few quick points 👇🏻

1️⃣ Use meta viewport element
2️⃣ Don't use large fixed width
3️⃣ Use <picture> tag
4️⃣ Responsive text size
5️⃣ Try to use layouts
6️⃣ Media Queries are saviour
7️⃣ Use "auto" in media

{ 19 / 27 }
1️⃣ First and foremost thing in order to make RWD is <meta> viewport element.

It forces page to follow the screen-width of the device.

{ 20 / 27 }
2️⃣ The second important point to note is that don't use large fixed width or height element.

It can cause trouble. Let's say an element having width 500px but user is viewing on a device having width smaller than 500px

In such cases, use min-width or max-width

{ 21 / 27 }
3️⃣ Use HTML <picture> tag

The HTML <picture> element allows you to define different images for different browser window sizes.

{ 22 / 27 }
4️⃣ Responsive text size

Although you can make text responsive using media queries but you can also use "viewpoet" width as well.

h1 {
font-size: 10vw;

{ 23 / 27 }
5️⃣ Try to use Layouts

Using Grid or Flex layout always beneficial in order to make a web page responsive. Both these layout are not hard to learn. Try to use them

{ 24 / 27 }
6️⃣ Media Queries are saviour

Media query is a rule to include a block of CSS properties only if a certain condition is true. It is very useful in order to make a RWD.

{ 25 / 27 }
7️⃣ Use "auto" in media

Almost 99% a web page contains images or videos. And in order to make them responsive, use "auto"

If the width property is set to a percentage and the height is set to "auto", the image will be responsive

{ 26 / 27 }
Great!! I think that's pretty much it in order to give you a quick overview. If you have any doubts, feel free to drop a comment below

If you like this thread, a retweet means a lot ❤️

{ 27 / 27 }

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Pratham

Pratham Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

5 May
If you know CSS then do not write CSS code, use these free generators instead that can help you tremendously

A Thread 🧵
1️⃣ Gradient Animator

- A CSS generator to create beautiful animated gradients 🎨

2️⃣ CSS Accordion Slider Generator

- Create fully responsive, css only accordion sliders

🔗 Image
Read 6 tweets
4 May
Are you learning JavaScript?

These 12 amazing resources will boost your skills

1️⃣ JavaScript visualizer

- A great visualizer for JavaScript code

2️⃣ Learn JavaScript

- Interactive JavaScript tutorial.

Read 14 tweets
2 May
Check out these 10 amazing GitHub repositories 😼

🧵 👇🏻
- 🌟Curated design resources

- A curated list of software and architecture related design patterns 🎨
- 💎 A curated list of awesome Competitive Programming, Algorithm and Data Structure resources

- Tips, tricks, and resources for working with Node.js
Read 6 tweets
1 May
z-index is a powerful yet confusing concept of CSS. But this short thread will solve all your doubts related to it.

Thread🧵 👇🏻
z-index is a CSS property that controls stacking order of elements along z axis.

Image a hypothetical line starting from your eye to screen, that is z-axis
Note that z-index only works on positioned elements.

You need to specify the position (relative, absolute, sticky, fixed) if you want to arrange an element using z-index
Read 8 tweets
30 Apr
5 seamless single div css art that anyone can create for fun 📱🌥️🎧👓🚀

🧵 👇🏻
1️⃣ Mobile Phone 📱

Complete code:… .phone {   position: relative;   height: 128px;   width: 72p
2️⃣ Cloud 🌥️

Complete code:… .cloud {   height: 50px;   width: 140px;   background: #6EC4
Read 8 tweets
29 Apr
10 HTML tips I bet you are not familiar with 🧵 👇🏻
HTML Tip 1

The input with type image defines an image as a submit button. With src attribute that specifies the link to the image
HTML Tip 2

The "step" attribute specifies the interval between legal numbers in an <input> element

Suppose I want the user to only select Sundays in the input date then I'll mention the upcoming Sunday date with 7 stepsDown pointing backhand index
Read 11 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!