Ways to add CSS

       No comments

 




We can add CSS in three ways: 
  • Inline CSS, Internal CSS, and External CSS
  • Inline CSS is written in the opening tag of the HTML element by using the style attribute.
  • Internal CSS is written in the head tag of HTML by using a style tag.
  • External CSS is written in the external file with a .css extension.
Types of CSS
  • There are mainly three types of CSS, 
  • Inline CSS
  • Internal CSS 
  • External CSS.
Inline CSS 
  • Inline CSS is written in the opening tag of the HTML element by using style attribute and we can write our CSS for every element of HTML.
  • However, it is difficult to write CSS for every element individually. In Inline CSS the CSS style is written within double quotes " " like this style=" ". Let's see with an example:
    <h1 style="color:violet">Hello, I'm using in line CSS</h1>
Internal CSS
  • Internal CSS is written in the head tag of HTML by using style tag. This stylesheet is included in the HTML file.
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>Hello welcome</h1>

</body>
</html>
External CSS 
  • External CSS is written in the external file with a .css extension. And this is almost the same as Internal CSS but this is a different CSS file.
  • This will be added using <link> tag. This style can be used on multiple HTML pages by linking them with <link> tag.
<!DOCTYPE html>
<html>
<head>
	<title> External CSS </title>
	<link rel = “stylesheet” href=”style.css”>
</head>
<body>

<h1>Hello welcome</h1>

</body>
</html>

0 Comments:

Post a Comment

Do leave your comments