1. Onwards to CSS Basics
Cascading Style Sheets (CSS) is a cornerstone technology used to style web pages. It allows developers to control the layout, colors, fonts, and overall appearance of elements on a webpage. This guide will introduce the different methods to apply CSS in HTML: external, internal, and inline styles, explaining their usage and precedence.
2. What is CSS?
CSS stands for Cascading Style Sheets, which is a language used to style the visual presentation of HTML documents. The term "cascading" refers to how styles are applied in a hierarchy, where certain styles override others depending on their specificity and placement.
3. Three Ways to Apply CSS in HTML
External CSS: External CSS is when styles are stored in a separate .css file, which is linked to the HTML document. This method is highly recommended for larger websites as it keeps the styles organized and separate from the HTML structure.
Syntax for External CSS:
<link rel="stylesheet" href="styles.css">
Internal CSS: Internal CSS is defined within the HTML document itself, inside the <style> tag, which is placed in the <head> section. This method is ideal for smaller web pages where you don’t need to apply styles across multiple pages.
<style>p {
color: rgb(247, 0, 247);
background-color: aquamarine !important;
}</style>
Inline CSS: Inline CSS is applied directly within the HTML element using the style attribute. This method is used for specific styling of individual elements, but it is generally discouraged because it mixes content with presentation, making the code harder to maintain.
Example for Inline CSS:
<p style="color: red; background-color: yellow;">this is a paragraph</p>
4. Example Code for All Three Methods
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tutorial</title>
<link rel="stylesheet" href="tut9.css">
<style>p {
color: rgb(247, 0, 247);
background-color: aquamarine !important;
}</style></head>
<body>
<h3>CSS Tutorial</h3>
<p style="color: red; background-color: yellow;">this is a paragraph</p>
</body>
</html>