| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
CSS selectors are patterns used to select elements within an HTML document. These selectors can target HTML elements based on various attributes, allowing developers to apply styles and manipulate the document’s structure effectively. Here’s a deep dive into CSS selectors and properties, along with examples:
Basic Selectors
1. Universal Selector (*)
- Selects all elements.
* {
color: blue;
}
2. Type Selector
- Selects all elements of a given type.
p {
color: green;
}
3. Class Selector (' . ')
- Selects all elements with a specific class.
.example {
background-color: yellow;
}
4. ID Selector (' # ')
- Selects the element with a specific ID.
#unique {
font-size: 20px;
}
Attribute Selectors
1. [attribute]
- Selects elements with a specified attribute.
[type="text"] {
border: 1px solid black;
}
2. [attribute=value]
- Selects elements with a specific attribute value.
[href="https://example.com"] {
color: red;
}
3. [attribute^=value]
- Selects elements whose attribute value starts with a specified value.
[class^="btn"] {
padding: 10px;
}
4. [attribute$=value]
- Selects elements whose attribute value ends with a specified value.
[class$="primary"] {
font-weight: bold;
}
5. [attribute=value]*
- Selects elements whose attribute value contains a specified value.
[class*="nav"] {
margin: 5px;
}
Pseudo-classes
1. ':hover'
- Applies styles when the user hovers over an element.
a:hover {
color: orange;
}
2. ':first-child'
- Selects the first child element of a parent.
li:first-child {
background-color: lightgray;
}
3. ':nth-child(n)'
- Selects the nth child of a parent.
tr:nth-child(odd) {
background-color: #f2f2f2;
}
Pseudo-elements
1. '::before'
- Inserts content before an element’s content.
p::before {
content: "Note: ";
font-weight: bold;
}
2. '::after'
- Inserts content after an element’s content.
p::after {
content: " [end]";
color: gray;
}
Combinators
1. Descendant Selector (space)
- Selects all elements that are descendants of a specified element.
div p {
font-size: 16px;
}
2. Child Selector (' > ')
- Selects all elements that are direct children of a specified element.
ul > li {
list-style-type: none;
}
3. Adjacent Sibling Selector (' + ')
- Selects an element that is immediately preceded by a specified element.
h1 + p {
margin-top: 0;
}
4. General Sibling Selector (' ~ ')
- Selects all elements that are siblings of a specified element.
h1 ~ p {
color: darkblue;
}
CSS Properties
1. Color and Background
- ‘
color‘: Sets the color of the text.
body {
color: black;
}
- ‘
background-color‘: Sets the background color of an element
div {
background-color: lightblue;
}
2. Text Formatting
- ‘
font-size‘: Sets the size of the text.
h1 {
font-size: 24px;
}
- ‘
text-align‘: Aligns the text inside an element.
p {
text-align: justify;
}
3. Box Model
- ‘
margin‘: Sets the margin outside the element.
.container {
margin: 20px;
}
padding: Sets the padding inside the element.
.box {
padding: 10px;
}
- ‘
border‘: Sets the border around the element.
.bordered {
border: 2px solid black;
}
4. Positioning
- ‘
position‘: Specifies the type of positioning method used for an element
.relative {
position: relative;
top: 10px;
}
- ‘
z-index‘: Sets the stack order of an element.
.overlay {
z-index: 10;
}
5. Display and Visibility
- ‘
display‘: Sets how an element is displayed.
.inline {
display: inline;
}
.block {
display: block;
}
- ‘
visibility‘: Sets the visibility of an element
.hidden {
visibility: hidden;
}
Understanding and effectively using CSS selectors and properties allows for precise control over the styling and layout of web pages, ensuring a consistent and visually appealing design.
