Prev Next

Ways to use CSS

How to use CSS?

CSS style rules can be written at three different places.

  1. Inline style
  2. Internal Style Sheet
  3. External Style Sheet

Inline Styles

Inline style is used to apply unique styles for a single element. It uses style attribute to declare the style. The value of style attribute is a declaration. See the below given code.

<h1 style="color:green;"> Sample of Inline styling. </h1>

Declaration describes the styles to be applied to the <h1> element.

Inline style example

<html>
<head>
<title> Inline styling</title>
</head>
<body>
<h1 style="color:green;"> Inline styling. </h1>
</body>
</html>

Internal style sheet

Internal style sheet is used to apply unique style in the current page. It uses the <style> element in <head> section of HTML document to
describe style rules. See the below given code.

<head>
<style>
h1 {color:red; font-family:verdana;}
</style>
</head>

Internal style sheet Example

<html>
<head>
<title> Internal styling</title>
<style>
h1 {color:red; font-family:verdana;}
p {color:darkorchid; font-size:16;}
</style>
</head>
<body>
<h1>Red color heading .</h1>
<p>Font size and color of the text displayed in
default values.</p>
</body>
</html>

External style sheet

External style sheet method calls the style rules from a separately stored CSS file using the element in section of HTML document. CSS file is a separately stored file with extension name .css that holds style rules for different types of HTML elements. See the below given code.

<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>

Same CSS file can be referred in many pages. So, just one CSS file can change the look of an entire website.

Using multiple style sheets

If a selector (element) has different style rules defined using different style sheets then the value from the last read style sheet will be rendered by the browser.
For instance, when we write code in external style sheet, we provide link in head section of our HTML document as below:

<link rel=”stylesheet” type=”text/css” href=”style1.css”>
In the above example, href attribute declares the file “style1.css” which will be read first by HTML document and the system will apply it
accordingly.

Apart from the style referred in external style sheet, if you have declared specific style for the page using internal style method, the internal style file will be read next to external style, and if specific change is declared for some elements, that will be applied to those elements.

The inline style, if you have used any, will be read after internal style.

So, if you are using multiple style sheets, browser will read the CSS code in the order – external style, internal style and inline style, and the value from the last read style sheet will be used.

Leave a Comment