CSS Syntax
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. Understanding CSS syntax is fundamental for creating visually appealing and well-structured web pages.
Basic CSS Syntax
CSS is written as rulesets. A ruleset consists of a selector and a declaration block. Here’s the basic structure
<style>
/* CSS Rule */
h1 {
color: blue;
/* Property: value */
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
</style>
- h1: This selector targets all <h1> elements on the page. The style applied to <h1> will set the text color to blue and the font size to 24px.
- p: This selector targets all <p> elements. The text color will be green and the font size will be 16px.
CSS Syntax Breakdown
- Selectors: Selectors are used to “select” the HTML element you want to style. It can be an element type (e.g., h1), a class (e.g., .class-name), an ID (e.g., #id-name), or a combination of these.
- Type Selector: Targets all elements of a specific type, like h1, p, div, etc.
- Class Selector: Targets elements with a specific class. Example: .my-class { }
- ID Selector: Targets an element with a specific ID. Example: #my-id { }
- Universal Selector: Targets all elements (*).
- Properties: Properties are the aspects of the selected elements you want to style (like color, width, height, etc.).
- color: Defines the text color.
- background-color: Defines the background color of an element.
- font-size: Sets the size of the font.
- margin: Specifies the space around an element.
- padding: Defines the space between the element’s content and its border.
- Values: Values define the specifics of the property you want to apply, such as a color name, a number (e.g., 16px), or percentages (e.g., 50%).
Selectors in CSS
Selectors define which HTML elements are styled. CSS offers several types of selectors.
1. Universal Selector: Applies styles to all elements.
* {
margin: 0;
padding: 0;
}
2. Type Selector: Targets specific HTML elements.
h1 {
font-family: Arial, sans-serif;
}
3. Class Selector: Styles elements with a specific class attribute.
.box {
border: 1px solid black;
padding: 10px;
}
4. ID Selector: Targets a single element with a specific ID.
#header {
background-color: lightgray;
}
CSS Selectors
Grouping and Nesting
You can group selectors to apply the same styles or nest them for hierarchical targeting.
1. Grouping
h1, h2, h3 {
color: darkblue;
}
2. Nesting
ul li {
list-style-type: square;
}
Pseudo-classes and Pseudo-elements
Pseudo-classes and pseudo-elements are used for styling specific states or parts of elements. Pseudo classes target’s the elements based on a particular state and pseudo elements targets the elements on basis of a particular part of that element.
/*pseudo-class selector*/
a:hover {
color: green;
}
/*pseudo-element selector*/
p::first-line {
font-weight: bold;
}
Inline, Internal, and External CSS
CSS can be written in three ways:
1. Inline CSS: Applied directly within the HTML element.
<body>
<p style="color: blue;">This is blue text.</p>
</body>
2. Internal CSS: Defined within the <style> tag in the <head> section.
<style>
h1 {
color: red;
}
</style>
3. External CSS: Linked through an external stylesheet.
<link rel="stylesheet" href="styles.css">
Media Queries
Media queries allow you to create responsive designs.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
This changes the background color for screens narrower than 600 pixels.
Animations
CSS can be used to create animations for elements.
@keyframes move {
from {
left: 0px;
}
to {
left: 100px;
}
}
div {
position: relative;
animation: move 2s infinite;
}
In case of animation syntax the time can also be divided into time frames in form of percentage’s.
CSS Variables
CSS variables helps to crate reusable values for any property.
:root {
--main-color: #3498db;
}
h1 {
color: var(--main-color);
}
Comments in CSS
Comments are used to explain code and are ignored by the browser.
/* Write your comment comment */
p {
font-size: 16px;
}
- Comments are always written between /* these symbols */.
SASS with $ and & for Nesting
SASS allows the use of variables, prefixed with $, to store reusable values such as colors, fonts, or sizes. This makes it easy to maintain and update styles consistently across a project. Key Feature: Using Variables ,Here’s an example demonstrating how to use variables in SASS Indented Syntax.
$primary-color: #3498db;
$secondary-color: #2ecc71;
$padding: 15px;
button {
background-color: $primary-color;
color: white;
padding: $padding;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: $secondary-color;
}
}
button {
background-color: #3498db;
color: white;
padding: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2ecc71;
}
Variables(@)
- $primary-color: Stores the main color for the button.
- $secondary-color: Defines the hover state color.
- $padding: Sets consistent spacing around the button.
- Variables improve maintainability—changing $primary-color updates all instances of it.
- &:hover(& operator): The & operator appends the :hover pseudo-class to the parent selector (button), ensuring the styles are tied to the specific button element.
- This avoids repetition by preventing the need to retype the parent selector (button: hover).
Advantages of Combining $ and & operator
- Using $ variables ensures consistent styling across the project.
- The & operator streamlines nested rules, keeping the code DRY (Don’t Repeat Yourself) and organized.
LESS @ and & for Nesting
LESS is another popular CSS preprocessor that allows for the use of variables (prefixed with @) and the & operator for nesting and referencing parent selectors. This syntax makes it easy to manage styles dynamically and keep your code clean and maintainable.
@primary-color: #3498db;
@secondary-color: #2ecc71;
@padding: 15px;
button {
background-color: @primary-color;
color: white;
padding: @padding;
border: none;
border-radius: 5px;
cursor: pointer;
&:hover {
background-color: @secondary-color;
}
}
/*CSS Compiled Output is here*/
button {
background-color: #3498db;
color: white;
padding: 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #2ecc71;
}
Variables (@)
- @primary-color: Stores the main color for the button.
- @secondary-color: Defines the hover color for the button.
- @padding: Specifies the padding value for the button.
- &:hover: The & operator references the parent selector (button) and appends the :hover pseudo-class. This ensures that the hover styles are scoped to the button element, without the need to repeat the full selector (button :hover).
- This makes the code more concise and keeps it DRY (Don’t Repeat Yourself).
Advantages of Combining @ and & operator
- Variables (@) improve code consistency and reduce errors by centralizing values like colors and spacing.
- The & operator helps you handle pseudo-classes and other states (like :hover) within the context of the parent selector, keeping your code organized and easy to manage.
- Using LESS with these features allows for better flexibility and readability in your CSS, making your stylesheets cleaner and easier to maintain.
