Skip to content

CSS.md

Latest commit

 

History

History
297 lines (198 loc) · 4.98 KB

CSS.md

File metadata and controls

297 lines (198 loc) · 4.98 KB

Alt Text

CSS Tutorial

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation of HTML elements. It enables you to add styles like colors, fonts, layouts, and animations to your web pages.


Table of Contents


Overview

CSS is used to style and format the visual appearance of HTML documents. It enhances the user experience by making web pages more visually appealing and easier to navigate.


CSS Basics

What is CSS?

CSS is a stylesheet language that separates content (HTML) from presentation. It allows you to apply styles like colors, fonts, and layouts to HTML elements.

How to Include CSS

CSS can be added to HTML documents in three ways:

  1. Inline CSS:

    <p style="color: red;">This is a paragraph.</p>

  2. Internal CSS (in <style> tags):

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

  3. External CSS (in a separate file):

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

CSS Syntax

CSS is written using rules consisting of selectors and declarations:

selector {
    property: value;
}

Example:

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

Selectors and Properties

Types of Selectors

  • Element Selector: Targets specific HTML elements.

    p {
    color: green;
}

  • Class Selector: Targets elements with a specific class.

    .example {
    font-style: italic;
}

  • ID Selector: Targets an element with a specific ID.

    #unique {
    text-align: center;
}

Common Properties

  • Color: Sets text color.
  • Background-color: Sets background color.
  • Font-size: Controls text size.
  • Margin: Controls space outside elements.
  • Padding: Controls space inside elements.

Working with Colors

Color Types

  • Named Colors:

    color: red;

  • Hexadecimal Colors:

    color: #ff0000;

  • RGB Colors:

    color: rgb(255, 0, 0);

Background Colors

  • Apply background colors to elements:

    body {
    background-color: #f0f0f0;
}

Text and Font Styling

Text Properties

  • Text Alignment:

    text-align: center;

  • Text Decoration:

    text-decoration: underline;

Font Properties

  • Font Family:

    font-family: Arial, sans-serif;

  • Font Weight:

    font-weight: bold;

Box Model

Understanding the Box Model

The box model consists of:

  1. Content: The actual content of the box.
  2. Padding: Space between the content and the border.
  3. Border: The edge around the padding.
  4. Margin: Space outside the border.

Padding, Margin, and Border

Example:

div {
    margin: 10px;
    padding: 15px;
    border: 2px solid black;
}

CSS Layouts

Flexbox

Flexbox is used for responsive layouts:

display: flex;
justify-content: center;
align-items: center;

Grid

CSS Grid is a powerful layout system:

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;

Resources


Contribution

Your contributions can improve this guide:

  • Fork the repository.

  • Create a new branch:

    git checkout -b improve-mysql-guide

  • Make your updates.

  • Commit your changes:

    git commit -am 'Enhanced MySQL tutorial'

  • Push to the branch:

    git push origin improve-mysql-guide

  • Create a Pull Request targeting the Notes directory.


Date of Latest Revision

  • 12/10/2024

License

  • This guide is provided as-is without warranties. Use it responsibly and ensure you comply with legal and ethical guidelines.

  • This project is licensed under the MIT License. See the LICENSE file for details.