HTML (Hypertext Markup Language) is the standard markup language used to create web pages. Styles in HTML are used to enhance the appearance of web pages by controlling the layout, font, color, and other design elements of the HTML document.
There are three ways to add styles to an HTML document:
1) Inline Styles:
Styles that are added directly to HTML elements using the "style" attribute.
For example, you can add the following code to set the text color of a paragraph to red: <p style="color: red;">This is a paragraph</p>
➺ Inline styles are a way to apply styles directly to individual HTML elements.
➺ Inline styles are added to an HTML element using the "style" attribute.
➺ The "style" attribute contains a set of CSS properties and values, separated by semicolons, which apply to the element.
➺ Inline styles take precedence over styles defined in external style sheets or in the "style" element of the HTML document.
➺ Inline styles can be used for quick, one-time style changes, but are not recommended for large-scale styling as they can make the HTML code difficult to read and maintain.
➺ Inline styles can be used in combination with other styling methods such as internal styles and external style sheets to create more complex styles for HTML elements.
➺ It's important to note that inline styles should be used sparingly and only for small, quick changes. For larger, more complex styles, it's best to use internal styles or external style sheets to maintain organization and clarity in your HTML code.
2) Internal Styles:
Styles that are added to the '<head>' section of an HTML document using the '<style>' tag. Internal styles apply to all elements within the HTML document. For example, you can add the following code to set the background color of the page to blue:
<head>
<style>
body {
background-color: blue;
}
</style>
</head>
➺ Internal styles allow you to add styles directly to an HTML document, typically within the <head> section.
➺ Internal styles are defined using the <style> element, which contains CSS rules that apply to the HTML document.
➺ Internal styles apply to all elements within the HTML document, unless they are overridden by more specific CSS rules.
➺ Internal styles take precedence over external style sheets but are overridden by inline styles.
➺ Internal styles are useful when you want to apply styles to specific HTML documents, without affecting other documents on your website.
➺ Internal styles can be used in combination with other styling methods such as inline styles and external style sheets to create more complex styles for HTML elements.
➺ It's important to note that internal styles should be used sparingly and only for small-scale styling. For larger, more complex styles, it's best to use external style sheets to maintain organization and clarity in your HTML code.
3) External Styles:
Styles that are added to a separate CSS (Cascading Style Sheets) file and linked to the HTML document using the '<link>' tag. External styles allow you to apply consistent styles to multiple HTML documents. For example, you can create a separate "style.css" file with the following code to set the text color of all paragraphs to green:
/* style.css */
p {
color: green;
}
Then, link the "style.css" file to the HTML document using the following code:
<head>
<link rel="stylesheet" href="style.css">
</head>
➺ External styles allow you to define styles in a separate CSS (Cascading Style Sheets) file and link it to your HTML document.
➺ External style sheets are created using a separate .css file, which contains CSS rules that apply to the HTML document.
➺ To link the external style sheet to your HTML document, use the <link> element within the <head> section of the HTML document.
➺ External style sheets allow you to apply consistent styles across multiple HTML documents on your website, making it easier to maintain and update your website's design.
➺ External style sheets take precedence over internal styles and inline styles.
➺ External style sheets can be combined with internal styles and inline styles to create more complex styles for HTML elements.
➺ It's important to note that external style sheets should be used for larger, more complex styles. For small-scale styling, it's best to use internal styles or inline styles to maintain organization and clarity in your HTML code.
With these three methods, you can control the appearance of your HTML
document to create visually appealing and functional web pages.
