CSS Basics
CSS Basics
CSS (Cascading Style Sheets) is a language used to style the appearance of HTML elements on a webpage. The three core components of CSS are selectors, properties, and values. Each plays a specific role in defining how elements are styled.
1. Selector
A CSS selector is used to target the HTML element or group of elements you want to style. It defines which element(s) the CSS rules should apply to.
Types of Selectors:
- Element Selector: Targets HTML elements by their tag name.
- Class Selector: Targets elements using the
classattribute. - ID Selector: Targets a single element using the
idattribute. - Group Selector: Combines multiple selectors to apply the same styles to different elements.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Element selector */
p {
color: blue;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* ID selector */
#main-title {
font-size: 24px;
text-align: center;
}
/* Group selector */
h1, h2 {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 id="main-title">Welcome to My Page</h1>
<h2>About Us</h2>
<p>This is a simple paragraph.</p>
<p class="highlight">This paragraph has a yellow background.</p>
</body>
</html>
2. Property
A CSS property represents an aspect or characteristic of an HTML element that can be styled. Examples of CSS properties include:
colorfor text color.font-sizefor text size.marginfor spacing outside an element.
Properties are defined in CSS rules to specify what aspect of the element should be styled.
Example:
p {
color: green; /* Changes the text color of paragraphs to green */
font-size: 16px; /* Sets the font size of paragraphs to 16 pixels */
margin: 10px; /* Adds a margin of 10 pixels around the paragraphs */
}
3. Value
A CSS value is assigned to a property to define the specific style. Values can be keywords, units, or other predefined options depending on the property.
Example Values:
- For the
colorproperty:red,blue,#ff5733,rgb(255, 87, 51). - For the
font-sizeproperty:12px,1em,150%. - For the
marginproperty:10px,auto,5%.
Example:
p {
color: rgb(34, 139, 34); /* Text color is a shade of green */
font-size: 18px; /* Font size is 18 pixels */
margin: auto; /* Automatically centers the paragraph */
}
Full Example Combining Selector, Property, and Value
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Applying styles to different elements */
body {
background-color: #f0f0f0; /* Light gray background */
font-family: 'Verdana', sans-serif; /* Font for the entire page */
}
h1 {
color: navy; /* Heading color */
font-size: 32px; /* Font size for main heading */
margin-bottom: 20px; /* Space below the heading */
}
p {
color: #333; /* Text color */
line-height: 1.6; /* Line spacing */
margin: 10px 0; /* Vertical margin */
}
.highlight {
background-color: yellow; /* Highlighted text background */
}
#footer {
text-align: center; /* Center-aligns text */
font-size: 14px; /* Small font size */
color: gray; /* Gray text color */
}
</style>
</head>
<body>
<h1>Learn CSS Basics</h1>
<p>This is a regular paragraph.</p>
<p class="highlight">This paragraph has a highlighted background.</p>
<p id="footer">© 2024 CSS Tutorials</p>
</body>
</html>
Key Points
- Selector defines the target element(s).
- Property specifies the aspect of the element to style.
- Value assigns a specific style to the property.
By combining these components effectively, you can create visually appealing and well-structured webpages.
Prefer Learning by Watching?
Watch these YouTube tutorials to understand CSS Tutorial visually:
What You'll Learn:
- 📌 Learn CSS Basics in 10 Minutes (for Beginners)
- 📌 Absolute Beginner CSS Crash Course