A Complete Guide to Getting Started with CSS Thread

Style your Website with CSS

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. …

1. We can’t imagine web development without CSS. See two attached images

1. With CSS

2. Without CSS

Now imagine all websites without styling….

First image is with CSS and second image is without CSS

2. I hope you got it why CSS is important for web development. Alright let’s move onto actually discussion that how you start learning it.

3. First and foremost The characteristic 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

4. 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

https://color.adobe.com/create/color-accessibility

color adobe

5. Don’t think that background property is just for setting the solid color. Background is a shorthand property for background-image, background-position etc..

6. 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

CSS BOX- MODEL

7. 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.

8. 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

Padding vs Margin: The Definitive Guide - UX Engineer

9. 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

10. 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.

11. 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

Type Classifications | Fonts.com

12. fonts .google.com (Download free fonts from here) You just need to look at few fonts properties. For example:-

1. font-family

2. font-weight

3. font-size

13. 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

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

https://twitter.com/Prathkum/status/1355830282247692288?s=20

15. 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.

Thanks for reading! Don’t forget to clap for this tutorial if you liked it and follow me here on Medium if you want to see more in the future!