HTML Styles – CSS
CSS (Cascading Style Sheets) is used to control the style and layout of web pages. This chapter will introduce you to the basics of CSS, including how to apply styles to HTML elements.
1. Inline CSS
Inline CSS is used to apply a unique style to a single HTML element. It uses the style attribute inside the HTML tag.
Example:
This is an inline CSS example.
<p style="color: blue; font-size: 20px;">This is an inline CSS example.</p>2. Internal CSS
Internal CSS is used to define styles for a single HTML page. It is placed inside a <style> element in the <head> section of the HTML document.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is an internal CSS example.</p>
</body>
</html>3. External CSS
External CSS is used to define the style for multiple HTML pages. It is written in a separate CSS file with a .css extension, and linked to the HTML document using the <link> element.
Example:
Create an external CSS file named styles.css with the following content:
/* styles.css */
p {
color: red;
font-size: 16px;
}Then, link the CSS file to an HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is an external CSS example.</p>
</body>
</html>4. CSS Selectors
CSS selectors are used to select HTML elements based on their name, id, class, attribute, and more. Here are some common types of selectors:
Element Selector
Selects all elements of a given type.
Example:
p {
color: purple;
}<p>This paragraph will be purple.</p>ID Selector
Selects a single element with a specific id. The id selector is prefixed with a hash (#).
Example:
#unique {
color: orange;
}<p id="unique">This paragraph will be orange.</p>Class Selector
Selects all elements with a specific class. The class selector is prefixed with a dot (.).
Example:
.highlight {
background-color: yellow;
}<p class="highlight">This paragraph will have a yellow background.</p>5. CSS Properties
CSS properties are used to apply styles to HTML elements. Here are some common properties:
Color
Sets the color of the text.
Example:
p {
color: blue;
}<p>This text will be blue.</p>Font-size
Sets the size of the font.
Example:
p {
font-size: 20px;
}<p>This text will be 20 pixels in size.</p>Background-color
Sets the background color of an element.
Example:
p {
background-color: lightgray;
}<p>This paragraph will have a light gray background.</p>Padding
Sets the padding inside an element.
Example:
p {
padding: 10px;
}<p>This paragraph will have 10 pixels of padding inside.</p>Margin
Sets the margin outside an element.
Example:
p {
margin: 20px;
}<p>This paragraph will have 20 pixels of margin outside.</p>Best Practices for Using CSS
- Keep your CSS organized by using comments and grouping related styles together.
- Use external CSS for larger projects to keep your HTML files clean and manageable.
- Use class and id selectors appropriately to apply styles efficiently.
- Take advantage of CSS properties to create a consistent and visually appealing design.
- Test your styles across different browsers to ensure compatibility.