People who have started learning CSS don’t know how to style the structure of their website so that it will always be responsive with the length and width. Moreover, it is also vital to write the basic style to avoid the repetition of the code. So, in this article, we will learn how to write CSS that will make the website structure responsive.

Use star selector to implement the style on all the elements

Star selector in CSS is used to select all the tags in the HTML document, classes, Id, and other attribute selectors. The * sign represents it. With the help of this star selector, we have to apply some properties and values..

*,
*::before,
*::after 
{ box-sizing: border-box; }

With the help of the above property, you will tell the browser that adjust the border or padding to any of the elements and add it to the width or height so that the component should not go out of the box of a parent element. This style will also apply to all the pseudo-elements created with the help of after and before.

Use of max-width instead of width for the container

The most popular way to center the main container of the body and make it responsive is with the help of max-width instead of width. You will see the two properties which will make this happen in the below code. First of all, I will show you the side effect of using only width to a container with the help of a codpen.

.container
{ max-width: 940px; margin: 0 auto; }

Here is the codepen with only width property

See the Pen basic css styles-max-width by Jaspal (@jaspal9755) on CodePen.

In the example of the above codepen, when the width is less than 940px, the container is no more responsive, and all the content will go out of the body. Therefore you can see the scroll on the bottom of the window.

Here is the codepen with only max-width property

See the Pen basic css styles by Jaspal (@jaspal9755) on CodePen.

You can see when we change the property of width to max-width it becomes responsive. So you should avoid the use of width so that the main container will always remain responsive.

Note: You can use media queries if you would like the container should have different width on different screen breakpoints and assign the value according to the screen width.

Style the Body and H1 tags

If you define the style properties for the body and all the headings, it will make your work easy because these properties will apply to all the child tags of the body tag and reduce the repetition of code. You can see in the below example that I have tried to accomplish the task, and you can also do that while you don’t have to give the same values to the properties. It entirely depends on what you want to achieve.

body
{ margin: 0; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 1.5; color: #212529; } h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1
{ margin-top: 0; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2; }

Style the a and li tags

Anchor tags and lists are also used to style most of the website. So you need to remove the default properties of these two tags. Below styles will help you to perform that.

a
{ text-decoration: none; list-style: none; }

Make the images responsive

Images play a vital role in the look of the website, and if they look ugly in regards to width and height, you will be unable to make any impact on the user experience while visiting your website. To achieve that, you have to use some CSS properties, which I have mentioned below.

img
{ max-width: 100%; height: auto; }

Wrapping Up

You have seen that the above code will help you to write better CSS. All you have to do is practice this code and try to understand the effects of using these styles. You can copy these styles and save them into a file on your computer, and every time you have to make a website, use these, and you don’t need to write it again and again.

Share