Instashire

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

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">

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.

UnitDescription
pxPixels; a standard unit for screens.
ptPoints; used in print (1 pt = 1/72 inch).
cmCentimeters; physical length.
mmMillimeters; physical length.
inInches; 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.

UnitDescription
emRelative to the font size of the parent.
remRelative to the font size of the root element (html).
%Percentage of the parent element’s dimension.
vw1% of the viewport width.
vh1% of the viewport height.
vmin1% of the smaller viewport dimension.
vmax1% 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 */
}

(c) RGB

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);

(c) Conic Gradients

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

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

p {
  font-size: large;
}

(3) font-style

p {
  font-style: italic;
}
ValueDescription
normalDefault font style (non-italic).
italicItalicized version of the text.
obliqueSlanted version of the text.

(4) font-variant

p {
  font-variant: small-caps;
}
ValueDescription
normalDefault, no special transformation.
small-capsConverts text to small uppercase letters.

(5) font-weight

p {
  font-weight: bold;
}

h1 {
  font-weight: 300; /* Light */
}
ValueDescription
normalDefault weight (400).
boldBold weight (700).
lighterLighter than the parent weight.
bolderBolder 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

p {
  text-align: justify;
}

(5) text-transform

p {
  text-transform: capitalize;
}

(6) text-decoration

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

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

(5) Background Repeat

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:

div {
  border-style: solid;
}

(2) Border Radius

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

.container {
  flex-direction: column;
}

(3) justify-content

.container {
  justify-content: center;
}

(4) align-items

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

(5) align-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:

@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

.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

.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>