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.
Web development without CSS wouldn’t be the same. Consider a page like this:
Now remove the CSS and here’s what we have:
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.
Don't think that background property as being just for setting a solid color.
background is a shorthand property for
background-position, and more.
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.
width properties are used to set fixed height and width to the element. There’s also
min-height to control height and width boundaries.
Proper and uniform separation of elements is something that can give your webpage an appealing look. The
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 properties apply styles between the
margin styles. You can control the color, width, and style of borders, which can help give your elements a pleasant look.
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.
There are five basic classifications of fonts:
Give this article a read for more detailed explanation.
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:
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— Pratham (@Prathkum) January 31, 2021
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
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.
A complete beginner's guide to CSS Grid layout 👇🏻— Pratham (@Prathkum) March 24, 2021
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.
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— 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! ❤️
Dive deep into CSS position with real examples.