HTML provides a way to add style and layout to web pages through Cascading Style Sheets (CSS). CSS is a styling language that is utilized to define how an HTML page should appear and be presented to the user.
CSS separates the presentation of the web page from its content, making it easier to change the layout and appearance of a web page without changing its underlying HTML code. With CSS, you can control the font size, color, spacing, background color, border, and other visual elements of the web page.
Here’s an example of how to apply a style to an HTML element using CSS:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
font-size: 36px;
font-family: Arial, sans-serif;
text-align: center;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some sample text.</p>
</body>
</html>
In this example, the h1 element is styled using CSS. The color property sets the color of the text to red, the font-size property sets the font size to 36 pixels, the font-family property sets the font family to Arial or sans-serif if Arial is not available, the text-align property centers the text, and the text-decoration property adds an underline to the text.
You can also use external CSS files to apply styles to multiple pages of a website. To do this, you would create a separate CSS file with the styles and link it to the HTML pages using the link element in the head section of the HTML code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Welcome to my website!</h1>
<p>This is some sample text.</p>
</body>
</html>
In this example, the link element links to an external CSS file called style.css. This file contains the CSS styles for the web page and can be reused on other pages of the website.