Home / Web / What are ways of inserting a style sheet?
style sheet

What are ways of inserting a style sheet?

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the Consortium was founded in 1994.

Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).

There are three ways to insert stylesheet :

  • External style sheet
  • Internal style sheet
  • Inline style
  1. External Style Sheet:

With an external stylesheet, you can change the look of an your entire webpage by changing just one file! Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

For Example:

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

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the “style.css” looks:

#header {
background-color: green;

h1 {
color: red;
margin-left: 29px;

Important Note: Do not add a space between the property value and the unit.

  1. Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

For Example:



h1 {    background-color: yellow;}

h1 {    color: green;

margin-right: 40px;}



  1. Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the right margin of a <h2> element:

For Example:

<h2 style=”color:green;margin-right:30px;”>This is a my first heading.</h2>

About Chetan Kalbande

• Working knowledge in Magento, Wordpress, Joomla, PHP, HTML5, CSS3, Bootstrap front-end framework and Foundation front-end framework. Experience of PSD to HTML and HTML to Wordpress. Having knowledge on theme development of Wordpress, directory structure and responsive UI of Magento. E-Commerce development using Magento, Opencart, Woo-Commerce . Clean , attractive and responsive website development using Wordpress and Drupal. Estimation, design and development of various modules. Work on Search Engine Optimization to improve the search engine rank of website. Working knowledge and handling experience of Google Absence and different affiliates account. • Knowledge of Jquery Mobile, Android application development and Phone gap. Experience of Developing and maintaining web base portal or directory website. Work closely with the other team members to meet client goals. Promote on page SEO activities and also the interactions that build ranking, profile and traffic.

Check Also


503 Service Unavailable Error (What It Is and How To Fix It)

The 503 Service Unavailable error is an HTTP status code that means the web site’s ...

Leave a Reply