Use of Style in HTML, CSS

1
341
html style

HTML is quite limited when it comes to the appearance of its elements. This is not so good if you’re trying to give a website a unique look and feel, or you’re trying to adhere to a corporate identity.

But it’s not the purpose of HTML to do such things. That’s the job of CSS.

CSS was introduced together with HTML 4, to provide a better way to style HTML elements

What is CSS?

CSS stands for Cascading Style Sheets, and its purpose is to enable web authors/designers to apply styles across their websites.

The syntax of style attribute is given below:

style = “property: value;”

Types of Style Sheet

There are three ways to implement styles into an HTML document.

  • Inline – Using the style attribute in HTML elements.
  • Internal – Using the <style> element in the <head> section.
  • External – Using an external CSS file.

Inline CSS

An Inline style can be used if a unique style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and left a margin of a paragraph.

<p style="color: red; margin-left: 20px;">This is a paragraph</p>

Internal Style

An internal style sheet can be used if one single document has a unique style are defined in the <head> section of an HTML page, by using the <style> tag, like this:

<!DOCTYPE html> 
<html>
<head>
   <title>Internal Style Example</title>
 <style>
     body { background-color: yellow; } 
     p { color: red; } 
 </style> 
</head>
<body>
   <p>This is a paragraph</p> 
</body> 
</html>

External Style

An External style is ideal when the style is applied to many pages. with an external style sheet, you can change the look of an entire website by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section.

Consider we define a style using CSS in style.css which has following code:

#pid { color: red; background-color: pink; font-weight: bold; }

Now let’s make use of the above external CSS file in our following HTML document:

<!DOCTYPE html> 
<html> 
<head>
  <title>External Style Example</title>
  <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
  <p id="pid">This is a paragraph</p> 
</body> 
</html>

 

 

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here