CSS Syntax Overview
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of HTML and XML documents. CSS rules consist of selectors, properties, and values. Here's an overview of each component:
- Selectors: Selectors target HTML elements to apply styles. They can be based on element names, classes, IDs, attributes, pseudo-classes, and pseudo-elements. Selectors are the foundation of CSS, allowing developers to style specific elements or groups of elements.
- Properties: Properties define the visual characteristics of elements, such as colors, fonts, margins, padding, borders, and more. Each property has a name and is followed by a colon (:) in CSS rules.
- Values: Values are assigned to properties to specify how they should be applied. Values can be keywords, numeric values, colors, URLs, or other data types depending on the property being used. Values are separated from properties by a colon (:) and terminated by a semicolon (;) in CSS rules.
A CSS rule consists of a selector followed by a declaration block enclosed in curly braces {}. The declaration block contains one or more declarations, each consisting of a property and its corresponding value.
property1: value1;
property2: value2;
/* More properties and values */
}
Let's explore each part of the CSS rule syntax with examples.
1. Selectors
Selectors target specific elements to apply styles. They can be simple selectors or complex selectors combining multiple conditions.
color: blue;
font-size: 16px;
}
Class Selector: Targets elements with a specific class attribute.
background-color: yellow;
color: black;
}
ID Selector: Targets an element with a specific ID attribute.
font-size: 24px;
font-weight: bold;
}
Attribute Selector: Targets elements based on their attribute values.
border: 1px solid #ccc;
}
Pseudo-class Selector: Targets elements based on their state or position.
color: red;
}
li:first-child {
font-weight: bold;
}
2. Properties and Values
Properties define how elements should be styled, and values specify the actual style details. Here are examples of common properties and their values:
Color and Background:
color: #333; /* Hexadecimal color */
background-color: rgba(255, 0, 0, 0.5); /* RGBA color */
}
Fonts and Text:
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: bold;
text-decoration: underline;
}
Margins, Padding, and Borders:
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
Layout and Positioning:
css
Copy code
.container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
top: 50px;
left: 20px;
}
Animations and Transitions:
css
Copy code
.button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
3. Combining Selectors and Properties
CSS rules can combine selectors and properties to create specific styles for different elements.
Combining Selectors:
/* Selects all paragraphs inside a div with class 'content' */
.content p {
font-size: 16px;
color: #666;
}
/* Selects paragraphs with class 'warning' or 'error' */
p.warning, p.error {
font-weight: bold;
color: red;
}
Combining Properties:
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f0f0f0;
}
4. Comments in CSS
Comments in CSS start with /* and end with */. They are useful for adding explanations or notes within the stylesheet.
.title {
font-size: 24px;
color: #333;
}
Example: Applying CSS Rules
Let's see an example of how CSS rules are applied to style HTML elements.
HTML:
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1 class="title">Welcome to CSS</h1>
<p class="text">CSS is amazing!</p>
<button class="button">Click Me</button>
</div>
</body>
</html>
CSS (styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
/* Styles for specific elements */
.title {
font-size: 32px;
color: #333;
text-decoration: underline;
}
.text {
font-size: 18px;
color: #666;
}
.button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #0056b3;
}
In this example, the CSS file styles.css contains rules to style the title, text, and button elements within the HTML document.
Practice Excercise Practice now