CSS TUTORIAL

CSS stands for Cascading Style Sheets.

HTML5 elements are organized with the use of CSS.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

We can use CSS in 3 ways:

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

1. Inline CSS

 <p style="color:red;">This Heading is red in color.</p> 

Output:

This Heading is red in color.

2. Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html> 

Try this out in your text editor.

3. External CSS

To use an external style sheet, add a link to it in the <head> section of the HTML page.

a. Create a file name: Index.html

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html> 

b. Create a file name: styles.css

Make sure, you should have both the files in same folder or directory.

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

If you have any more issues relating to this article, please let us know by commenting and we will help you as soon as possible. thanks.

Leave a Reply

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