CSS3 Responsive Styling – Simple Examples

CSS3 responsive styling means the web page changes the way it looks depending on the size of the browser or screen size.

Let’s look at a simple example of how to make a site responsive.

Here is some HTML5 text for a simple web page:


<html>
++<head>
++++<link rel="stylesheet" href="styles.css">
++</head>
++<body>
++++This is the body text.
++</body>
</html>

Using CSS3 responsive styling we can make the background green:


body {
++background:green;
}

Now, this is not the most practical example, but what if you only want a green background on browsers at least 1000px wide?


@media (min-width: 1000px) {
++body {
++++background:green;
++}
}

 

This is one way to test an aspect of the browser. You can Google CSS3 media queries to find out many other browser tests you can do with CSS3.

For now, you can change the background color to red, or blue. You can change the minimum width to 500px, or whatever you like. Play with your browser width and see how it responds.

Get Fancy with CSS3 Responsive Styling

Suppose you want two columns on a wide window, but only one column to display on a narrow window.

Setup the HTML5 first:


<html>
++<head>
++++<link rel="stylesheet" href="styles.css">
++</head>
++<body>
++++<div class="responsive">
++++++column 1
++++</div>
++++<div class=”responsive”>
++++++column 2
++++</div>
++</body>
</html>

 

Now we need to connect CSS3 properties to the ‘responsive‘ class.


@media (min-width: 750px) {
++.responsive {
++++display: inline-block;
++++width: 200px;
++++border: 1px solid black;
++}
}
@media (min-width: 1000px) {
++.responsive {
++++display: inline-block;
++++width: 500px;
++++border: 1px solid black;
++}
}

css3-responsive
Responsive design means content will adapt to the shape of the screen.

With the code above you set the column width at 200px if your browser is at least 750px wide, and you set the column width to 500px if your browser is at least 1000px wide. If the browser is not at least 750px, then the columns will be stacked on one another, so it’s effectively one column. See a CSS3 example of this responsive styling.

The responsive Bootstrap layout makes CSS3 responsive styling easy. Bootstrap is a library full of pre-defined CSS3 classes. This makes designing sites fast for developers, because they don’t have to write custom code. The drawback could be that because so many people are using Bootstrap, this creates a similarity in look among Bootstrap sites. Creating unique CSS3 responsive classes can help set your site apart.

Leave a Reply

Your email address will not be published. Required fields are marked *