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.

CSS3 Format Examples to Change Layout

CSS3 format commands control the display of fonts, links, colors, etc. Use the “class” construct to format the layout of tags you label with a particular class.

Name a class anything you like, and there can be multiple classes. For example, an HTML5 <p> tag can have class named indent.

<p class="indent">This is a paragraph</p>

 

Then make a CSS3 format command that indents every tag of the class indent.

.indent  {

margin-left: 10px;

}

 

Span the CSS3 Format

Use the </span> tag to limit indentation to only the first line. Simply wrap the first word of a paragraph in the <span> tag.

<p><span class="indent">This </span>is a paragraph</p>

 

Add Margins to the CSS3 Format

.gap_below {

margin-bottom: 25px;

}

 

Then add the “gap_below” class to the desired HTML tag.

<p class="gap_below"><span class="indent">This </span>is a paragraph</p>

 

Special Constructors for CSS3 Format

Dynamic changes to the style when a user hovers over an element is a powerful, attention grabbing effect. Filter this effect by first selecting a “class”, and then select a “constructor”.  The hover constructor is often used.

.orange_link:hover {

color: orange;
background: gray

}

 

 

CSS3 Tricks to Exaggerate Your Links

Use CSS3 tricks to exaggerate your links. While HTML5 has basic defaults that make your links noticeable, CSS3 can be used to make them grab the user’s attention.

Remeber that your HTML5 links are shown in the <a> tags. Use the following CSS3 to change all the link color, and remove the underline:

a {
++++color:  red;
++++text-decoration:  none;
}

 

Tray an effect that will pop-out and grab the user’s attention. The CSS3 hover “selector” styles a link when a user hovers over it.

a:hover {
++++color: white;
++++background: red;
}

 

Visit this CSS3 link styling site for many more examples. Please share this page if it was useful. Thanks!

 

Cascading Style Sheet Language CSS3

A Basic Introduction

Cascading Style Sheet language CSS3 is a companion language to HTML5. While HTML controls the content of a webpage, an externally linked CSS file controls how the content is displayed.

CSS3 is the latest version of CSS. It is used in companion with HTML5.

Change Background with Cascading Style Sheet Language CSS3

To change the background color of a <body> tag, for example,  the code is:

body { background: blue; }

 

CSS files are typically saved with a name like “styles.css“.

Connect Cascading Style Sheet Language CSS3 to HTML5

 

In order for stylings to be seen on a page, the CSS file must be meta-linked to the HTML file to apply the stylings. The code to link the file should be placed in inside the <head> tags.


<!DOCTYPE html>
<html lang="en">

<head>

<title>Page Title</title>

<link href="css/styles.css" rel="stylesheet">

</head>

<body>

</body>
</html>

 

The above code example creates a meta-link. The href attribute must point to the correct name and path of the CSS file. It is common practice to keep CSS files in a folder named “css“.

One of the key features of CSS3 is that only one file is needed per web application. Once you link that style sheet to all the desired HTML pages, then all those pages will be changed according to the CSS3 commands.

Change Text Color with Cascading Style Sheet Language CSS3

Another simple command is changing the text color of the body.


body {
background: blue;
color: green;
}

 

Sufficient practice with CSS3 commands will allow any designer take control of how content is displayed.