How to Insert CSS Files Into Your Web Pages

Every web document is made up of three basic layers – content, presentation, and behavior. The style and layout that a website visitor sees on the page belong to the presentation layer, and Cascading Style Sheets (CSS) is the recommended coding language used to control the said layer.

CSS is a Web Markup language used by designers and developers to define the overall appearance (style, layout, position) of web page elements. Before you can utilize CSS coding in the design of your website you should at least have a basic understanding of HTML or XHTML. CSS Web Markup Language

The style sheets will be read by the browser, formatting the web page according to the codes in the CSS file. Here are 3 ways to insert CSS files/codes into your web pages:

  • With an External Style Sheet

An external style sheet allows you to change the look of the entire site by changing a single file. This is ideal when a particular style you want to modify is applied to multiple or all of the pages (e.g., customizing the text font used in all of the pages).

An external style sheet can be coded using any text editor and should be saved with a .css extension (e.g., myexternalstylesheet.css). Remember not to include html tags in your css file.

A sample code found in an external style sheet is shown below:

hr {color: red; }
p {margin-right: 30px}
body {background-image: url (“images/sample.jpg”); }

All the pages that you want to customize using the codes above should be linked to the style sheet file using the <link> tag. The <link> tag should be placed inside the head section of every page.

<head>
<link rel=”stylesheet” type=”text/css” href=” myexternalstylesheet.css”>
</head>

 

  • With an Internal Style Sheet

An internal style sheet is commonly used when a single page has a unique style than the rest of the website. Use a <style> tag to define internal style sheets inside the <head> tag of an HTML page.

Here’s an example:

<head>
<style type=”text/css”>
p {margin-right: 30px}
body {background-image: url (“images/sample.jpg”); }
</style>
</head>

  • With Inline Style Sheet

 Inline CSS coding is not recommended as it mixes the content and presentation thus losing the many advantages of style sheets.

To use inline style, use the style attribute inside each relevant tag. By using the style attribute you will be able to define any CSS property that you want. The example below shows how to edit the color and the right margin of a paragraph:

< p style=”color: red; margin-right: 30px”>This is a paragraph.</p>

There are times when some properties are set for the same selector in multiple style sheets. In cases like these, the values that will be displayed by the browser are the ones inherited from the more specific style sheet.

Say we have an external style sheet defining an h3 selector with the following properties:

h3
{
color: red;
text-align: right;
font-size: 12pt;
}

And then we have an internal style sheet for the same h3 selector with the following properties:

h3
{
text-align: left;
font-size: 8pt;
}

If the html page containing the internal style sheet is also linked to the external style sheet, the properties for the h3 selector will be as follows:
color: red;

text-align: left;
font-size: 8pt;

The color value comes from the external style sheet while the text-align and font-size values are inherited from the internal style sheet.

Image by SXC

 

 

Article By: Wasim Ismail

Wasim’s a project manager at Alrayes Web Solutions along with an online SEO consultant & blogger for business at wasimismail.com, specialising in online business.


Comments are closed.