Introduction to CSS

- What’s CSS?
  
  CSS stands for Cascading Styling Sheets, which is a stylesheet language used to style web pages written in HTML or XML.
  - Why use CSS?
    
    We use CSS to control the visuals of our web page, and without CSS, our web page will look plain and unstyled. Do you want to see how it’ll look without CSS?
    
    Yes, here we go!

Shikha Chaudhary on LinkedIn: #css #html | 191 comments

How CSS works?

CSS uses selector to identify which element to select for style.

p {
  color: blue;
}

p targets all <p> (paragraph) elements.

How can I use CSS with HTML?

There are three main ways to add CSS to an HTML document:

Inline CSS - You can add CSS directly to HTML elements using the style attribute.
```
  <p style="color: blue; font-size: 16px;">This is a paragraph</p>
```

Internal CSS - You can include CSS within the HTML file using a <style> tag, usually placed in the <head> section

  <head>
    <style>
      p {
        color: blue;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>

External CSS - You can link an external CSS file using the <link> tag in the <head> section

  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>This is a paragraph</p>
  </body>

Then in a separate styles.css file:

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

CSS Syntax

CSS is made up of rules: Each rule has two main parts:

Selector: It specifies which element(s) you want to style.
Declaration Block: It contains the styles to apply to the selector, which is enclosed in curly braces { }.

A declaration contains properties and values.
- Property: The style attribute you want to change (e.g., color, font-size).
- Value: The value you assign to that property (e.g., blue, 16px).

Declarations are separated by semicolons (;).

    p {
      color: blue;        /* Property: color, Value: blue */
      font-size: 16px;    /* Property: font-size, Value: 16px */
    }

Selector target all p (paragraph) elements and Declaration block apply the text color blue wit font size 16px.

CSS Comments

Comments are used to explain parts of the code, making it easier to understand. They are ignored by the browser.
```
  /* This is a comment */
```

CSS Selectors

CSS selectors are the patterns used to select and style elements on the web page. They’re a fundamental part of CSS because they allow you to target elements based on their type, attributes, relationships, or states without modifying the HTML directly.

Universal Selector: Selects all elements on the page.
```
  * {
      margin: 0;
      padding: 0;
  }
```
It targets every element and removes its margin and padding.
Element Selector: Selects all elements of a specific type.
```
  p {
      color: red;
  }
```
It selects all <p> (paragraph) elements and changes their text color to red.
Class Selector: Selects all elements with a specific class. Class selectors are prefixed with a dot (.).
```
  .highlight {
      background-color: pink;
  }
```
It targets all elements with the highlight class.
ID Selector: Selects an element with a specific ID. ID selectors are prefixed with a hash (#).
```
  #header {
      font-size: 24px;
  }
```
It targets an element with the ID header to apply the font size of 24xp
Descendant Selector: Selects elements that are nested within a parent element.
```
  div p {
      color: green;
  }
```
It selects all <p> elements inside <div> elements and makes their text color green.
Child Selector (>): Targets direct children of an element.
```
  ul > li {
        list-style: none; 
  }
```
It styles only the direct <li> children of <ul> elements.
Adjacent Sibling Selector (+): Targets the next sibling element.
```
  h2 + p { 
      font-style: italic; 
  }
```
It styles paragraphs that immediately follow <h2> headings.
General Sibling Selector (~): Targets all sibling elements that follow.
```
  h2 ~ p { 
      color: gray;
   }
```
It styles all paragraphs that follow <h2> headings within the same parent.
Attribute Selector: Selects elements based on the presence of an attribute or its value.
```
  input[type="text"] {
      border: 1px solid black;
  }
```
This targets all <input> elements with a type="text" attribute.

CSS Properties

CSS properties are used to style HTML elements, controlling their appearance and layout on a web page. There are many CSS properties, but we’ll discuss common CSS properties.

Text and Font properties:

These properties manage how text appears within an element.

color: Defines the text color.
font-family: Sets the font type.
font-size: Controls the text size.
font-weight: Adjusts the text boldness.
text-align: Aligns text horizontally.
line-height: Sets the spacing between lines.

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

  /* Sets the font type */
  h1 {
    font-family: 'Arial', sans-serif; /* Using Arial font, fallback to sans-serif */
  }

  /* Controls the text size */
  h2 {
    font-size: 24px; /* Sets the font size to 24 pixels */
  }

  /* Adjusts the text boldness */
  strong {
    font-weight: bold; /* Makes the text bold */
  }

  /* Aligns text horizontally */
  div {
    text-align: center; /* Centers the text horizontally within the div */
  }

  /* Sets the spacing between lines */
  body {
    line-height: 1.6; /* Sets the line height to 1.6 times the font size */
  }

Background Properties:

These properties style an element’s background.

background-color: Sets the background color.
background-image: Adds an image to the background.
background-size: Adjusts the background image size.

background-position: Positions the background image.

  /* Sets the background color */
  body {
    background-color: #f0f0f0; /* Light gray background color */
  }

  /* Adds an image to the background */
  header {
    background-image: url('background.jpg'); /* Adds an image named 'background.jpg' */
  }

  /* Adjusts the background image size */
  section {
    background-size: cover; /* Ensures the background image covers the entire section */
  }

  /* Positions the background image */
  footer {
    background-image: url('footer-bg.jpg');
    background-position: center center; /* Positions the background image at the center of the footer */
  }

Box Model Properties :

The box model defines an element’s structure, including content, padding, border, and margin.

width and height: Set the content area’s dimensions.
padding: Adds internal spacing between content and border.
border: Defines the element’s border.

margin: Sets external spacing around the element.

A Basic Walkthrough of the CSS Box Model

  /* Sets the content area’s dimensions */
  div {
    width: 300px; /* Sets the width of the div to 300 pixels */
    height: 200px; /* Sets the height of the div to 200 pixels */
  }

  /* Adds internal spacing between content and border */
  section {
    padding: 20px; /* Adds 20 pixels of padding inside the section */
  }

  /* Defines the element’s border */
  article {
    border: 2px solid #333; /* Adds a solid, 2px thick dark gray border around the article */
  }

  /* Sets external spacing around the element */
  footer {
    margin: 15px; /* Adds 15 pixels of margin on all sides of the footer */
  }

Layout Properties

These properties control element positioning and arrangement.

display: Determines how an element is rendered.

display: block; makes the element take up the full width.
position: Sets the positioning method.

position: relative; positions the element relative to its normal position.
float: Pushes an element to the left or right.

float: right; floats the element to the right.
flex: Used with display: flex; for flexible layouts.

flex-direction: row; arranges flex items horizontally.
grid: Used with display: grid; for grid-based layouts.

grid-template-columns: 1fr 1fr; creates two equal-width columns.

Visual Effects Properties

These properties enhance an element’s appearance.

box-shadow: Adds a shadow effect.
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5); creates a soft shadow.
opacity: Adjusts transparency.
opacity: 0.8; makes the element slightly transparent.
transition: Animates property changes.

transition: all 0.5s; smoothly transitions all changes over 0.5 seconds.
animation: Applies custom animations.

animation: slide 2s infinite; runs a "slide" animation every 2 seconds.

CSS Colors and Units

There are several ways to define colors in CSS

Named Colors: These are simple, human-readable keywords like red, blue or purple.

These name color are great when precision is not critical.

color: green;
Hex Codes: A six-digit code starting with # that represents red, green, and blue (RGB) values in hexadecimal.
RGB/RGBA: This uses a function-like syntax: rgb(255, 87, 51) where each number (0-255) is the intensity of red, green, and blue.

CSS Units

Units in CSS measure size, distance, or even time. They split into two camps: absolute and relative.

Absolute Units

These are fixed and don’t change based on context:

px (pixels): The go-to unit. It’s not exactly a physical pixel anymore due to high-DPI screens, but think of it as a tiny, consistent dot. font-size: 16px;
cm, mm, in: Centimeters, millimeters, inches. Mostly for print stylesheets. width: 5cm;.
pt (points): 1pt = 1/72 inch, also print-friendly. font-size: 12pt;.
pc (picas): 1pc = 12pt. Rare, but exists. margin: 1pc;.

Relative Units

These scale based on something else, making them flexible:

em: Relative to the parent’s font-size. If a parent has font-size: 20px, 2em is 40px. padding: 2em;.
rem: Relative to the root (usually <html>) font-size. If the root is 16px, 1.5rem is 24px. Great for consistent scaling. line-height: 1.5rem;
%: Percentage of the parent’s value (depends on the property). width: 50%; is half the parent’s width.
vw, vh: Viewport width/height. 1vw = 1% of the viewport’s width, 100vh = full viewport height. height: 50vh;.
vmin, vmax: The smaller or larger of vw and vh. Useful for responsive tricks. font-size: 5vmin;.
ex, ch: Based on the font’s “x-height” (height of lowercase x) or character width (width of “0”). Niche but precise for typography. width: 20ch;.

When to Use What

px for fixed, predictable sizes.
rem for scalable designs tied to a single root size (accessibility bonus).
em for stuff that should cascade with parent elements.
vw/vh for viewport-driven layouts.
Percentages for fluid, proportional designs.

Conclusion

This article introduces the basics of CSS (Cascading Style Sheets), a language used to style web pages. It covers the purpose of CSS, explaining how it enhances the visual presentation of HTML or XML documents. You'll learn how CSS employs selectors and declarations to apply styles to specific elements, as well as different types of CSS selectors for tailored styling. The article delves into common CSS properties, including text, background, box model, layout, and visual effects properties. It also touches on various CSS color methods and units, offering insights into when to use absolute and relative units for flexible and accessible designs.

CSS Made Easy: A Step-by-Step Guide for Beginners

Table of contents