Unit 4: Introduction to CSS

4.1 CSS Basics & Selectors

CSS Types:

Inline CSS - style attribute
Internal CSS - <style> tag in <head>
External CSS - separate .css file with <link> tag

CSS Selectors:

Element Selector: p, div, h1
ID Selector: #myId
Class Selector: .myClass
Attribute Selector: [type="text"]
Universal Selector: *
Descendant Selector: div p
Child Selector: div > p
Grouping Selector: h1, h2, h3
Pseudo-class: :hover, :focus, :nth-child()
Pseudo-element: ::before, ::after, ::first-line

CSS Specificity: ID > Class > Element

4.2 Background, Text & Font Properties

Background Properties:

background-color, background-image, background-repeat
background-position, background-size, background-attachment
background-clip, background (shorthand)

Text Properties:

color, text-align, text-indent, text-transform
text-decoration, letter-spacing, word-spacing
line-height, text-shadow

Font Properties:

font-family, font-size, font-style, font-weight
font-variant, font (shorthand)
Google Fonts via <link> or @import

4.3 Box Model & Layout

Box Model Properties:

margin, padding, width, height
border-style, border-width, border-color, border
box-sizing (content-box, border-box)
box-shadow

Display Properties:

inline, block, inline-block, none
flex, grid

Flexbox Properties:

display: flex; flex-direction (row, column)
justify-content, align-items, flex-wrap, gap
order, flex (shorthand)

Grid Layout Properties:

display: grid; grid-template-columns, grid-template-rows
gap (grid-gap), grid-column, grid-row

Positioning:

position: static, relative, absolute, fixed, sticky
top, right, bottom, left, z-index

Practice Problems (Practical 7-9)

Practical 7: Create external CSS file with:
i) Paragraph with green color and italic for first line
ii) Heading selection background color grey
iii) Ordered list with capital roman letters, green color, 30px font

Practical 8: Create flexbox container with 4 child boxes:
- flex-direction: row
- justify-content: space-between
- align-items: center
- Third box with order: -1

Practical 9: Create CSS file with styles for:
i) Headings: 120% font size, normal style
ii) Class c1: bold paragraphs with 3cm margin
iii) Background: orange color + nature.jpg (horizontal repeat)

Q1: Explain CSS Specificity. Which selector has highest priority?

Q2: Differentiate between margin and padding.

Q3: What is box-sizing: border-box? Why is it useful?

Q4: Explain Flexbox properties: justify-content vs align-items.

Q5: How would you create a responsive grid layout with CSS Grid?

Q6: Differentiate between position: relative and position: absolute.

Q7: How do you include Google Fonts in your CSS?

Q8: Create a layout with header (fixed top), sidebar (fixed left), and main content using CSS positioning.