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:

  1. Inline CSS: Directly on an element:
<p style="color:red;">Hello World</p>
  1. Internal CSS: Inside <style> tag in the <head>:
<style>
p { color: blue; }
</style>
  1. 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:

  1. Content → text or images
  2. Padding → space inside element
  3. Border → around padding
  4. 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