CSS (Cascading Style Sheets) Tutorial

CSS (Cascading Style Sheets)

Introduction to CSS

CSS stands for Cascading Style Sheets and is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS separates the content (HTML) from the visual design, enabling better flexibility and control over the appearance of web pages.

What is CSS?

CSS is used to style and layout web pages. It allows you to control the color, font, size, spacing, and positioning of elements. With CSS, you can also create animations, responsive designs, and visually appealing user interfaces.

Benefits of Using CSS

Separation of Concerns: Keeps HTML focused on structure and CSS on styling.
Reusability: A single CSS file can style multiple pages, reducing redundancy.
Consistency: Ensures uniform styles across a website.
Better Maintenance: Easier to update and manage styles.
Improved Performance: Optimized CSS files can reduce page load times.

CSS Syntax

selector {
  property: value;
}

h1 {
  color: blue;
  font-size: 24px;
}

Types of CSS

Inline CSS : CSS written directly within an HTML element using the style attribute.

<p style="color: blue;">This is inline CSS.</p>

Internal CSS : CSS written inside the -style- tag within the -head section of an HTML document.

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

External CSS : CSS stored in a separate .css file and linked to an HTML document.

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

How to Link CSS to HTML

To link an external CSS file, use the -link- tag inside the -head- section of your HTML:

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

Selectors in CSS

CSS selectors are used to target specific HTML elements to apply styles. Here’s a detailed explanation of the different types of selectors:

(1) Universal Selector (*) The universal selector targets all elements on a web page.

* {
  margin: 0;
  padding: 0;
}

(2) Element Selector The element (or type) selector targets specific HTML tags.

h1 {
  color: blue;
}
p {
  font-size: 16px;
}

(3) Class Selector (.class) The class selector targets elements with a specific class attribute. Classes can be reused for multiple elements.

.my-class {
  color: green;
}

<p class="my-class">This is styled with a class selector.</p>

(4) ID Selector (#id) The ID selector targets an element with a unique id attribute. IDs are meant to be unique within a page.

#my-id {
  font-weight: bold;
}

<p id="my-id">This is styled with an ID selector.</p>

(5) Grouping Selectors Grouping selectors apply the same styles to multiple selectors, reducing redundancy.

h1, h2, p {
  color: gray;
}

(6) Attribute Selectors Attribute selectors target elements based on their attributes or attribute values. Basic Attribute Selector ([attribute])

input[required] {
  border: 2px solid red;
}

input[type="text"] {
  background-color: lightblue;
}

CSS Box Model

The CSS Box Model is the fundamental concept used to design and layout elements in CSS. It consists of the following components: Content, Padding, Border, and Margin, which together determine the size and spacing of an element.

Components of the Box Model

Content

div {
  width: 200px;
  height: 100px;
}

Padding

div {
  padding: 20px;
}

Border

div {
  border: 2px solid black;
}

Margin

div {
  margin: 10px;
}

Width and Height

div {
  width: 300px;
  height: 150px;
}

Box Sizing

The box-sizing property determines how the total size of an element is calculated.

(1) content-box (Default)

div {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

(2) border-box

div {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

Visualization

+-------------------------+ <-- Margin -->
|  +-------------------+  | <-- Border -->
|  |   +-----------+   |  | <-- Padding -->
|  |   | Content    |   |  |
|  |   +-----------+   |  |
|  +-------------------+  |
+-------------------------+

Example CSS

div {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 5px solid blue;
  margin: 20px;
  box-sizing: border-box;
}

CSS Positioning

CSS positioning defines how elements are placed on a web page. Using the position property, you can control an element’s placement relative to its parent, viewport, or other elements.

(1) Static Positioning (Default)

div {
  position: static;
}

<div>This is static positioning.</div>

(2) Relative Positioning

div {
  position: relative;
  top: 20px;  /* Moves down 20px from its original position */
  left: 10px; /* Moves right 10px from its original position */
}

<div style="position: relative; top: 20px;">This is relative positioning.</div>

(3) Absolute Positioning

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

<div style="position: relative;">
  <div style="position: absolute; top: 20px; left: 30px;">This is absolute positioning.</div>
</div>

(4) Fixed Positioning

div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: lightblue;
}

<div style="position: fixed; top: 0; left: 0;">This is fixed positioning.</div>

(5) Sticky Positioning

div {
  position: sticky;
  top: 50px; /* Sticks to the top after scrolling 50px */
}

<div style="position: sticky; top: 20px;">This is sticky positioning.</div>

(6) Z-index and Stacking Context

div {
  position: absolute;
  z-index: 10;
}

<div style="position: absolute; z-index: 1; background-color: red;">Behind</div>
<div style="position: absolute; z-index: 10; background-color: green;">In Front</div>

CSS Units and Values

CSS uses units to define dimensions (e.g., width, height, padding) and colors to control the appearance of elements. Here’s a detailed breakdown:

(1) CSS Units

(a) Absolute Units

Absolute units have a fixed size and are not affected by the surrounding content or screen size.

Unit	Description
`px`	Pixels; a standard unit for screens.
`pt`	Points; used in print (1 pt = 1/72 inch).
`cm`	Centimeters; physical length.
`mm`	Millimeters; physical length.
`in`	Inches; physical length (1 in = 2.54 cm).

div {
  width: 300px;
  font-size: 12pt;
}

(b) Relative Units

Relative units depend on the size of other elements or the viewport.

Unit	Description

`em`	Relative to the font size of the parent.

rem Relative to the font size of the root element (html).

`%`	Percentage of the parent element’s dimension.

`vw`	1% of the viewport width.

`vh`	1% of the viewport height.

vmin 1% of the smaller viewport dimension.

vmax 1% of the larger viewport dimension.

div {
  font-size: 1.5em;  /* 1.5 times the parent font size */
  width: 50%;        /* 50% of the parent width */
  height: 100vh;     /* Full viewport height */
}

(2) Colors

(a) Named Colors

CSS has predefined color names like red, blue, green, etc.

p {
  color: red;
}

(b) HEX

A hexadecimal representation of colors: #RRGGBB.

p {
  color: #ff5733; /* Orange */
}

Defines colors using Red, Green, and Blue values.

p {
  color: rgb(255, 87, 51); /* Same as #ff5733 */
}

(3) Gradients

Gradients create smooth color transitions.

(a) Linear Gradients

div {
  background: linear-gradient(to right, red, blue);
}

background: linear-gradient(90deg, red, yellow, green);

(b) Radial Gradients

div {
  background: radial-gradient(circle, red, yellow, green);
}

background: radial-gradient(at top left, red, blue);

div {
  background: conic-gradient(red, yellow, green, red);
}

background: conic-gradient(from 45deg at center, red, yellow, blue);

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    body {
      font-size: 16px; /* Base font size */
    }

    .box {
      width: 50%;          /* Relative to parent width */
      height: 200px;       /* Absolute height */
      padding: 1em;        /* Relative to parent font size */
      margin: 10px;        /* Absolute margin */
      background: linear-gradient(to right, #ff5733, #33cfff);
      border: 2px solid rgba(0, 0, 0, 0.5);
      color: hsl(200, 50%, 50%);
    }
  </style>
</head>
<body>
  <div class="box">CSS Units and Gradients Example</div>
</body>
</html>

CSS Typography

Typography in CSS focuses on styling text to enhance readability, appearance, and overall design. It is controlled by various font-related properties.

Font Properties

(1) font-family

p {
  font-family: "Arial", "Helvetica", sans-serif;
}

(2) font-size

Defines the size of the text.
Accepts absolute units (px, pt, etc.) or relative units (em, %, rem).
Relative Sizing Keywords: smaller and larger: Adjust font size relative to the parent element.
Predefined Keywords: xx-small, x-small, small, medium, large, x-large, xx-large.

p {
  font-size: 16px;  /* Absolute */
  font-size: 120%;  /* Relative */
}

p {
  font-size: large;
}

(3) font-style

p {
  font-style: italic;
}

Value	Description

normal Default font style (non-italic).

italic Italicized version of the text.

oblique Slanted version of the text.

(4) font-variant

p {
  font-variant: small-caps;
}

Value	Description

normal Default, no special transformation.

small-caps Converts text to small uppercase letters.

(5) font-weight

p {
  font-weight: bold;
}

h1 {
  font-weight: 300; /* Light */
}

Value	Description

normal Default weight (400).

bold Bold weight (700).

lighter Lighter than the parent weight.

bolder Bolder than the parent weight.

CSS Text Properties

CSS provides various text-related properties to control the appearance, alignment, spacing, and decoration of text. Here’s a detailed breakdown:

(1) color

p {
  color: #333; /* Dark gray */
}

(2) line-height

p {
  line-height: 1.6; /* 1.6 times the font size */
}

(3) letter-spacing

p {
  letter-spacing: 2px; /* Wider spacing */
}

(4) text-align

Aligns text horizontally within its container.
left: Aligns text to the left (default for LTR languages).
right: Aligns text to the right.
center: Centers the text.
justify: Stretches text to align both left and right edges.

p {
  text-align: justify;
}

(5) text-transform

Controls the capitalization of text.
none: Default, no transformation.
capitalize: Capitalizes the first letter of each word.
uppercase: Converts all text to uppercase.
lowercase: Converts all text to lowercase.

p {
  text-transform: capitalize;
}

(6) text-decoration

Adds or removes decorations like underlines, overlines, or strikethroughs.
none: No decoration.
underline: Adds a line below the text.
overline: Adds a line above the text.
line-through: Adds a strikethrough.
blink: Makes text blink (rarely supported).

p {
  text-decoration: underline;
}

p {
  text-decoration: underline dotted red; /* Red dotted underline */
}

CSS Backgrounds

CSS provides powerful properties to style the background of elements. Here’s a detailed explanation of the background-related properties:

(1) Background Colors

div {
  background-color: lightblue;
}

(2) Background Images

div {
  background-image: url('background.jpg');
}

(3) Background Position

div {
  background-image: url('background.jpg');
  background-position: center;
}

(4) Background Size

Specifies the size of the background image.
auto: Keeps the original size.
cover: Scales the image to cover the entire element.
contain: Scales the image to fit entirely within the element.
Custom sizes: 100px 200px (width and height) or percentages.

div {
  background-image: url('background.jpg');
  background-size: cover;
}

(5) Background Repeat

Controls whether the background image is repeated.
repeat: Repeats both horizontally and vertically (default).
repeat-x: Repeats horizontally.
repeat-y: Repeats vertically.
no-repeat: No repetition.

div {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

(6) Background Attachment

div {
  background-image: url('background.jpg');
  background-attachment: fixed;
}

CSS Borders and Outline

CSS provides properties for styling the borders and outlines of elements. While borders define the visible edges of an element, outlines are drawn around the border and do not affect the element’s dimensions.

(1) Border Styles

Defines the appearance of the border. Common Border Styles:

solid: A single solid line.
dotted: A series of dots.
dashed: A series of dashes.
double: Two solid lines.
groove: A carved effect.
ridge: A raised effect.
inset: Makes the border look embedded.
outset: Makes the border look pushed out.
none: No border.
hidden: Similar to none, but may differ in table layouts.

div {
  border-style: solid;
}

(2) Border Radius

Rounds the corners of an element.
Accepts values in px, %, or other units.
% values are relative to the element's dimensions.
Circle: Use 50% for equal-width and height elements.
Elliptical: Define horizontal and vertical radii.

div {
  border: 2px solid blue;
  border-radius: 10px;
}

div {
  border-radius: 50%; /* Perfect circle */
}

div {
  border-radius: 50px 20px; /* Elliptical corners */
}

(3) Outline Properties

div {
  outline-color: green;
}

div {
  outline-style: dotted;
}

div {
  outline-width: 4px;
}

CSS Flexbox

Flexbox, or the “Flexible Box Layout,” is a CSS module designed to provide an efficient way to layout, align, and distribute space among items in a container, even when their sizes are dynamic.

Introduction to Flexbox

Flex Container Properties

(1) display: flex

.container {
  display: flex;
}

(2) flex-direction

Specifies the direction of the main axis.
row (default): Items are placed left to right.
row-reverse: Items are placed right to left.
column: Items are placed top to bottom.
column-reverse: Items are placed bottom to top.

.container {
  flex-direction: column;
}

(3) justify-content

Aligns items along the main axis.
flex-start (default): Items align at the start of the main axis.
flex-end: Items align at the end of the main axis.
center: Items are centered along the main axis.
space-between: Equal space between items.
space-around: Equal space around items.
space-evenly: Equal space distributed, including edges.

.container {
  justify-content: center;
}

(4) align-items

Aligns items along the cross axis.
stretch (default): Items stretch to fill the container.
flex-start: Items align at the start of the cross axis.
flex-end: Items align at the end of the cross axis.
center: Items are centered along the cross axis.
baseline: Items align at their baseline.

.container {
  align-items: flex-start;
}

(5) align-content

Aligns multiple rows along the cross axis (only applies when items wrap to multiple lines).
stretch (default): Rows stretch to fill the container.
flex-start: Rows align at the start of the container.
flex-end: Rows align at the end of the container.
center: Rows are centered.
space-between, space-around, space-evenly: Similar to justify-content.

.container {
  align-content: space-between;
}

(6) flex-wrap

.container {
  flex-wrap: wrap;
}

Flex Item Properties

(1) order

.item {
  order: 1;
}

(2) flex-grow

.item {
  flex-grow: 2;
}

(3) flex-shrink

.item {
  flex-shrink: 0;
}

(4) flex-basis

.item {
  flex-basis: 100px;
}

(5) align-self

.item {
  align-self: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      flex-wrap: wrap;
      height: 200px;
      border: 2px solid #333;
    }

    .item {
      background-color: lightblue;
      color: #333;
      text-align: center;
      padding: 20px;
      flex-grow: 1;
      margin: 10px;
      border: 1px solid #666;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</body>
</html>

CSS Grid

CSS Grid Layout is a powerful two-dimensional layout system for the web. It allows you to create layouts by defining rows and columns on a grid container and placing grid items within those areas.

Grid Container Properties

(1) display: grid

.container {
  display: grid;
}

(2) grid-template-rows

.container {
  grid-template-rows: 100px 200px auto;
}

(3) grid-template-columns

.container {
  grid-template-columns: 1fr 2fr 100px;
}

(4) gap

.container {
  gap: 10px; /* Equal spacing between rows and columns */
}

(5) align-items

.container {
  align-items: center;
}

(6) justify-items

.container {
  justify-items: start;
}

(7) align-content

.container {
  align-content: space-around;
}

(8) justify-content

.container {
  justify-content: space-evenly;
}

Grid Item Properties

(1) grid-row

.item {
  grid-row: 1 / 3; /* Starts at row 1 and spans to row 3 */
}

(2) grid-column

.item {
  grid-column: 2 / 4; /* Starts at column 2 and spans to column 4 */
}

(3) grid-area

.item {
  grid-area: 1 / 2 / 3 / 4;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      display: grid;
      grid-template-rows: 100px 100px;
      grid-template-columns: 1fr 2fr 1fr;
      gap: 10px;
      border: 2px solid #333;
      height: 300px;
    }

    .item {
      background-color: lightblue;
      color: #333;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .item1 {
      grid-row: 1 / 2;
      grid-column: 1 / 4;
    }

    .item2 {
      grid-row: 2 / 3;
      grid-column: 1 / 2;
    }

    .item3 {
      grid-row: 2 / 3;
      grid-column: 2 / 3;
    }

    .item4 {
      grid-row: 2 / 3;
      grid-column: 3 / 4;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item item1">Item 1 (Header)</div>
    <div class="item item2">Item 2</div>
    <div class="item item3">Item 3</div>
    <div class="item item4">Item 4</div>
  </div>
</body>
</html>

CSS Responsive Design

Responsive design allows web pages to adjust their layout and elements to different screen sizes and devices, ensuring a seamless user experience across desktops, tablets, and mobile phones.

Media Queries

@media (condition) {
  /* CSS rules */
}

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Common Media Query Conditions:

max-width: Applies styles if the viewport is smaller than the specified width.
min-width: Applies styles if the viewport is larger than the specified width.
max-height: Applies styles if the viewport height is smaller than the specified height.
min-height: Applies styles if the viewport height is larger than the specified height.
orientation: Applies styles based on the orientation of the device (landscape or portrait).

@media (max-width: 600px) {
  /* Styles for devices smaller than 600px wide */
}

@media (min-width: 600px) and (max-width: 1024px) {
  /* Styles for devices between 600px and 1024px wide */
}

Breakpoints

Breakpoints are specific points in the design where the layout changes to adapt to different screen sizes. You can set breakpoints based on the screen width to define the different layouts.

Common Breakpoints:

@media (max-width: 768px) {
  /* Apply styles for tablets and smaller devices */
}

Mobile-First Design Approach

/* Mobile-first styles */
body {
  font-size: 14px;
  padding: 10px;
}

.container {
  display: block;
}

/* Tablet and larger devices */
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }

  .container {
    display: flex;
  }
}

/* Desktop and larger devices */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
  }

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

<!-- Responsive Design with Flexbox and Media Querie-->
<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    /* Mobile-first layout */
    .container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
      flex-grow: 1;
    }

    /* Tablet and larger screens */
    @media (min-width: 768px) {
      .container {
        flex-direction: row;
      }
    }

    /* Desktop screens */
    @media (min-width: 1024px) {
      .container {
        grid-template-columns: repeat(3, 1fr);
        display: grid;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

CSS Animations and Transitions

CSS animations and transitions allow you to animate elements on the web, making them more interactive and engaging. Transitions allow for smooth changes between states, while animations provide more control and flexibility for complex animations.

Transitions

A transition allows you to change property values smoothly over a given duration when an element’s state changes (e.g., hover).

(1) Transition-property

.element {
  transition-property: background-color, transform;
}

(2) Transition-duration

.element {
  transition-duration: 0.3s;
}

(3) Transition-timing-function

ease (default): Starts slow, speeds up, and then slows down.
linear: Constant speed throughout.
ease-in: Starts slow and then speeds up.
ease-out: Starts fast and then slows down.
ease-in-out: Starts and ends slow, with a faster middle.
cubic-bezier(x1, y1, x2, y2): Custom timing function.

.element {
  transition-timing-function: ease-in-out;
}

(4) Transition-delay

.element {
  transition-delay: 0.5s;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .button {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    .button:hover {
      background-color: green;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <button class="button">Hover Me</button>

</body>
</html>

Animations

Animations provide more control compared to transitions, allowing you to define multiple keyframes, timing, and other properties.

@keyframes

@keyframes move {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateX(50px);
    opacity: 0.5;
  }
  100% {
    transform: translateX(100px);
    opacity: 1;
  }
}

animation-name

.element {
  animation-name: move;
}

animation-duration

.element {
  animation-duration: 2s;
}

animation-timing-function

.element {
  animation-timing-function: ease-in-out;
}

animation-delay

.element {
  animation-delay: 1s;
}

animation-iteration-count

.element {
  animation-iteration-count: infinite;
}

animation-direction

.element {
  animation-direction: alternate;
}

animation-fill-mode

Specifies what styles the animation should have before or after it runs.
forwards: After the animation ends, the styles defined at the end (100%) will remain.
backwards: Before the animation starts, the styles defined at the start (0%) will be applied.
both: Combines forwards and backwards.

.element {
  animation-fill-mode: forwards;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    @keyframes move {
      0% {
        transform: translateX(0);
        opacity: 1;
      }
      50% {
        transform: translateX(50px);
        opacity: 0.5;
      }
      100% {
        transform: translateX(100px);
        opacity: 1;
      }
    }

    .element {
      width: 100px;
      height: 100px;
      background-color: blue;
      animation: move 2s ease-in-out infinite;
    }
  </style>
</head>
<body>

  <div class="element"></div>

</body>
</html>

Best Girls Boarding School in India