You are currently viewing Responsive Web Design with CSS: A Step-by-Step Guide
  • Post category:CSS

Responsive Web Design with CSS: A Step-by-Step Guide

How To Create a Responsive Web Design CSS

  • Introduction
  • What is responsive web design?
  • How do you create a responsive web design?
  • What are the benefits of responsive web design?
  • Conclusion

Introduction

  Hello everyone, and welcome to this article about CSS responsive web Design. In this article we are going to discuss what is this concept design and how we can achieve this using CSS media queries. To making a website with an adaptable layout is called a responsive web design. And CSS media queries are one of the most important part of responsive design. In the past building a website was much simpler, today a website layout should adapt itself not only to computer but also to tablet, mobile devices and even tv’s. So, let’s see how we can create a responsive web layout or web design using CSS media keys within help of an example.

What is responsive web design?

  It means that no matter what device you are viewing the website on, your layout or website should change to suit that device. Your font, image, buttons, etc. will change a lot depending on the device. You can use this to design layout mobile screen separately, desktop screen and tablet screen separately. To know responsive web design CSS you need to know the basics of html and css. Before, a website was only on the desktop screen, but now different size of screens has arrived. Then they would write coding for desktop screen and mobile screen separately, now it is only after this responsive web design that the two write coding together.

READ ALSO  How to Add a Blur Effect to an Image in CSS

How do you create a responsive web design?

Syntax:

<html>
<head>
<title> CSS Responsive Design</title> 
<style type="text/css">
.box{
text-align: center;
background-color: orange;
color: white;
display: none;
font-size: 50px;
}

@media (max-width: 400px){
#box1{
display: block;
}
}
@media (min-width: 401px) and (max-width: 600px){
#box2{
display: block;
background-color: green;
}
}
@media (min-width: 601px) and (max-width: 800px){
#box3{
display: block;
background-color: deeppink;
}}
@media (min-width: 801px) and (max-width: 1400px){
#box4{
display: block;
background-color: red;
}
}

</style>
</head>
<body>
<div class="box" id="box1">Windows</div>
<div class="box" id="box2">Mac Os</div>
<div class="box" id="box3">Linux</div>
<div class="box" id="box4">Android</div>
</body>
</html>
  1. Open a any HTML text editor and write HTML general syntax.
  2. Create the four div section in the body of HTML.
  3. Add class and Id attribute for each div.
  4. Name it all classes the same, class = “box”
  5. Name it all Id different, Id=box1, box2 and box3.
  6. Type a name for div, “Windows”, “Mac OS” and “Linux” .
  7. Add some styling for the box text-align, background color ,color, display and font size.
  8. To design the responsive web pages use the media queries.

Before adding media queries, let us see what is media queries and why it should be added :
Media query are used when you want to customize the website’s presentation according to the user’s screen size. With the help of media queries you can display different markups based on the device’s general type mobile, desktop, some tablets. It is a logical operation, whenever a it becomes true. Then the corresponding CSS will be applied to the target element.

Add Media Queries

  1. To start the media query just type @media in the style tag.
  2. Mention the condition for @media, (max-width:400px).
  3. Write the CSS code inside the media query and take effect
  4. When the condition (max:400px) is satisfied.
  5. The style for box1 in @media is, display : block.
  6. Add some more media queries to understand it better so, lets copy box1 media query and Paste down twice.
  7. Mention the condition for box2 @media, (min-width :401px) and (max-width : 600px).
  8. Box2 style will work if this condition is true. Style for box2 in @media is, display : block, bg-color : green.
  9. Mention the condition for box3 @media, (min-width :601px) and (max-width : 800px).
  10. Box3 style will work if this condition is true. Style for box3 in @media is, display : block, bg-color : deeppink.
  11. Mention the condition for box4 @media, (min-width :801px) and (max-width : 1400px).
  12. Box4 style will work if this condition is true. Style for box4 in @media is, display : block, bg-color : red.
READ ALSO  How to Center a Form in CSS | Step by Step Guide

  Save and run in the browser, change the width of the screen. Right click and inspect to change the width is less than 400px, windows div is visible. When we increase the size of the width it goes above 401px, which is the Mac OS display. Keep on increase the size of the width it goes above 600px, which is the Linux div is display. Increase width or normal desktop size it goes above 800px, which is the Android div is display.

  Note that we have used the and operator to combine the two queries to be true, you can also use other operators such NOT only or comma.

What are the benefits of responsive web design?

  • To create responsive web design CSS for desktop and mobile also, 40% + of the customer’s comes from mobile devices.
  • Responsive website will make sure to give you the best first look
  • Used to save time, work and Search Engine Friendliness
  • It is a collection of content in your (CMS) Content Management System.

Conclusion

  So, this is how they are developing a responsive web design CSS for different devices. You can easily add different media queries depending upon your requirement. If you read this article in its entirety you will gain a basic knowledge of media queries in CSS. Feel free to ask the queries in these query section, Thank You Guys.

Leave a Reply