HTML Style CSS

In this tutorial, you will learn HTML Style CSS and its type and how to use it

There are 3 methods to use CSS in our HTML Documents:

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

Inline CSS

Here is a simple tutorial on how to use inline CSS styles in an HTML document:

  • Start by creating an HTML document with the basic structure in place, including the <html>, <head>, and <body> elements.
  • Next, locate the HTML element where you want to apply inline styles. You can apply inline styles to any HTML element, including the <body> element and all other HTML tags such as <p>, <h1>, <div>, etc.
  • To apply an inline style to an HTML element, you need to add the style attribute to the opening tag of that element. The style attribute takes one or more CSS styles as its value.
  • Within the style attribute, you can define CSS styles using properties and values. For example, to change the background color of an <div> element to blue, you would use the following code:
<div style="background-color: blue;">
  • Multiple styles can be added to an element by separating them with semicolons. For example, to change the background color and width of a <div> element, you would use the following code:
<div style="background-color: blue; width: 100%;">
  • It is important to note that inline styles take precedence over styles defined in the <style> tag or an external stylesheet, so if you apply conflicting styles, the inline style will be used.
  • It is also important to know that, inline styles should be avoided when you are working on a large website, if you have to change the style of some elements, you have to do it on every element, that’s why using a CSS file is recommended.

Inline styles are a useful way to quickly and easily apply styles to specific HTML elements, but they should be used with caution. When building large, complex websites, it’s generally better to use a separate CSS file to keep your styles organized and easy to maintain.

Internal CSS

Here is a simple tutorial on how to use internal CSS styles in an HTML document:

  • Start by creating an HTML document with the basic structure in place, including the <html>, <head>, and <body> elements.
  • Next, create a <style> element within the <head> section of the HTML document. This is where you will place your internal CSS styles.
  • Within the <style> element, you can define CSS styles using selectors and rules. For example, to change the font size of all <p> elements on the page, you would use the following code:
<head>
  <style>
    p {
        font-size: 20px;
    }
  </style>
</head>
  • You can also use class or id selectors to apply styles to specific HTML elements.
  • For example, to change the background color of an element with the id “header”, you would use the following code:
<head>
  <style>
    #header {
        background-color: blue;
    }
  </style>
</head>
  • To apply a style to multiple elements, you can use a class selector.
    For example, to change the color of text for all elements with the class “highlight”, you would use the following code:
<head>
  <style>
    .highlight {
        color: yellow;
    }
  </style>
</head>
  • One benefit of using internal CSS over inline styles is that you can define the styles once and reuse them throughout the HTML document, making it easier to maintain and change the styles.
  • It’s also much easier to locate and edit your styles in the <style> element than it would be to locate and edit the same styles if they were scattered throughout the HTML document in the form of inline styles.

It’s worth noting that internal CSS styles are a good option if you want to style one page only, but for a large website, it’s recommended to use external CSS files to keep it organized, maintainable, and reusable.

External CSS

Here is a simple tutorial on how to use external CSS styles in an HTML document:

  • Start by creating an HTML document with the basic structure in place, including the <html>, <head>, and <body> elements.
  • Next, create a new CSS file and save it with the desired file name and the .css file extension. This is the file where you will place all of your external CSS styles.
  • Within the CSS file, you can define CSS styles using selectors and rules. For example, to change the font size of all <p> elements on the page, you would use the following code:
p {
    font-size: 20px;
}
  • To apply the external CSS styles to the HTML document, you need to link the CSS file to the HTML document. To do this, you need to use the link tag within the <head> section of the HTML document and provide the path to the CSS file using the href attribute. For example:
<head>
    <link rel="stylesheet" href="path/to/styles.css">
</head>
  • Once the CSS file is linked, you can use class or id selectors in the HTML document to apply styles to specific elements, and those styles will be inherited from the external CSS file.
  • With an external CSS file, you can define and manage styles for an entire website in one place, making it easy to maintain and change the styles. This also makes it easy to keep consistency across the pages by applying the same styles on all pages.
  • Another benefit of external CSS is that it separates the presentation of the website from the content, which makes it easier to update the design of your website without affecting the HTML structure of the pages.
  • Keep in mind that if you change the external CSS file, those changes will reflect in all HTML pages that are linked to that CSS file.

It is good practice to use external CSS files when building large, complex websites as it makes it easy to maintain, manage and change the styles while keeping the website structure and design separate.

Scroll to Top