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.
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
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>
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>
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:
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>
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>