Scribd Logo
Upload

Welcome to Scribd!

  • 14 views

    CSS - Notes

    Uploaded by

    abdurezak.mohammed-ug

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    CSS - Notes

    Uploaded by

    abdurezak.mohammed-ug
    14 views20 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    14 views20 pages

    CSS - Notes

    Uploaded by

    abdurezak.mohammed-ug

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 20

    CSS

    by : Emmersive Learning

    Join us :
    Telegram : https://t.me/EmmersiveLearning
    Youtube : https://www.youtube.com/@EmmersiveLearning/
    CSS (Cascading Style Sheet
    )

    ● CSS is the language we use to style an HTML document.


    ● CSS describes how HTML elements should be displayed.

    HTML vs CSS
    Here's an outline of what we'll cover:

    1. Introduction to CSS
    2. CSS Syntax
    3. Selectors
    4. Properties and Values
    5. Colours
    6. Box Model
    7. Text Styling
    8. Layout
    9. Responsive Design
    1. Introduction to CSS

    CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed
    on screen, paper, or in other media. CSS saves a lot of work as it can control the layout of
    multiple web pages all at once.
    2. Ways to Include CSS

    There are three main ways to include CSS in your HTML document:

    Inline Styles: Directly within the HTML element using the style attribute.
    HTML
    <h1 style="color: red;">This is inline styling</h1>

    1. Use code with caution.


    ○ Avoid this method for larger projects as it makes your HTML messy and harder
    to maintain.

    Internal Styles: Within the <head> section of your HTML document using the <style> tag.
    HTML
    <head>

    <style>

    body {

    background-color: lightgray;
    }

    </style>

    </head>

    2. Use code with caution.

    External Stylesheet: In a separate .css file linked to your HTML file using the <link> tag.
    HTML
    <link rel="stylesheet" href="styles.css">

    3. Use code with caution.


    ○ Recommended method for larger projects as it keeps your code organized and
    reusable.

    3. CSS Syntax

    CSS is written in rulesets. Each rule set consists of a selector and a declaration block.

    CSS code:
    selector {
    property: value;
    }

    ● Selector: This points to the HTML element you want to style.


    ● Property: This is the aspect of the element you want to change, like color or
    font-size.
    ● Value: This is what you want the property to be set to, like red or 16px.

    4. Selectors

    Selectors are used to target the HTML elements you want to style.
    Element Selector: Targets HTML elements directly.
    css
    Copy code
    p {
    color: blue;
    }

    Class Selector: Targets elements with a specific class attribute.


    css
    Copy code
    .my-class {
    color: green;
    }

    ID Selector: Targets a single element with a specific id attribute.


    css
    Copy code
    #my-id {
    color: red;
    }

    Universal Selector: Targets all elements.


    css
    Copy code
    * {
    color: black;
    }

    Descendant Selector: Targets elements that are inside another element.


    css
    Copy code
    div p {
    color: purple;
    }

    5. Properties and Values

    CSS properties are used to define the styles for elements. Here are a few common properties:
    Color: Sets the color of text.
    css
    Copy code
    color: blue;

    Background-Color: Sets the background color of an element.


    css
    Copy code
    background-color: yellow;

    Font-Size: Sets the size of the font.


    css
    Copy code
    font-size: 20px;

    Margin: Sets the space outside an element.


    css
    Copy code
    margin: 10px;
    ●

    Padding: Sets the space inside an element.


    css
    Copy code
    padding: 10px;

    Properties
    6. Colours

    Colours in CSS can be specified by the following methods:

    ● Name: color: red;


    ● HEX: color: #ff0000;
    ● RGB: color: rgb(255, 0, 0);
    ● RGBA: color: rgba(255, 0, 0, 0. 5);
    ● HSL: color: hsl(0, 100%, 50%);
    ● HSLA: color: hsla(0, 100%, 50%, 0.5);

    7. Box Model

    Every HTML element is a box. The CSS box model describes the rectangular boxes generated
    for elements in the document tree and consists of:
    ● Content: The actual content of the box, where text and images appear.
    ● Padding: Clears an area around the content (inside the border).
    ● Border: A border that goes around the padding (if any) and content.
    ● Margin: Clears an area outside the border.

    css
    Copy code
    div {
    width: 100px;
    height: 100px;
    padding: 10px;
    border: 1px solid black;
    margin: 10px;
    }

    8. Text Styling

    You can style text in various ways:


    Font Family: Sets the font of the text.
    css
    Copy code
    font-family: Arial, sans-serif;

    Font Size: Sets the size of the text.


    css
    Copy code
    font-size: 16px;

    Font Weight: Sets the weight (or boldness) of the text.


    css
    Copy code
    font-weight: bold;

    Text Align: Aligns the text inside an element.


    css
    Copy code
    text-align: center;

    ●
    Text Decoration: Adds decoration to the text.
    css
    Copy code
    text-decoration: underline;

    9. Layout

    CSS provides various ways to control the layout of web pages:


    Display: Sets how an element is displayed.
    css
    Copy code
    display: block;

    ●
    Position: Sets how an element is positioned in the document.
    css
    Copy code
    position: absolute;

    Flexbox: A layout model for arranging elements.


    css
    Copy code
    display: flex;

    Grid: A layout model for arranging elements in a grid.


    css
    Copy code
    display: grid;

    10. Responsive Design

    Responsive design ensures that web pages look good on all devices.

    Media Queries: Apply different styles for different screen sizes.


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

    Would you like to dive deeper into any of these topics or have any specific questions?
    CSS frameworks :

    Resources
    - W3schools : https://www.w3schools.com/css/default.asp
    - MDN : https://developer.mozilla.org/en-US/docs/Web/CSS
    - CSS Tricks :https://css-tricks.com/
    - CSS reference : https://cssreference.io/

    Thank You and Happy Coding!


    Mehammed Teshome

    You might also like