What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS file
1. CSS Introduction
CSS Syntax: CSS rules are written in the form of selectors and declarations:
css
Copy code
selector {
property: value;
Selectors: Choose elements to style (e.g., h1, .class, #id).
Declaration Block: Contains one or more properties and values to apply to the selector.
2. CSS Selectors
Basic Selectors:
o element selector (e.g., p).
o .class selector (e.g., .box).
o #id selector (e.g., #header).
Combinators:
o Descendant ( ): Targets elements within a specified parent.
o Child (>): Selects direct child elements.
o Adjacent Sibling (+): Selects the next sibling.
o General Sibling (~): Selects all siblings following an element.
3. CSS Colors
Color Names, HEX, RGB, HSL: Ways to define colors.
o HEX (e.g., #ff5733)
o RGB (e.g., rgb(255, 87, 51))
o HSL (e.g., hsl(9, 100%, 60%))
Opacity & Transparency: Use rgba and hsla for transparent colors.
4. CSS Backgrounds
Background Color: background-color: color;
Background Image: background-image: url('image.jpg');
Background Position: background-position: center;
Background Repeat: background-repeat: no-repeat;
Background Attachment: background-attachment: fixed;
5. CSS Borders
Border Style: e.g., solid, dotted, dashed.
Border Width: e.g., 1px, 5px.
Border Color: e.g., border-color: red;.
Border Radius: Rounds the corners, e.g., border-radius: 10px;.
6. CSS Margins and Padding
Margins: Space outside an element (margin: 10px;).
Padding: Space inside an element (padding: 10px;).
7. CSS Box Model
Defines how width and height are calculated, including content, padding, border, and margin.
8. CSS Display and Position
Display Property: block, inline, inline-block, none.
Position Property:
o Static: Default, no positioning.
o Relative: Positioned relative to itself.
o Absolute: Positioned relative to the nearest positioned ancestor.
o Fixed: Fixed relative to the viewport.
o Sticky: Switches between relative and fixed based on scroll.
9. CSS Flexbox
Used to create flexible and responsive layouts.
Main Properties:
o display: flex;
o flex-direction: row / column;
o justify-content: Aligns items horizontally.
o align-items: Aligns items vertically.
10. CSS Grid
Powerful for 2D layouts.
Main Properties:
o display: grid;
o grid-template-columns / rows: Defines columns and rows.
o gap: Defines spacing between grid items.
