How to add CSS?

Cascading Style Sheet CSS is added to HTML pages to format the document according to information in the style sheet. There are three ways to insert CSS in HTML documents. Most commonly used methods are inline CSS and External CSS.

  1. Inline CSS
  2. Internal/Embedded CSS
  3. External CSS

Inline CSS

Inline CSS is used to apply CSS on HTML element.
<p style="color:#FF0000">Learn CSS</p>

Example :

<!DOCTYPE html>
<html>
<body>
<h1 style="color:#000000;text-align:center;">CSS Tutorials</h1>
</body>
</html>

Internal/Embedded CSS

Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page.

The internal style is defined inside the <style> element, inside the head section.

h1{color:green;}

Example :

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-family:Arial, Helvetica, sans-serif;
}

h1 {
 color:#000000;
 text-align:center;
 font-size:16px;
}
</style>
</head>
<body>
<h1>CSS Tutorials</h1>
</body>
</html>

External CSS

External CSS is used to apply CSS on multiple pages or all pages in website. We can write all the CSS code in a css file. Its extension must be .css for example style.css.
You need to link this style.css file to your html pages like this as below.
<link rel="stylesheet" type="text/css" href="style.css"> 

Example :

file name :
style.css

body {
  font-family:Arial, Helvetica, sans-serif;
}

h1 {
 color:#666666;
 text-align:center;
 font-size:14px;
}


file name : home.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>CSS Tutorials</h1>
</body>
</html>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

17888