HTML codes use the properties of Cascading Stylesheet to make it look more attractive by adding images, videos, and changing the fonts, margin, and borders of the text on the webpage.

It controls the styling of multiple webpages simultaneously, every property in HTML CSS has name and value pair and separated by a semicolon. Let us understand the basic use of CSS in HTML. Visit CSS tutorial for a deep understanding of CSS.

Features of HTML CSS

HTML CSS controls the variations of size, color, media, and spaces between the paragraph on the webpage.
HTML CSS is used to function the link tag in HTML program. It decorates the layout of HTML code with multiple styling properties.
CSS uses multiple tags and attributes in HTML which saves lots of time of writing codes.
HTML CSS also use Padding property to give space interior the border and the text.
HTML CSS also use margin property to give space exterior the border.

Using CSS In HTML

CSS can be included in HTML codes in three major ways

1. Inline CSS: It is used by applying <style> attribute in HTML element with the appropriate tag and It is used when changing a style uniquely each HTML element.

Eg: Program to print in HTML for a particular text using CSS style attribute :

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>learn HTML CSS </title> 
   </head>
 
   <body> 
      <p style = "color:blue;">welcome to codedec</p>  
      <p style = "color:maroon;"> lets code</p>  
   </body>
 
</html>

output:

2. External CSS: It is defined in the <head> tag of the HTML code. It is used to style multiple pages ,for that a separate CSS file with .CSS extension is created and then it is included in HTML code by using the <link> element.

Eg: Program to print in HTML for many webpages using CSS link attribute :

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is CODEDEC</h1>
<p>EXAMPLE OF HTML CSS.</p>

</body>
</html>

A glance at the style.CSS file in which you will learn further detail in the CSS article.

 body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

Output:

3. Internal CSS: It is defined in the <head> tag of the HTML code and used with the class and id attributes. It is used to change the style of a single HTML webpage.

Eg: Program to print in HTML for a single webpage using CSS style attributes :

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: Chartreuse;}
h1   {color: red;}
p    {color: Fuchsia;}
</style>
</head>
<body>

<h1>Welcome to codedec</h1>
<p>example HTML CSS.</p>
</body>
</html>

Output:

How to use CSS in HTML

Features of HTML CSS

Using CSS In HTML