Scribd
Upload
15 views

CSS Basics

The document provides examples and explanations of key CSS concepts including selectors, the box model, positioning, floats, flexbox, grid layout, responsive design, transitions, animations, variables and more.

Uploaded by

mhashimzaffar1995
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

CSS Basics

The document provides examples and explanations of key CSS concepts including selectors, the box model, positioning, floats, flexbox, grid layout, responsive design, transitions, animations, variables and more.

Uploaded by

mhashimzaffar1995
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like