CSS Basics: Selectors, Properties, and Values
CSS (Cascading Style Sheets) is used to style HTML elements and control their layout and appearance on the web. In this tutorial, we'll cover the basics of CSS, including selectors, properties, and values.
1. CSS Syntax
CSS rules consist of a
selector,
property, and
value. The general syntax looks like this:
selector {
property: value;
}
Selector: Targets the HTML element you want to style.
Property: Specifies the style aspect (e.g., color, font-size).
Value: Defines the value for the property (e.g., red, 16px).
2. CSS Selectors
Selectors are used to target HTML elements and apply styles to them. Below are some common types of selectors:
Universal Selector: Targets all elements on the page.
This will change the text color of all elements to blue.
Element Selector: Targets specific HTML tags (e.g., `<p>`, `<div>`).
This will change the text color of all `<p>` elements to red.
Class Selector: Targets elements with a specific class. Use a period (`.`) before the class name.
.intro { font-size: 18px; }
This will apply a font size of 18px to all elements with the class "intro".
ID Selector: Targets an element with a specific ID. Use a hash (`#`) before the ID name.
#header { background-color: #333; }
This will change the background color of the element with the ID "header" to a dark gray.
Descendant Selector: Targets elements that are nested inside another element.
This will apply a green text color to all `<p>` elements inside `<div>` elements.
3. CSS Properties and Values
CSS properties define how an element will look on the page. Each property has a corresponding value that determines its appearance.
Color: Specifies the text color.
This changes the text color to red.
Background-color: Sets the background color of an element.
background-color: yellow;
This changes the background color to yellow.
Font-size: Defines the size of the text.
This sets the font size to 16 pixels.
Padding: Adds space inside the element, between its content and border.
This adds 10 pixels of padding inside the element on all sides.
Margin: Adds space outside the element, between it and other elements.
This adds 20 pixels of margin outside the element on all sides.
Border: Sets the border around an element.
This creates a 1-pixel solid black border around the element.
Width and Height: Sets the dimensions of an element.
height: 200px;
width: 300px;
This sets the width of the element to 300 pixels and the height to 200 pixels.
4. Applying CSS to HTML
There are three main ways to apply CSS to an HTML document:
Inline CSS: Add CSS directly to an HTML element using the `style` attribute.
<p style="color: blue;">This is a blue paragraph.</p>
This will style only that particular `<p>` element.
Internal CSS: Add CSS inside the `<style>` tag in the HTML document's `<head>` section.
<head>
<style>
p { color: green; }
</style>
</head>
This will apply the styles to all `<p>` elements on the page.
External CSS: Link to an external CSS file using the `<link>` tag.
<head>
<link rel="stylesheet" href="styles.css">
</head>
This is the most efficient method for larger websites with multiple pages. The CSS styles are written in a separate file (e.g., `styles.css`).
5. Example: Styling a Simple Web Page
Here's an example of a simple HTML page with CSS applied using internal styles:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basics Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: darkblue;
}
p {
color: darkgreen;
font-size: 18px;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to CSS Basics</h1>
<p>This is a simple example of how to use CSS to style HTML elements.</p>
<p class="highlight">This paragraph has a highlighted background.</p>
</body>
</html>
Conclusion
In this tutorial, you've learned the basics of CSS, including how to use selectors, properties, and values to style HTML elements. With this foundation, you're ready to begin creating more complex and visually appealing web pages. Happy styling!
