Scribd
Upload
5 views6 pages

2 CSS Basics Detailed

The document provides an introduction to CSS, covering its role in styling HTML elements, including layout, typography, colors, and responsive design. Key topics include syntax and selectors, the box model, layout techniques like Flexbox and Grid, typography and color specifications, and responsive design strategies using media queries. It emphasizes the importance of understanding both fundamental and advanced CSS techniques for effective web design.

Uploaded by

rohit.mybox
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views6 pages

2 CSS Basics Detailed

The document provides an introduction to CSS, covering its role in styling HTML elements, including layout, typography, colors, and responsive design. Key topics include syntax and selectors, the box model, layout techniques like Flexbox and Grid, typography and color specifications, and responsive design strategies using media queries. It emphasizes the importance of understanding both fundamental and advanced CSS techniques for effective web design.

Uploaded by

rohit.mybox
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

CSS BASICS - INTRODUCTION

CSS (Cascading Style Sheets) styles HTML elements.


It controls layout, typography, colors, and responsive design.
These notes delve into fundamentals and advanced techniques.
1. SYNTAX & SELECTORS
- Selector { property: value; }
- Types: type (h1), class (.class), ID (#id), attribute ([type="text"])
- Combinators: descendant, child (>), adjacent sibling (+), general sibling (~)
2. BOX MODEL
- Components: content, padding, border, margin
- box-sizing: content-box vs border-box
- Example:
div {
box-sizing: border-box;
width: 200px;
padding: 10px;
}
3. LAYOUTS
- Flexbox:
.container { display: flex; justify-content: center; align-items: center; }
- Grid:
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
4. TYPOGRAPHY & COLORS
- font-family, font-size, line-height, text-align
- color: hex, rgb(), hsl()
- background: background-color, background-image, gradients
5. RESPONSIVE DESIGN
- Media queries:
@media (max-width: 768px) { ... }
- Relative units: em, rem, %, vw, vh
- Mobile-first approach

You might also like