HTML with CSS


January 10, 2022, Learn eTutorial
1285

In this HTML tutorial, you will learn all about how to use CSS in HTML. We will also discuss the different ways to include CSS in HTML.

What is the use of the CSS in HTML?

Assume we developed our web page with simple HTML code and want something that can deliver our content in a suitable way while also being visually appealing. To do this, we may use CSS (Cascading Stylesheet) attributes to style our web page. CSS is used to impart style to a web page made up of HTML components. It describes the appearance of the website. To style a webpage, CSS provides a variety of style attributes such as background color, padding, margin, border-color, and many more. Each CSS property has a name-value pair that is separated by a semicolon (;).

There are mainly three ways to include CSS in an HTML document

  1. Incline CSS     – In HTML elements, use the style attribute to define CSS characteristics. It will be included in the opening tag of the element we want to give the style.
  2. Internal CSS    – The internal CSS will be included in the head section of the document and it will be enclosed in the style element
  3. External CSS   – The external CSS will be written in a separate document with the extension “.css” and it will be included to the HTML document by using the link element in the head section.

What is Inline CSS in HTML?

Inline-styles are used to implement the element's unique style rules by inserting the CSS rules straight into the start tag. The style property can be used to tie it to an element. A sequence of CSS property and value pairs comprise the style attribute. A semicolon (;) separates each “property: value” pair, much like in an embedded or external style sheet. However, it must all be on one line, with no line breaks following the semicolon.

Using inline styles is typically seen as poor practice. Because style rules are integrated directly into the HTML element, the presentation becomes jumbled with the document's content, making updating or maintaining a website difficult.


<h1  font-size:30px;">This is a heading</h1> 
<p  font-size:18px;">This is a paragraph.</p> 
<div  font-size:18px;">This is some text.</div>
 
HTML CSS

What is Internal CSS in HTML?

Embedded or internal style sheets have no effect on the document in which they are embedded. The <style> element is used to establish embedded style sheets in an HTML document's head section. Within the <head> section, you can declare an unlimited number of <style> elements.


<head>
    <style>
        body { background-color: Yellow; }
 h1 { color: blue; }
        p { color: red; }
    </style>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 
HTML CSS

What is External CSS in HTML?

When the style is applied to a large number of pages, an external style sheet is perfect. An external style sheet is a separate document that contains all of your site's style rules and can be linked to any HTML document. External style sheets are the most adaptable since they allow you to change the appearance of an entire website by modifying only one file. External style sheets may be attached in two ways: linking and importing:

Linking External Style Sheets

Using the <link> element, an external style sheet may be connected to an HTML document. The <link> tag is used within the <head> section.


<head>
    <link rel="stylesheet" href="css/style.css">
</head>
 
HTML CSS

Importing External Style Sheets

Another method for loading an external style sheet is to use the @import rule. The @import declaration directs the browser to load and utilize an external style sheet. It can be used in two ways. The easiest method is to include it in your <head> section's <style> element. It should be noted that additional CSS rules can still be placed in the <style> element.


<style>
    @import url("css/style.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>
 
HTML CSS