Learn CSS Basic To Advance

Concept

Learn in One pdf

Mastering CSS: A Comprehensive Guide to Styling

Web Pages
Objective:
To provide a clear and practical understanding of
CSS concepts and techniques, enabling readers to
effectively style and enhance their web pages for
improved user experience and design.
To equip readers with the fundamental and
advanced skills needed to confidently use CSS for
web design, allowing them to create visually
appealing, responsive, and user-friendly websites.
Written by: Dheeraj Gupta
 Complete CSS Notes: From Basic to Advanced
Table of Contents
1. Introduction to CSS
2. CSS Syntax
3. Selectors
4. Colors and Backgrounds
5. Text Properties
6. The Box Model
7. Display and Positioning
8. Flexbox
9. CSS Grid
10. Pseudo-classes and Pseudo-elements
11. Transitions and Animations
12. Media Queries
13. CSS Variables
14. Responsive Design
15. CSS Preprocessors
16. Advanced Selectors
17. Clipping and Masking
18. Performance Optimization
19. Accessibility Best Practices
20. Conclusion
1. Introduction to CSS
CSS (Cascading Style Sheets) is a stylesheet language
used to describe the presentation of HTML documents.
It controls the layout, colors, fonts, and overall design.
2. CSS Syntax
Code: ************************************************
selector {
property: value;
}
******************************************************

 Selector: The HTML element to style.

 Property: The aspect of the element you want to
change.
 Value: The setting you want to apply.
3. Selectors
 Element Selector: Targets all instances of an
element.
Code: ************************************************
p { color: blue; }
******************************************************
  Class Selector: Targets elements with a specific
class.
Code: ************************************************
.classname { font-size: 16px; }
******************************************************
 ID Selector: Targets a unique element with a
specific ID.
Code: ************************************************
#idname { margin: 20px; }
******************************************************

 Attribute Selector: Targets elements based on

attributes.
Code: ************************************************
input[type="text"] { border: 1px solid #ccc; }
******************************************************
 Combinators:
o Descendant Selector: div p (selects all <p>
inside <div>)
o Child Selector: ul > li (selects only direct <li>
children of <ul>)
o Sibling Selector: h1 + p (selects the first <p>
after <h1>)
4. Colors and Backgrounds
 Color Formats:
o Named: color: red;
o Hexadecimal: color: #ff0000;
o RGB: color: rgb(255, 0, 0);
o RGBA: color: rgba(255, 0, 0, 0.5);
o HSL: color: hsl(0, 100%, 50%);
 Background Properties:
Code: ************************************************
background-color: lightblue;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
******************************************************
5. Text Properties
Code: ************************************************
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: underline;
text-transform: uppercase.
******************************************************
6. The Box Model
Understanding the box model is crucial for layout
design:
 Content: The actual content of the box.
 Padding: Space between the content and the
border.
 Border: Surrounds the padding.
 Margin: Space outside the border.
Box Model Example
Code: ************************************************
. box {
width: 300px; /* Content width */
padding: 20px; /* Space inside */
border: 5px solid black; /* Border width */
margin: 10px; /* Space outside */
}
******************************************************

7. Display and Positioning

 Display Property:
 o block: Occupies the full width.
o inline: Occupies only the width of content.
o inline-block: Behaves like inline but allows
setting width and height.
o none: Hides the element.
 Positioning:
Code: ************************************************
position: static; /* Default */
position: relative; /* Position relative to its original
position */
position: absolute; /* Position relative to the nearest
positioned ancestor */
position: fixed; /* Position relative to the viewport */
position: sticky; /* Hybrid of relative and fixed */
******************************************************
8. Flexbox
A powerful layout tool for creating responsive designs.
Flexbox Properties:
 Container:
Code: ************************************************
display: flex; /* Activates flex context */
flex-direction: row; /* or column */
justify-content: center; /* Aligns items horizontally */
align-items: center; /* Aligns items vertically */
flex-wrap: wrap; /* Allows items to wrap onto multiple
lines */
******************************************************
9. CSS Grid
A two-dimensional layout system that allows for complex
layouts.
Grid Properties:
Code: ************************************************
display: grid; /* Activates grid context */
grid-template-columns: repeat(3, 1fr); /* Creates 3 equal
columns */
grid-template-rows: auto; /* Rows height is determined
by content */
grid-gap: 10px; /* Space between grid items */
******************************************************
10. Pseudo-classes and Pseudo-elements
 Pseudo-classes: Styles applied based on state.
Code: ************************************************
a:hover { color: red; }
p:nth-child(2) { font-weight: bold; }
******************************************************
  Pseudo-elements: Style specific parts of an
element.
Code: ************************************************
p::first-line { font-weight: bold; }
p::before { content: "Note: "; font-style: italic; }
******************************************************
11. Transitions and Animations
 Transitions: Smooth changes between property
states.
Code: ************************************************
. box {
transition: background-color 0.5s ease;
}
.box:hover {
background-color: blue;
}
******************************************************
 Animations: Define keyframes for more complex
animations.
Code: ************************************************
@keyframes move {
from { transform: translateX(0); }
 to { transform: translateX(100px); }
}
.animate {
animation: move 2s infinite;
}
******************************************************
12. Media Queries
Make your design responsive by applying styles based
on device characteristics.
Code: ************************************************
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
******************************************************

13. CSS Variables

Reusable variables to maintain consistency and manage
theme changes.
Code: ************************************************
: root {
 --main-color: #3498db;
}
body {
color: var(--main-color);
}
******************************************************
14. Responsive Design
Using relative units and mobile-first design principles.
 Relative Units: em, rem, %, vw, vh.
 Flexibility: Design layouts that adapt to various
screen sizes.
15. CSS Preprocessors
Tools like SASS and LESS enhance CSS with features
like variables, nesting, and mixins.
Code: ************************************************
$primary-color: #3498db;

.button {
background-color: $primary-color;
&:hover {
background-color: darken($primary-color, 10%);
}
}
Code: ************************************************
16. Advanced Selectors
 Attribute Selectors:
Code: ************************************************
a[target="_blank"] { color: green; }
******************************************************
 Structural Pseudo-classes:
Code: ************************************************
li:first-child { font-weight: bold; }
******************************************************
17. Clipping and Masking
Control visibility of elements.
Code: ************************************************
.clip {
clip-path: circle(50% at 50% 50%);
}
******************************************************
18. Performance Optimization
 Minification: Reduce file size by removing
whitespace.
  Combine Files: Reduce HTTP requests by
combining CSS files.
 Use of Critical CSS: Inline the CSS needed for the
above-the-fold content.
19. Accessibility Best Practices
 Ensure good contrast and readability.
 Use semantic HTML.
 Responsive design for all users.
20. Conclusion
CSS is essential for creating visually appealing and
responsive web pages. Mastering both basic and
advanced concepts equips you to design effectively and
efficiently.

THANK YOU
KEEP LEARNING