Complete CSS

Have you ever wondered how a web page looks so impressive or how a website appears so visually appealing? All of this is made possible by CSS, which stands for Cascading Style Sheets.

Real Life Analogy

Let's understand CSS with a real-life analogy. Think about a car. Have you ever noticed how a car looks so impressive and visually appealing? That’s what CSS does—it’s all about beautification.

Imagine you build a car with just the frame, seats, and wheels. It wouldn’t look great, right? But when you add features like the car’s color, design, and overall theme, it starts to look amazing.

Similarly, CSS makes web pages or websites attractive by adding fonts, colors, images, layouts, and more. It turns a plain structure into something beautiful.

Key Milestones

CSS1 (1996): The first version included simple features like font, color, and alignment.
CSS2 (1998): Added support for media types, positioning, and z-index.
CSS3 (2011): Modularization was introduced, allowing separate development of CSS parts like selectors, animations, and transitions.
CSS4 (In Progress): CSS4 isn't a single specification, but newer features like CSS Grid and Flexbox are part of modern CSS improvements.

Why CSS Matters:

Separation of Concerns: Lets developers focus on the structure (HTML) and design (CSS) separately.
Efficiency: One CSS file can style multiple HTML pages.
Responsive Design: Adjusts the layout for different devices (mobile, tablet, desktop) using media queries.
Advanced Features: Animations, transitions, and grid layouts make websites more interactive and user-friendly.

CSS Syntax

Selector: Specifies the HTML element(s) to style.
Declaration Block: Contains one or more declarations enclosed in curly braces {}.
Declaration: Consists of a property and a value separated by a colon :.
```
  selector {
    property: value;
  }
```
CSS Selectors

Selectors define the elements to style:
- Universal Selector: * { } (Selects all elements)
- Type Selector: h1 { } (Selects elements by tag name)
- Class Selector: .classname { } (Selects elements by class)
- ID Selector: #idname { } (Selects a specific element by ID)
- Group Selector: h1, h2 { } (Selects multiple elements)
- Descendant Selector: div p { } (Selects p inside div)

Properties In CSS

Font

Font-Family: Specifies the font family of the text.
Font: A shorthand property for specifying the font-style, font-variant, font-weight, font-size/line-height, and font-family properties all at once.
Font-Size: Specifies the font size of the text.
Font-Weight: Specifies the weight of a font.
Font-Style: Specifies the font style of the text.
```
  p {
      font-family: Times, serif, Arial, Helvetica, sans serif;
      font:15px Helvetica, sans serif, Arial;
      font-size: 15px;
      font-weight: bold;
      font-style: italic;
      }
```
TEXT

• Text-Align: It specifies the horizontal alignment of text.

• Text-Decoration: It specifies the decoration added to text.

• Letter-Spacing: It increases or decreases the space between characters in a text.

• Text-Transform: It controls the capitalization of text.

• Word-Spacing: It increases or decreases the space between words in a text.

• Text-Indent: It specifies the indentation of the first line in a text-block.

• Line-Height: It sets the line height.

• Text-Shadow: It adds shadow to the text.
```
  p {
      text-align : center;
      text-decoration : underline;
      letter-spacing :5px;
      text-transform : uppercase;
      word-spacing : 8px;
      text-indent: 40px;
      line-height: 40%;
      text-shadow: 4px 4px #ff0000;
  }
```
BACKGROUND

• Background-Image: It specifies one or more background images for an element.

• Background-Size: It specifies the size of the background images.

• Background-Position: It specifies the position of a back-ground image.

• Background-Repeat: It sets, how a background image will be repeated.

• Background-Color: It specifies the background color of an element.

• Background-Attachment: It sets whether a background image scrolls with the rest of the page, or is fixed.

• Background-Origin: It specifies the origin position of a background image.

• Background: A shorthand property for all the background-* properties.
```
  body
      background-image : url(‘himanshu.png’);
      background-size : auto;
      background-position :center;
      background-repeat : no-repeat;
      background-color : #ffffff;
      background-attachment : fixed;
      background-origin : content-box;
  }
```
BORDERS

• Border-Width: It sets the width of the four borders.

• Border-Style: It sets the style of the four borders.

• Border-Radius: A shorthand property for the four border-*-radius properties.

• Border-Color: It sets the color of the four borders.

• Border: A shorthand property for border-width, border-style and border-color.

• Border-Spacing: It sets the distance between the borders of adjacent cells.
```
  div
      border-width :4px;
      border-style :solid;
      border-radius : 4px;
      border-color : #000000;
      border:20px dotted coral;
      border-spacing : 20px;
  }
```
BOX MODEL
- Padding: A shorthand property for all the padding-* properties.
- Visibility: It specifies whether or not an element is visible.
- Display: It specifies how a certain HTML element should be displayed.
- Height: It sets the height of an element.
- Width: It sets the width of an element.
- Float: It specifies whether an element should float to the left, right, or not at all.
- Clear: It specifies what should happen with the element that is next to a floating element.
- Margin: It sets all the margin properties in one declaration.
- Overflow: It specifies what happens if content overflows an element's box.
```
  p
      padding:10px 20px 10px 20px;
      visibility:hidden;
      display:inline-block;
      height:auto;
      width:100px;
      float:right;
      clear:left;
      margin:20px 10px 20px 10px;
      overflow:scroll;
  }
```

COLORS

• Color: It sets the color of text.

• Outline-Color: It sets the color of an outline.

• Caret-Color: It specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable.

• Opacity: It sets the opacity level for an element.

    {  
        color:rgb(0, 0, 0);
        outline-color : #000000;
        caret-color : coral;
        opacity:0.8;
    }

LAYOUT

• Box-Align: It specifies how an element aligns its contents across its layout in a perpendicular direction.

• Box-Direction: It specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge).

• Box-Flex: This property specifies how a box grows to fill the box that contains it, in the direction of the containing box's layout.

• Box-Orient: It sets whether an element lays out its contents horizontally or vertically.

• Box-Sizing: It allows us to include the padding and border in an element's total width and height.

• Box-Pack: This property specifies how a box packs its contents in the direction of its layout.

• Min-Width: It sets the minimum width of an element.

• Max-Width: It sets the maximum width of an element.

• Min-Height: It sets the minimum height of an element.

• Max-Height: It sets the maximum height of an element.

{
    box-align : start;
    box-direction : normal;
    box-flex : normal;
    box-orient : inline;
    box-sizing :margin-box;
    box-pack :justify;
    min-width :200px;
    max-width : 400px;
    min-height : 100px;
    max-height : 1000px;
}

TABLE

Border-Spacing: It sets the distance between the borders of adjacent cells.
Border-Collapse: It sets whether table borders should collapse into a single border or be separated.
Empty-Cells: It specifies whether or not to display borders and background on empty cells in a table.
Caption-Side: It specifies the placement of a table caption.

Table-Layout: It defines the algorithm used to layout table cells, rows, and columns.

  {
  border-spacing : 4px;
  border-collapse : separate;
  empty-cells :show;
  caption-side : bottom;
  table-layout : auto;
  }

COLUMNS

• Column-Gap: It specifies the gap between the columns.

• Column-Rule-Width: It specifies the width of the rule between columns.

• Column-Rule-Color: It specifies the color of the rule between columns.

• Column-Rule-Style: It Specifies the style of the rule between columns.

• Column-Count: It specifies the number of columns an element should be divided into.

• Column-Span: It specifies how many columns an element should span across.

• Column-Width: It specifies the column width.

{
    column-gap :4px;
    column-rule-width : medium;
    column-rule-color : #000000;
    column-rule-style : dashed;
    column-count : 20;
    column-span :all;
    column-width : 4px;
}

LIST & MARKER

• List-Style-Image: It specifies an image as the list-item marker.

• List-Style-Position: It specifies the position of the list-item markers (bullet points).

• List-Style-Type: It specifies the type of list-item marker.

• Marker-Offset: It allows you to specify the distance between the marker and the text relating to that marker.

{
    list-style-image : url(‘himanshu.png’);
    list-style-position : 10px;
    list-style-type :square;
    marker-offset :auto;
}

ANIMATION

• Animation-Name: It specifies a name for the @keyframes animation.

• Animation-Delay: It specifies a delay for the start of an animation.

• Animation-Duration: It specifies a delay for the start of an animation.

• Animation-Timing-Function: It specifies the speed curve of an animation.

• Animation-Iteration-Count: It specifies the number of times an animation should be played.

• Animation-Fill-Mode: It specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

• Animation-Play-State: It specifies whether the animation is running or paused.

• Animation-Direction: It specifies whether the animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.

{
    animation-name: anime;
    animation-delay: 4ms;
    animation-duration: 10s;
    animation-timing-function :ease;
    animation-iteration-count : 5;
    animation-fill-mode : both;
    animation-play-state :running;
    animation-direction:normal;
}

TRANSITION

Transition-Property: It specifies the name of the CSS property the transition effect is for.
Transition-Delay: It specifies when the transition effect will start.
Transition-Duration: It specifies how many seconds or milliseconds a transition effect takes to complete.

Transition-Timing-Function: It specifies the speed curve of the transition effect.

  {
      transition-property : none;
      transition-delay : 4ms;
      transition-duration: 10s;
      transition-timing-function:ease-in-out;
  }

CSS FLEXBOX

PARENT PROPERTIES:

• Display: It specifies how a certain HTML element should be displayed.

• Flex-Direction: It specifies the direction of the flexible items.

• Flex-Wrap: It specifies whether the flexible items should wrap or not.

• Flex-Flow: It is a shorthand property for the flex-direction and the flex-wrap properties.

• Justify-Content: It specifies the alignment between the items inside a flexible container when the items do not use all available space.

• Align-Items: It specifies the alignment for items inside a flexible container.

• Align-Content: It specifies the alignment between the lines inside a flexible container when the items do not use all available space.

{
    display:flex;
    flex-direction : row | row reverse | column | column reverse;
    flex-wrap : nowrap | wrap | wrap reverse;
    flex-flow: column wrap;
    justify-content:flex-start | flex end | center | space between | space
        around | space evenly | start | end | left | right ... + safe | unsafe;
    align-items:stretch | flex start | flex end | center | baseline | first
        baseline | last baseline | star t | end | self start | self end + ... safe |
        unsafe;
    align-content : flex start | flex end | center | space between | space
        around | space evenly | stretch | start | end | baseline | first baseline |
        last baseline + ... safe | unsafe;
}

CHILD PROPERTIES:

• Order: It sets the order of the flexible item, relative to the rest.

• Flex-Grow: It specifies how much the item will grow relative to the rest.

• Flex-Shrink: It specifies how the item will shrink relative to the rest.

• Flex-Basis: It Specifies the initial length of a flexible item.

• Align-Self: It specifies the initial length of a flexible item.

{
order:2 ; /* By default it is 0 */
flex-grow: 5; /* By default it is 0 */
flex-shrink :4 /* By default it is 1*/
flex-basis : auto /* By default it is auto*/
align-self: auto | flex start | flex end | center | baseline | stretch;
flex:none | [ <'flex grow'> <'flex shrink'>? || <'flex basis'> ]
}

CSS GRID

PARENT PROPERTIES:

• Display: It specifies how a certain HTML element should be displayed.

• Grid-Template-Columns: It specifies the size of the columns, and how many columns in a grid layout.

• Grid-Template-Rows: It specifies the size of the columns, and how many columns in a grid layout.

• Grid-Template: It is a shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties.

• Column-Gap: It specifies the gap between the columns.

• Row-Gap: It specifies the gap between the grid rows.

• Grid-Column-Gap: It specifies the size of the gap between columns.

• Grid-Row-Gap: It specifies the size of the gap between rows.

• Gap: It is a shorthand property for the row-gap and the column-gap properties.

• Grid-Gap: It is a shorthand property for the grid-row-gap and grid-column-gap properties.

• Align-Items: It specifies the alignment for items inside a flexible container.

• Justify-Content: It specifies the alignment between the items inside a flexible container when the items do not use all available space.

• Align-Content: It specifies the alignment between the lines inside a flexible container when the items do not use all available space.

• Grid-Auto-Columns: It specifies a default column size.

• Grid-Auto-Rows: It specifies a default row size.

• Grid-Auto-Flow: It specifies how auto-placed items are inserted in the grid.

{
    display:grid | inline grid;
    grid-template-columns: 10 px 10 px 10 px;
    grid-template-rows: 5px auto 10px;
    grid-template: none | <grid-template-rows> / <grid-template-columns>;
    column-gap: <line size>;
    row-gap: <line size>;
    grid-column-gap: <line size>;
    grid-row-gap: <line size>;
    gap:<grid row gap> <grid column gap>;
    grid-gap: <grid row gap> <grid column gap>;
    align-items: start | end | center | stretch;
    justify-content: start | end | center | stretch | space around | space
        between | space evenly;
    align-content: start | end | center | stretch | space around | space
        between | space evenly;
    grid-auto-columns: <track size>;
    grid-auto-rows: <track size>;
    grid-auto-flow: row | column | row dense | column dense;
}

CHILD PROPERTIES:

• Grid-Column-Start: It specifies where to start the grid item.

• Grid-Column-End: It specifies where to end the grid item.

• Grid-Row-Start: It specifies where to start the grid item.

• Grid-Row-End: It specifies where to end the grid item.

• Grid-Column: It is a shorthand property for the grid-column-start and the grid-column-end properties.

• Grid-Row: It is a shorthand property for the grid-row-start and the grid-row-end properties.

• Grid-Area: It either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.

• Align-Self: It specifies the alignment for selected items inside a flexible container.

{
grid-column-start: <number> | <name> | span <number> | span <name> | auto;|
grid-column-end: <number> | <name> | span <number> | span <name> |auto;
grid-row-start: <number> | <name> | span <number> | span <name> |auto;
grid-row-end: <number> | <name> | span <number> | span <name> |auto;
grid-column : <start line> / <end line> | <start line> / span <value>;
grid-row: <start line> / <end line> | <start line> / span <value>;
grid-area: <name> | <row start> / <column start> / <row end> / <column end>;
align-self: start | end | center | stretch;
}

CSS Units

CSS supports various units for defining sizes:

Absolute Units: px, cm, mm, in
Relative Units: em, rem, %, vh, vw

Adding CSS to a Webpage

Inline: Inside the style attribute of an HTML element.

<p style="color: red;">This is inline styling.</p>

Internal: Inside a <style> tag in the <head> section.

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

External: Using an external .css file.

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

Responsive Design

Responsive design ensures your website looks good on all devices. Use:

Media Queries:

  @media (max-width: 600px) {
    body {
      background-color: lightblue;
    }
  }

Flexible Layouts: Use flexbox or grid.

Best Practices

Use external CSS files to keep things organized.
Avoid inline styles unless absolutely needed.
Give classes and IDs clear, descriptive names.
Combine and minify CSS files to improve performance.

CSS Basics - Styling the Web

A Complete Beginner's Guide-

Table of contents

Real Life Analogy

Key Milestones

Why CSS Matters:

CSS Syntax

CSS Selectors

Properties In CSS

Font

TEXT

BACKGROUND

BORDERS

BOX MODEL

COLORS

LAYOUT

TABLE

COLUMNS

LIST & MARKER

ANIMATION

TRANSITION

CSS FLEXBOX

PARENT PROPERTIES:

CHILD PROPERTIES:

CSS GRID

PARENT PROPERTIES:

CHILD PROPERTIES:

CSS Units

Adding CSS to a Webpage

Responsive Design

Best Practices