HTML Styles

HTML styles are used to control the layout and formatting of elements on a web page. There are several ways to apply styles to HTML elements, including inline styles, internal stylesheets, and external stylesheets.

There are three ways of using a style sheet in an HTML document:

1.Internal Style Sheet.

2.External Style Sheet.

3.Inline Style Sheet.

let’s understand each of them

1.Internal CSS

Internal or embedded CSS requires you to add <style> tag in the <head> section of your HTML document.

This CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules on every page of your website.

Here’s how you can use internal CSS:

1. Open your HTML page and locate <head> opening tag.

2. Put the following code right after the <head> tag

<style type="text/css">

3. Add CSS rules on a new line. Here’s an example:

body {
    background-color: red;
}
h1 {
    color: blue;
    padding: 0px;
}

HTML file will look like this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: red;
}
h1 {
    color: blue;
    padding: 40px;
} 
</style>
</head>
<body>

<h1>Fullstackadda</h1>
<p>This is our paragraph.</p>

</body>
</html>

2.External CSS:

External CSS is formatted like internal CSS, but it isn’t wrapped in <style> tags or placed in the head section of your HTML file. Instead, it’s placed in an external file with the extension “.css.” In the head section, you’ll just have to add a link to this external stylesheet that looks something like:

<link rel="stylesheet" type="text/css" rel="fullstackadda" target="_blank" href="fullstackstyles.css">

Using external CSS is considered the best practice for a few reasons.

Since you can make changes across your site by changing the CSS in this external file, it’s the most time-effective method. It’s also the fastest and most SEO-friendly. Storing CSS in another file makes your HTML file easier to read for search engines. It also enables a visitor’s browser to cache the CSS file to load your website faster for their next visit.

Example:

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

<body>
    <div class="main">
        <div class="head">Fullstackadda</div>
        <div id="stack">
            Platform for learners
        </div>
    </div>
</body>

</html>
body {
    background-color:blue;
}
.main {
    text-align:center;   
}
.head{
    color:#009900;
    font-size:50px;
    font-weight:bold;
}
#stack{
    font-style:bold;
    font-size:20px;
}

Output:

HTML Styles

3.Inline Style Sheet.

We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

Example:

<h2 style="color:red;margin-left:50px;">Inline CSS.</h2>  
<p>Fullstackadda</p>

Output:

NOTE: It is important to note that external stylesheets have priority over internal stylesheets which have priority over inline styles. So if there are any conflicting styles the last one loaded wins.

  1. HTML styles are used to control the layout and formatting of elements on a web page.
  2. Inline styles are applied directly to an element using the “style” attribute.
  3. Internal stylesheets are used to apply styles to multiple elements on a single web page, and are defined within the <head> section of the HTML document using a <style>
  4. External stylesheets are used to apply styles to multiple web pages, and are defined in a separate CSS file that is linked to the HTML document using the <link> tag.

html styles