CSS and HTML Semantic Tags Summary
1. CSS Selectors (Detailed)
CSS Selectors target HTML elements to apply styles.
Types of Selectors:
- Element: `div`, `p`, `h1`
- Class: `.container`, `.highlight`
- ID: `#main`, `#footer`
- Attribute: `input[type="text"]`, `a[href^="https"]`
- Combinators:
- Descendant: `div p` (all p inside div)
- Child: `ul > li` (only direct li children)
- Adjacent Sibling: `h1 + p` (p immediately after h1)
- General Sibling: `h1 ~ p` (all p siblings after h1)
- Pseudo-classes: `:hover`, `:nth-child(2)`, `:checked`
- Pseudo-elements: `::before`, `::after`, `::first-letter`
Example:
```css
.card:hover {
background-color: lightblue;
```
```html
Page 1
CSS and HTML Semantic Tags Summary
<div class="card">Hover me</div>
```
2. CSS Box Model (Detailed)
The Box Model defines how space is calculated for elements.
Components:
- Content: Actual text/image area
- Padding: Space around content
- Border: Outline around padding/content
- Margin: Space outside the border
Box Sizing:
- content-box: Total width = width + padding + border
- border-box: Total width includes padding + border
Example:
```css
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box; /* Total: 250px */
Page 2
CSS and HTML Semantic Tags Summary
```
```css
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box; /* Total: 200px */
```
3. CSS Display Property
Controls how elements behave in layout.
Values:
- block: Full width, starts on a new line (e.g., `div`, `p`)
- inline: Only as wide as content, doesn't start new line (e.g., `span`)
- inline-block: Like inline but allows width/height
- none: Element is hidden, removed from layout
- flex: Turns container into flexbox
- grid: Turns container into grid layout
Example:
```css
Page 3
CSS and HTML Semantic Tags Summary
nav a {
display: inline-block;
padding: 10px;
```
```html
<nav>
<a href="#">Home</a>
<a href="#">About</a>
</nav>
```
4. CSS Position Property
Controls how elements are positioned.
Types:
- static: Default, follows normal flow
- relative: Offset relative to itself
- absolute: Positioned to nearest non-static ancestor
- fixed: Positioned to viewport, stays on scroll
- sticky: Toggles between relative and fixed on scroll
Example:
Page 4
CSS and HTML Semantic Tags Summary
```css
.container {
position: relative;
.tooltip {
position: absolute;
top: 0;
right: 0;
```
```html
<div class="container">
Tooltip Example
<div class="tooltip">Info</div>
</div>
```
5. CSS Flexbox
Used for aligning items in 1D layouts.
Container properties:
- display: flex;
- flex-direction: row | column
Page 5
CSS and HTML Semantic Tags Summary
- justify-content: flex-start | center | space-between
- align-items: stretch | center | flex-end
- flex-wrap: wrap | nowrap
Item properties:
- flex: shorthand for grow/shrink/basis
- order: controls position
- align-self: override align-items
Example:
```css
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
```
```html
<div class="flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
```
Page 6
