Ultimate CSS Masterclass (Part 1: Theory)Also Needed For Web -Dev

Introduction to CSS

CSS (Cascading Style Sheets) is the language used to style HTML. While HTML defines structure, CSS defines appearance:

Colors, fonts, and sizes
Layouts and spacing
Animations and transitions
Responsive design for all devices

CSS works in three ways:

Inline CSS: Directly on an element:

<p style="color:red;">Hello World</p>

Internal CSS: Inside <style> tag in the <head>:

<style>
p { color: blue; }
</style>

External CSS: Using a separate .css file linked with <link>:

<link rel="stylesheet" href="styles.css">

Theory Notes:

CSS is “cascading”: the order of rules matters
Specificity determines which rule applies when multiple rules target the same element
Inline > Internal > External in priority

1. Selectors and Syntax

CSS uses selectors to target HTML elements.

1.1 Types of Selectors

Element selector: Targets all elements of a type

p { color: red; }

Class selector: Targets elements with a class

.highlight { background-color: yellow; }

ID selector: Targets an element with a unique ID

#main { font-size: 20px; }

Universal selector: Targets all elements

* { margin: 0; padding: 0; }

Grouping selectors: Apply same style to multiple elements

h1, h2, h3 { font-family: Arial; }

1.2 Combinators

Descendant selector: Space between selectors

div p { color: blue; } /* all p inside div */

Child selector: > selects direct children

div > p { font-weight: bold; }

Adjacent sibling selector: +

h1 + p { margin-top: 0; }

General sibling selector: ~

h1 ~ p { color: gray; }

2. Colors, Fonts, and Text

2.1 Colors

Named colors: red, blue, green
Hexadecimal: #ff0000
RGB: rgb(255,0,0)
RGBA (with transparency): rgba(255,0,0,0.5)

2.2 Fonts

font-family: Sets font type
font-size: Adjusts size
font-weight: Normal, bold, 100–900
font-style: Normal, italic, oblique

2.3 Text Properties

text-align: left, right, center, justify
text-decoration: underline, none, line-through
text-transform: uppercase, lowercase, capitalize
letter-spacing: spacing between letters
line-height: spacing between lines

3. Box Model

Every element is a rectangular box:

Content → text or images
Padding → space inside element
Border → around padding
Margin → space outside element

div {
  width: 200px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

Notes:

box-sizing: border-box; includes padding and border in total width
Margins can collapse vertically

4. Backgrounds and Borders

4.1 Background

background-color
background-image
background-repeat
background-position
background-size

4.2 Borders

border-width, border-style, border-color
border-radius for rounded corners
outline for extra highlighting

5. Positioning and Layout

5.1 Display

block → occupies full width, starts on new line
inline → only as wide as content, no line break
inline-block → behaves like inline but allows width/height

5.2 Position

static → default
relative → offset relative to original position
absolute → relative to nearest positioned ancestor
fixed → relative to viewport
sticky → sticks when scrolling

5.3 Float and Clear

float: left or right alignment
clear: stops floating effects

5.4 Flexbox

display: flex; → modern layout system
justify-content: space-around, space-between, center
align-items: flex-start, flex-end, center
flex-direction: row, column

5.5 Grid

display: grid; → two-dimensional layout
grid-template-columns and grid-template-rows
grid-gap → spacing between grid items

6. Lists and Navigation Styling

Remove default bullets with list-style: none;
Horizontal menus with display: inline-block
Hover effects with :hover

7. Forms Styling

Input fields: padding, border, border-radius
Buttons: background-color, color, cursor: pointer
Focus effect: :focus { outline: none; border-color: blue; }

8. Pseudo-classes and Pseudo-elements

8.1 Pseudo-classes

:hover, :active, :focus, :first-child, :last-child

8.2 Pseudo-elements

::before and ::after → insert content
::first-letter, ::first-line

9. Transitions and Animations

9.1 Transitions

button {
  background-color: blue;
  transition: background-color 0.5s ease;
}
button:hover {
  background-color: red;
}

9.2 Animations

@keyframes example {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

div {
  animation: example 3s infinite;
}

10. Media Queries and Responsive Design

@media (max-width: 768px) {
  body {
    background-color: lightgray;
  }
  nav {
    display: block;
  }
}

Make websites responsive for different devices
Adjust font size, layout, and visibility

11. Advanced CSS Features

Variables: --main-color: #3498db;
CSS Grid Advanced: grid-template-areas
Clip-paths: Shape elements in polygons, circles, etc.
Filters: blur(), brightness(), grayscale()
CSS Custom Fonts: @font-face