In the last part of this starters guide, we discussed talked about what CSS was, how it affected browsers and briefly looked at how CSS looks. Today we will be discussing the different placement types of CSS. CSS can be placed inside a document using three methods: internal, external and inline. Each method has its own advantages and disadvantages. Some designers often do use all three methods in their codes where as most choose to keep the styling codes in one separate location to ‘beautify’ their front-end code.
Inline CSS
In CSS it is possible to place styling in your HTML code. Inline CSS has the highest priority out of the three methods. However, as Tizagon.com explains it, inline CSS detracts from the true purpose of CSS.
Believe it or not, CSS is built into every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. Let’s see this in action with defining a paragraph tag:
1 2 3 |
<p style=”background-color: #000000; color: white;”> This is inline CSS with a brown background and white font color. </p> |
<p style=”background-color: #000000; color: white;”> This is inline CSS with a brown background and white font color. </p>
The output of this is:
Common Mistakes
When using inline CSS you must make sure that you do not use quotations with your CSS. If you use quotations, the browser will interpret this as the end of your style value. The simple solution to that problem is not to use quotations at all. An example of this is:
1 |
<p style=”background: url(“brown.png”);”>This will not work.</p> |
<p style=”background: url(“brown.png”);”>This will not work.</p>
1 |
<p style=”background: url(brown.png);”>This works!</p> |
<p style=”background: url(brown.png);”>This works!</p>
This example outputs:
Internal CSS
Internal style sheets are styles that are placed in the <head> section of the HTML document. These styles will only affect the document they are in and cannot be referenced by any other web documents. The main advantage of inter CSS is that it only affects the page they are on. If you are working on a large site and need to test styles before you load them on the site as a whole, inter CSS can be a great tool. It allows you to test the styles in the context of the entire site without breaking any page buy the one you are testing. Unlike inline CSS, internal CSS can use classes and IDs. Furthermore, Internal CSS does not require you to upload multiple files and have a higher precedence than external style sheets.
Internal CSS is placed inside the <head> element as follows:
1 2 3 4 5 |
<style type=”text/css” media=”all”> <!-- selector { property: value; } --> </style> |
<style type=”text/css” media=”all”>
<!--
selector { property: value; }
-->
</style>
Just like anything is the world, there are disadvantages of using internal CSS. Although it is one of the advantages, inline CSS affecting only the page they are on can also be a disadvantage. If you want to use the same styles in several documents, you need to repeat them for every page. Another disadvantage is also a big one. Internal CSS increases page load times. Every page that has an internal CSS you must load and parse the style sheet information every time the page is loaded.
External CSS
One of the best things about CSS is that you can use them to keep your site consistent. The easiest way to do this is to link or import an external CSS. With external CSS you can control the presentation semantics of several documents at once. Since all pages share the same CSS files, unlike internal CSS, external CSS are cached by browsers which improves the load times for every page after it is first loaded. You can also create classes and ids of styles that can be used on many different HTML elements. Furthermore, you can easily group your styles to be more efficient. All the grouping methods that are available to CSS can be used in external CSS which helps provide you with more control and flexibility on your pages. There are two methods of loading an external CSS: linking and importing.
Linking
In order to link a stylesheet, you use the HTML tag. This has the attributes rel, type, and href. The rel attribute tells what you are linking (in this case a stylesheet), the type defines the MIME-Type for the browser, and the href is the path to the .css file. For example:
1 |
<link rel=“stylesheet” type=“text/css” href=“stylesheet.css” />
|
<link rel=“stylesheet” type=“text/css” href=“stylesheet.css” />
Importing
You would use an imported style sheet within a document level style sheet, so that you can import the attributes of an external style sheet while not losing any document specific ones. You call it in a similar way to calling a linked style sheet, only it must be called within a document level style declaration. For example:
1 2 3 4 |
<style> @import URL (http://www.yoursite.com/styles.css); ... continue styles </style> |
<style> @import URL (http://www.yoursite.com/styles.css); ... continue styles </style>
This is it for part 2 of this Starters Guide to CSS. Stay tuned for part 2.
