HTML and CSS for beginners – Part seven

Web design and development based in Royston, Hertfordshire, United Kingdom

Griffiths Web Design

HTML and CSS for beginners – Part seven

07709 579517

michael@griffithswebdesign.com

HTML and CSS for beginners – Part seven

By Michael Griffiths

Created: 09.12.2016 00:00:00, last updated: 09.12.2016 00:00:00

HTML and CSS for beginners – Part seven

part 7 of HTML and CSS for beginners by Michael Griffiths of Griffiths Web Design

Layouts in CSS


For me one of the most important and useful aspects of CSS is its ability to create complex layouts that would otherwise not be possible. There was once a time when developers used HTML tables for layouts, but the less said about that dark time the better.


The best way to learn about layouts in CSS is to give it ago. At the same time we will be discussing positioning, media queries and several other aspects of CSS.


The layout we will create in this example will be responsive, which means this page will work nicely on an array of different screen sizes.


The layout will look like this on a large screen, such as a desktop computer or laptop.


An extremely common layout, as seen on millions of websites.

As you can see from the image it is a fairly standard layout.


The header will contain the brand name / site name and it will also contain the navigation.


The main column is for your important content, the reason people will visit your site in the first place.


We also have a side column, this will contain the less important content which is not directly linked to the main content. For example it could house a secondary navigation or social media widgets.


Finally we have a footer. This will contain copy right information, contact details, links to site maps etc.


This layout is proven out in the wild of the internet. However when viewed on a smaller screen, like a mobile phone, there would be lots of side scrolling involved. Unfortunately, as human beings, we are quite a lazy bunch and only like to scroll in vertically.


Something to think about - I have seen some beautiful sites that have effectively used side scrolling to add to the experience of their site but those same sites had no vertical scrolling. The user had to scroll sideways to view the page. They also added some animations to the page that came alive as you scroll past them, which really enhanced the story telling. When you have the basics of css down to a tee then I would strongly suggest giving something like this a go, to push your craft to the next level.


Now back to our layout, as I said before we will be creating a responsive layout. So when viewed on a mobile the different sections of the page will rearrange themselves to fit nicely on a small screen. It will look like this:


The layout of our webpage for smaller screens like mobiles and tablets.

As you can see from the very grey image the header and footer are still in the same place but this time the main column and side column are both the full width of the container, with the main column taking precedence over the side column at the top.


The mark-up


The first step to creating our layout is the mark up. We will create a div, with the id ‘wrapper’. This div will contain all of our elements that we will be adding, header, main column, side column and footer. In between the body tags of a HTML document add the following mark-up:


<div id="wrapper">
<header>

</header>
<section>

</section>
<main>

</main>
<footer>

</footer>
</div>

Mobile first


We will be designing our layout from small screens upwards, known as the mobile first approach. Many CSS frameworks take this approach, Bootstrap is a prime example of this (there will be more on bootstrap later on). To do this we need to use media queries.


Media queries


A media query is a way of telling the browser that if a certain condition is met then the browser should implement the styles listed within that media query.


Media queries consist of an optional media type and according to the CSS3 specification can contain zero or more expressions which are expressed as media features. If the media type matches the device that the document is being displayed on and the expression equates to true then the styles listed within the media query will be applied. Within the media query the normal rules of cascade apply.


Note - when the browser downloads the css, it will download all of it. However it will only apply the style rules if the media query returns true.


The media queries we will be using will not contain a media type, instead they will only have an expression. A very simple but ultimately useful expression. We will be detecting the screen width and applying styles based on that detection.


So what are the sizes we are looking for? Well, unfortunately there is no right or wrong answer but the queries we will be using are fairly common ones. In fact the break points are the same as those used by the Bootstrap framework.


Note – Media queries won’t work in Internet Explorer 8. No problem if you do not plan to support older browsers but most of the time you will need to support them. To combat this there is a handy script around called ‘Respond.js’. This enables media queries in IE8. Remember the HTML5 shiv we added inside conditional comments? Well that’s where we need to declare this script because not all browsers will need it just that pesky IE. In the head section of your HTML document locate your conditional comments and add a reference to respond. You can either download the script or link to a ‘cdn’ (content delivery network). Personally I prefer linking to a ‘cdn’. The reason for this is because there is a strong possibility that the user already has it cached in their browser and therefore does not need to download it again. If you choose to download the file and include it in your project then every first time user of your site will have to download the file which will slow down page load times.


If you chose to link to a cdn then your conditional comments should look something like this:


<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Now we have enabled media queries in older versions of IE we can move onto the style sheet itself. First create an empty style sheet, a file with the extension ‘.css’. Call it whatever you like, I named mine ‘layout.css’. Then in the section of your HTML document add a link to the CSS file, like so:


<link type="text/css" rel="stylesheet" href="layout.css" />

This link to the style sheet assumes that it is in the same folder as the HTML document. If your style sheet was in a folder called ‘css’ then the url in the href attribute would be css/layout.css


We now have a CSS file linked to our HTML document so let’s add some media queries. Open up your css file and add the following code:


/*
******************************
***styles for mobile and up***
******************************
*/



/*
************************
***styles for tablet+***
************************
*/
@media (min-width: 768px) {
}

/*
*************************************
***styles for computer screens etc***
*************************************
*/
@media (min-width: 992px) {
}

/*
****************************
***Styles for wide screen***
****************************
*/
@media (min-width: 1200px) {

}

As you can see there is no query for screens smaller than 768px wide. This was left out intentionally. The reason for this is that the mobile first approach we are taking. All of the small screen styles will be applied by default then if the screen size is bigger the appropriate queries will add to/ overwrite the styles declared outside of the media queries as necessary.


Now we have set up our media queries it’s time to write in some styles. Using the properties that we have discussed so far we can create a responsive layout for our webpage. Below you’ll see the complete CSS required to create our layout.


/*
****************************
***style sheet for layout***
****************************
*/

/*
************
***Resets***
************
*/
* {
border: 0;
padding: 0;
margin: 0;
}

/*
******************************
***styles for mobile and up***
******************************
*/
#wrapper {
width: 100%;
height: auto;
overflow: hidden;
overflow-y: scroll;
position: relative;
}

header {
width: 100%;
height: 40px;
padding: 15px;
background: #000000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


main {
width: 100%;
padding: 5px;
background: #ff0000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#sideCol {
width: 100%;
padding: 5px;
background: blue;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

footer {
clear: both;
width: 100%;
background: gray;
height: 100px;
}

/*
************************
***styles for tablet+***
************************
*/
@media (min-width: 768px ) {
header {
height: 70px;
padding: 20px;
}

main {
padding: 10px;
width: 75%;
margin: 0;
float: left;
}

#sideCol {
width: 25%;
padding: 10px;
margin: 0;
float: left;
}


}

/*
*************************************
***styles for computer screens etc***
*************************************
*/
@media (min-width: 992px) {
header {
height: 70px;
padding: 25px;
}

main {
padding: 20px;
}

#sideCol {
padding: 20px;
}
}



/*
****************************
***Styles for wide screen***
****************************
*/
@media (min-width: 1200px) {
header {
height: 100px;
padding: 30px;
}

main {
width: 70%;
padding: 30px;
}

#sideCol {
width: 30%;
padding: 30px;
}
}

As you can see there is no great complexity to our code. There is one noteworthy bit of CSS that we have not covered yet, *. This symbol is known as a universal selector. We use this for our resets (Some of the browsers add margin, padding and borders by default to certain elements) because it will apply our reset to every element in the document. However please do not abuse the universal selector as it can impact on your page load time.


A note on CSS resets


The resets I used in this CSS document basic to say the least. I would not recommend using such a weak reset in your projects. I only used it in the example to hint at CSS resets. Instead I urge you view this post:


http://meyerweb.com/eric/tools/css/reset/

The "meyerweb reset" is a commonly used reset. Most people will more than likely just grab the code and chuck it in their project. I advise against this practice, and so do the authors of the code. Instead you should use it as a starting point and adjust the defaults to suit your project. I have myself used this code in projects, although I did as I just advised and modified it to suit my needs. So thank you Eric Meyer for your contribution to the world of technology.


That’s all for now. Thank you for reading. Any social shares would sure be appreciated! Also if you have any comments or questions then use the form below to submit them. If you would like to contribute to / improve on this guide then please head over to my contact page on my website and use the form to get in touch. I always welcome any input you may have.


About Michael Griffiths

Web Developer and Social Media Coach

Comments