HTML with CSS

by

CSS or Cascading Style Sheets apply style to HTML elements to make them more attractive when displayed on a web page.

There are 3 ways to apply CSS to HTML elements. These are:

  • Inline CSS: Uses the style attribute in HTML elements.
  • Internal CSS: Uses a <style> element in the <head> section.
  • External CSS: Uses an external CSS file.

Inline CSS:

Uses the style attribute to apply CSS to a single HTML element.

Example:

<!DOCTYPE html>
<html>
<body>
<h1 style="color:crimson;font-style: italic;">Hello World!!</h1>
</body>
</html>

Explanation:

In the above example, we used the style attribute to add CSS to a single HTML element.

Internal CSS:

Uses a <style> element in the <head> section to apply CSS to a single HTML page.
Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1   {background-color: crimson; color: white;}
p    {color: crimson;font-size: 25px;font-style: italic;}
</style>
</head>
<body>
<h1>Hello World!!</h1>
<p>How are you?</p>
</body>
</html>

Explanation:

In the above example, we used a <style> element in the <head> section to apply CSS to a single HTML page.

External CSS:

Uses an external CSS file to apply CSS to multiple HTML pages. The link tag is used to include an external file in a html page.

Note: Most of the websites contain multiple pages and the look and feel should be the same for the entire website. So, instead of applying CSS to individual pages, we can create an external CSS file that can be included on all or any page wherever needed. With this approach, we can change the look and feel of the entire website by just changing one file. This is the most common approach to applying CSS.
Example:
Hello1.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>How are you?</p>
</body>
</html>

Hello2.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello w3schools</h1>
<p>How are you?</p>
</body>
</html>

style.css:

h1   {
background-color: crimson; 
color: white;
}
p    {
color: crimson;
font-size: 25px;
font-style: italic;
}

Explanation:
In the above example, we used an external CSS file to apply CSS to multiple HTML pages.

CSS Properties:

Some of the commonly used CSS properties are:

Property Syntax Uses
background-color background-color:yellow; To specify the background color of an HTML element.
color color: crimson; To specify the color of the text of an HTML element.
padding padding: 10px; To specify the space gap between content and the border.
margin margin: 20px; To create a space gap around an HTML element.
font-family font-family: arial; To specify the font family for an HTML element.
Font-size font-size: 20px; To specify the font size for an HTML element.
text-align text-align: center; To align a particular text in a selected position.

HTML Style Tags

style tag: It is used to apply and define details for an HTML Page.
link tag: It is used to include an external CSS into an HTML page.