• Have Any Question?
  • contact@eitworld.com

HTML Styles – CSS





  • CSS stands for Cascading Style Sheet. CSS is used to put styles in the web page elements.
  • The styles can be added to the web page by three methods-
    • ◉ Inline- When style attribute is used in each element that is to be styled, this is called Inline Style.
    • ◉ Internal- When style element (<style>) is used in the current html document, this is called Internal Style.
    • ◉ External- When an external css file (style sheet) is used for styling, this is called External style.
  • Note: The above methods are defined in decreasing way of priority.

Inline Styling

  • Each element that is to be styled contains style attribute.
  • This method has the highest priority among three methods. It means, if same style has been defined in more than one method for a particular element, only the style that is defined by inline method will be taken into consideration.

Syntax

<opening_tag style= “css styles;”>

Example : Inline Styling

<!DOCTYPE html>
<html>
<body>
<p style=”font-family:verdana; color:black; background-color:yellow;”>This is the text.</p>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

Internal Styling

  • The styles for all elements are defined in style element normally in head part.
  • This method has the second highest priority among three methods.
  • id attribute of the element to be styled is used to mention it in style element.

Syntax

<style type= “text/css”>
#id{css code;}
</style>

Example : Internal Styling>

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
#para1{font-family:elephant; color:yellow; background-color:green;}
</style>
</head>
<body>
<p id=”para1″ style=” background-color:blue;”>This is the text.</p>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output

As seen in the example, the id of the <p> element is para1 for which the css style has been defined in style element in head part. background-color is the style that is defined two times in the document once by internal method and secondly by inline method. Because of higher priority, only the inline method has its impact.

External Styling

  • An external file with extension .css called a style sheet is linked with the document.
  • <link> tag is used for this purpose.
  • Attribute rel will contain the value stylesheet and href will contain the location of the css file.
  • It has the lowest priority among three methods.
  • id attribute of the element to be styled is used to mention it in css file.

Example : External Styling

Consider we define a style sheet file mystyle.css which has following rules:

.class1{
color: blue;
}
.class2{
font-size:20px;
}
.class3{
color:orange;
}

Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags.We suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let’s make use of the above external CSS file in our following HTML document:

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<h1 class=”class1″>This is blue.</h1>
<h1 class=”class2″>This is 20 px thick.</h1>
<h1 class=”class3″>This is orange.</h1>
</body>
</html>

To see live output : Visit Try Yourself Editor

Output



Real Time Web Analytics