InMotion Hosting Support Center

Continuing our tutorial on how to create a Responsive Template, we are moving to step 3 of the process where we add the CSS links to the stylesheets on the head section. The previous tutorial explained what you need to create for the CSS stylesheets. This tutorial will explain how to link your stylesheets to your HTML document.

Link for the main stylesheet

To get the general styles to work on your website, you will need to link to the file. Below is the code for the link to the style.css file.

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

Using CSS Media attribute

Link for the Desktop Styles

The first style sheet will need to load when the browser size is the typical Desktop computer monitor size. Lately, wide screen monitors are popular, so we will have the large styles load when the browser is larger than 1440 pixels. Below is the link to the desktop-style.css stylesheet from the previous tutorial. You place the code in the head section of your site.

<link rel="stylesheet" media="screen and (min-device-width: 1440px)" href="desktop-style.css" />

The min-device-width is set to 1440px to make the desktop-style.css sheet load when the browser size is at 1440 pixels.

Link for the Tablet Styles

When the browser window goes below 1440 pixels, the medium stylesheet will load. The minimum width is 800 pixels before it will switch to the mobile stylesheet. Below is the code that goes in the head section for your medium-style.css stylesheet for tablets and smaller screens.

<link rel='stylesheet' media='screen and (min-width: 800px) and (max-width: 1439px)' href='medium-style.css' />

Now when the browser goes from a minimum of 800 pixels to a maximum 1439 pixels, the medium-styles.css sheet will load.

Link for the Mobile Styles

The mobile style sheet will be set up to load when the width is a minimum width of 100 pixels and a maximum width of 799 pixels. This will make the website adjust to the mobile version when the width goes under 800 pixels. We will use the following link to the mobile-style.css stylesheet.

<link rel='stylesheet' media='screen and (min-width: 100px) and (max-width: 799px)' href='mobile-style.css' />

This code will load the mobile-styles.css sheet when the browser is below 799 pixels. The style sheet will stop shrinking at 100 pixels.

CSS Media Attributes explained

Below is a brief explanation of what each attribute does.

Feature Description
width The width of the browser window area.
height The height of the browser window area.
min-width The minimum width of the browser window area.
max-width The maximum-width of the browser window area.
device-width The width of the device's entire display area regardless of browser window width.
min-device-width The minimum width of the device's entire display area regardless of browser window width.
max-device-width The maximum width of the device's entire display area regardless of browser window width.
device-height The height of the device's entire display area regardless of browser window height.
orientation The orientation of the device whether "landscape" or "portrait".
aspect-ratio Detects the aspect ratio of the "browser width" to "browser height" of the media. Example 2/1
device-aspect-ratio Detects the ratio of value of the "device width"to "device height" media.
color Number of bits per color component of the device.
color-index Number of entries in the color lookup table of the output device.
monochrome Number of bits per pixel in a monochrome frame buffer.
resolution The "dpi" or "dpcm" resolution on the device.
scan The scanning process of a "tv".
grid Detects whether the device is grid or bitmap.

The entire code for the head section

ResponsiveTemplate with stylesOnce you understand how the stylesheets will load, you can add the code to your website. The below code is the entire head section you will need at the top of your HTML code. The links to the stylesheets are in red. Copy the following code and place it at the top of your HTML code.

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Fluid Responsive Template</title>
 <link rel="stylesheet" href="style.css" />
 <link rel="stylesheet" media="screen and (min-device-width: 1440px)" href="style.css" /> 
 <link rel='stylesheet' media='screen and (min-width: 800px) and (max-width: 1440px)' href='medium-style.css' />
 <link rel='stylesheet' media='screen and (min-width: 100px) and (max-width: 799px)' href='mobile-style.css' />
</head>

Now that you have the code for the stylesheets and the HTML you will need to add the Viewpoint META tag for the mobile devices to accept the styles.

Continued Education in Course 206: Creating Responsive Templates
You are viewing Section 4: Step 3: Links to the stylesheets in Responsive Templates
Section 3: Step 2: Adding CSS styles to a Responsive Template
Section 5: Step 4: Adding the Viewpoint Meta Tag to the Responsive Template

Support Center Login

Social Media Login

   
Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2016-04-15 2:49 pm

Great Job!

You guys are fantastic! I'm going to be looking into moving over to your servers as soon as I can get my domain out from under them.

I'm really impressed with the open and honest way that you guys represent yourselves as well as your willingness to give information by way of these tutorials at the risk of sacraficing what others would consider profitable 'information'.

My thoughts on that are 'Bring them in? Do exactly what you guys do!'

There seems to be many ways to quiry media types. And none of them could be considered the wrong way simply because they work. I don't know if that statement could be an indication of loose web standards or not but sometimes I find myself wishing there was an A to C area from which to build within. Anything outside of that breaks and thats that!  This of course only apply's to syntax/markup etc.

I'm actually refreshed to see that the only difference between how you do it and how I do it is the number of stylesheets involved. I place all my quiry's with their corresponding configurations into one CSS document.  Is this not a good practice? Should I be using separate sheets?

Thanks again and have a great day folks!

Staff
9,113 Points
2016-04-15 3:04 pm
Hello Scott,

Using the same stylesheet is fine, I tend to put all the css files in one folder and then create a php file to include each css file. Then include that one php file which in turn pulls all of the css files. There are a few different ways to do what you are looking for but what every works best for you should be fine.

Best Regards,
TJ Edens

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

4 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!