1.
Selectors_________________________________________________________________ 2
2. Box Model________________________________________________________________ 2
3. Display Property___________________________________________________________ 2
4. Positioning_______________________________________________________________ 3
5. Floats and Clearing________________________________________________________ 4
6. CSS Flexbox Layout________________________________________________________4
7. CSS Grid Layout___________________________________________________________ 5
8. Responsive Design and Media Queries________________________________________ 5
9. CSS Transitions and Animations_____________________________________________ 5
10. Pseudo-classes and Pseudo-elements_______________________________________ 6
11. Specificity and Inheritance_________________________________________________ 6
12. Units of Measurement_____________________________________________________ 7
13. CSS Preprocessors_______________________________________________________ 7
14. Vendor Prefixes and Browser Compatibility___________________________________ 7
15. CSS Frameworks_________________________________________________________ 8
16. CSS Methodologies_______________________________________________________ 8
17. CSS Variables (Custom Properties)__________________________________________ 8
1. Selectors
Class Selector: Targets elements with a specific class attribute.
Example: Styling all buttons with the class .btn on a website.
css
Copy code
.btn {
background-color: blue;
color: white;
padding: 10px;
}
ID Selector: Targets a single element with a specific ID attribute.
Example: Styling a header with the ID #main-header.
css
Copy code
#main-header {
font-size: 24px;
text-align: center;
}
Element Selector: Targets all elements of a specific type.
Example: Styling all <p> (paragraph) elements.
css
Copy code
p{
font-family: Arial, sans-serif;
line-height: 1.5;
}
2. Box Model
The box model includes margin, border, padding, and content.
Example: Adding padding, border, and margin to a <div>.
css
Copy code
div {
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}
3. Display Property
Block: The element takes up the full width.
Example: <div> elements are block-level by default.
Inline: The element only takes up as much width as necessary.
Example: <span> elements are inline by default.
Inline-block: Like inline but allows width and height adjustments.
Example: Styling a button within a text block.
css
Copy code
.button-inline {
display: inline-block;
padding: 10px;
background-color: green;
}
Flex: A flexible box layout for aligning items.
Example: Creating a navigation bar.
css
Copy code
.navbar {
display: flex;
justify-content: space-between;
}
Grid: A two-dimensional layout system.
Example: Creating a photo gallery.
css
Copy code
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
4. Positioning
Static: Default position, elements are placed in the normal document flow.
Example: Most HTML elements are static by default.
Relative: Positioned relative to its normal position.
Example: Nudging an element slightly from its original position.
css
Copy code
.relative-box {
position: relative;
top: 10px;
left: 5px;
}
Absolute: Positioned relative to the nearest positioned ancestor.
Example: Placing a tooltip.
css
Copy code
.tooltip {
position: absolute;
top: 20px;
left: 50px;
}
Fixed: Positioned relative to the viewport.
Example: Creating a fixed navigation bar.
css
Copy code
.fixed-navbar {
position: fixed;
top: 0;
width: 100%;
}
5. Floats and Clearing
Floats: Allow text and inline elements to wrap around it.
Example: Wrapping text around an image.
css
Copy code
.float-left {
float: left;
margin-right: 10px;
}
Clearing: Prevents elements from wrapping around floated elements.
Example: Clearing floats.
css
Copy code
.clearfix::after {
content: "";
display: table;
clear: both;
}
6. CSS Flexbox Layout
A one-dimensional layout method for arranging items in rows or columns.
Example: Centering items both horizontally and vertically.
css
Copy code
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
7. CSS Grid Layout
A two-dimensional layout system for arranging items in rows and columns.
Example: Creating a responsive grid layout.
css
Copy code
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 20px;
}
8. Responsive Design and Media Queries
Adjusts the layout based on the screen size.
Example: Making a layout responsive.
css
Copy code
@media (max-width: 600px) {
.responsive-div {
flex-direction: column;
}
}
9. CSS Transitions and Animations
Transitions: Adds smooth transitions between styles.
Example: Creating a button hover effect.
css
Copy code
.btn {
transition: background-color 0.3s;
}
.btn:hover {
background-color: darkblue;
}
Animations: More complex, allows keyframe-based animations.
Example: Creating a bouncing ball animation.
css
Copy code
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.ball {
animation: bounce 2s infinite;
}
10. Pseudo-classes and Pseudo-elements
Pseudo-classes: Used to style elements based on their state.
Example: Styling links when hovered.
css
Copy code
a:hover {
color: red;
}
Pseudo-elements: Used to style specific parts of an element.
Example: Adding content before an element.
css
Copy code
p::before {
content: "Note: ";
font-weight: bold;
}
11. Specificity and Inheritance
Specificity: Determines which styles are applied when multiple rules match an element.
Example: Understanding how different selectors affect specificity.
css
Copy code
/* More specific rule */
#unique .btn.special {
color: red;
}
Inheritance: Allows certain properties to be passed down from parent to child elements.
Example: Setting a font-family on a container.
css
Copy code
.container {
font-family: 'Arial', sans-serif;
}
.container p {
/* inherits font-family from .container */
}
12. Units of Measurement
Pixels (px): Absolute unit.
Ems (em): Relative to the font-size of the element.
Rems (rem): Relative to the font-size of the root element.
Percentages (%): Relative to the parent element.
Example: Using different units for margins.
css
Copy code
.box {
margin: 10px; /* pixels */
padding: 2em; /* ems */
width: 50%; /* percentage */
}
13. CSS Preprocessors
Sass and Less: Enhance CSS with variables, nesting, and more.
Example: Using Sass for nested styles and variables.
scss
Copy code
$primary-color: blue;
.nav {
background-color: $primary-color;
ul {
list-style: none;
li {
display: inline-block;
}
}
}
Ensuring styles work across different browsers.
Example: Using prefixes for CSS properties.
css
Copy code
.box {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
15. CSS Frameworks
Bootstrap: Provides pre-designed components and a responsive grid system.
Example: Using Bootstrap classes for layout.
html
Copy code
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
16. CSS Methodologies
BEM (Block Element Modifier): Naming convention for writing CSS.
Example: Using BEM for a navigation block.
html
Copy code
<div class="nav">
<div class="nav__item nav__item--active">Home</div>
<div class="nav__item">About</div>
</div>
17. CSS Variables (Custom Properties)
Define reusable values.
Example: Using CSS variables for theme colors.
css
Copy code
:root {
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
}
These examples provide a glimpse into how each CSS concept can be applied in real-world
