September 07, 2024

Introduction to CSS


What is CSS?


CSS, or Cascading Style Sheets, is a language used to style HTML elements and describe the appearance and layout of web pages. While HTML structures the content, CSS is responsible for how the content looks—colors, fonts, spacing, layout, and much more. You can think of CSS as the "design" part of web development.


By separating content from presentation, CSS allows you to:


  • Write cleaner code: HTML handles structure, while CSS manages design in separate files.


  • Improve efficiency: Changes to styles are quicker and easier to implement across an entire website.


  • Maintain consistency: Apply the same styles to multiple pages for a uniform look.


Why CSS is Important?


  • Separation of Concerns: CSS separates content (HTML) from design (CSS), making it easier to maintain and develop websites.


  • Consistency: You can apply style rules across multiple pages to ensure consistent design.


  • Responsive Design: CSS allows for the creation of layouts that adapt to various screen sizes, improving user experience on different devices.


  • Reusability: CSS styles can be reused across multiple web pages, making it efficient for large websites.


Basic Structure of CSS


The basic building blocks of CSS are selectors and declarations. Here's the typical format:


selector {
    property: value;
}


  • Selector: The HTML element(s) you want to style (e.g., p, h1, .class, #id).


  • Declaration: The style applied to the selected element, consisting of a property and a value.
  1. Property: Defines the style characteristic (e.g., color, font-size).
  2. Value: Specifies how that property should be styled (e.g., red, 16px).


Example:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image tag</title>
</head>
<style>
    h1 {
        color: blue;
        font-size: 24px;
    }
</style>
<body>
    <h1>Welcome to To for zero</h1>
    <h2>Welcome to To for zero</h2>
</body>
</html>


This will style all <h1> elements to have blue text with a font size of 24 pixels.


Welcome to To for zero

Welcome to To for zero



How to add CSS to HTML?


There are three main ways to apply CSS to HTML:


1. Inline CSS: Styles are applied directly within the HTML element.


<h1 style="color: blue;">This is a heading</h1>


Note: Inline CSS is generally discouraged for larger projects as it mixes content with styling, making it harder to maintain.


2. Internal CSS: Defined within a <style> tag inside the <head> section of an HTML document.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>image tag</title>
</head>
<style>
    h1 {
        color: blue;
    }
</style>


<body>


    <h1>Welcome to To for zero</h1>


</body>


</html>


3. External CSS: Linked to an external .css file, which is the most efficient method for larger websites.


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


In your external CSS file (e.g., styles.css):


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


CSS Selectors


CSS selectors allow you to target specific HTML elements for styling. Here are a few common selectors:


Element Selector: Targets all elements of a specific type (e.g., all <p> tags).


p {
    color: green;
}


Class Selector: Targets elements with a specific class. Classes are reusable and prefixed with a dot (.).


<p class="highlight">This is a paragraph.</p>


.highlight {
    color: red;
}


ID Selector: Targets an element with a unique ID, prefixed with a hash (#). IDs should only be used once per page.


<p id="unique">This is a paragraph.</p>


#unique {
    font-weight: bold;
}


Descendant Selector: Targets elements that are descendants of a specific parent element.


div p {
    color: blue;
}


This will style all <p> elements inside <div> tags.



CSS Properties


Here are some of the most commonly used CSS properties:


1. Text and Font Styling


  • color: Changes the text color.
  • font-family: Specifies the font to be used.
  • font-size: Sets the size of the font.
  • font-weight: Controls the thickness of the text (normal, bold).
  • text-align: Aligns text (left, right, center, justify).


Example:


p {
    color: red;
    font-size: 18px;
    text-align: center;
}


2. Background Styling


  • background-color: Changes the background color.
  • background-image: Sets an image as the background.
  • background-size: Controls the size of the background image (e.g., cover, contain).


Example:


body {
    background-color: lightblue;
    background-image: url('background.jpg');
    background-size: cover;
}

CSS
Selectors
Properties