Scribd Logo
Upload

Welcome to Scribd!

  • Wednesday, 24 January 2024 12:47: HTML Lang

    Uploaded by

    Fin Bourke
    3 views4 pages
    More indepth CSS notes

    Original Title

    CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    More indepth CSS notes

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    3 views4 pages

    Wednesday, 24 January 2024 12:47: HTML Lang

    Uploaded by

    Fin Bourke
    More indepth CSS notes

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 4

    CSS

    Wednesday, 24 January 2024 12:47

    Properties in CSS are like attributes


    in HTML

    Type selector
    Class selector
    ID selector
    Attribute selector

    Control the aesthetics of HTML

    Properties cascade down, can be


    inherited

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>home</title>
    </head>
    <body>
    <p style="font-size:
    large; text-align: center;">
    John Harvard
    </p>
    <p style="font-size:
    medium; text-align: center">
    Welcome to my home
    page!
    </p>
    <p style="font-size:
    small; text-align: center">
    Copyright &#169;
    John Harvard 1636
    </p>
    </body>
    </html>

    INSTEAD better design would be ->


    John Harvard 1636
    </p>
    </body>
    </html>

    INSTEAD better design would be ->

    You can use div - which seperates


    the page into different rectangular
    regions

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>home</title>
    </head>
    <body>
    <div style="text-
    align: center;">
    <div style="font-
    size: large;">
    John Harvard
    </div>
    <div style="font-
    size: medium;">
    Welcome to my
    home page!
    </div>
    <div style="font-
    size: small;">
    Copyright &#
    169; John Harvard 1636
    </div>
    </div>
    </body>
    </html>

    Extra div and indentation allows it


    to cascade down and the property
    to be passed down

    NEW TAGS
    - HEADER
    MAIN
    - FOOTER

    WE should SEPARATE CSS AND


    HTML into separate files
    -

    WE should SEPARATE CSS AND


    HTML into separate files

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style>
    body{
    text-align:
    center;
    }
    header {
    font-size:
    large;
    }
    main {
    font-size:
    medium;
    }
    footer {
    font-size:
    small;
    }
    </style>
    <title>home</title>

    Creating classes - collection of key


    value pairs you can invent for
    yourself
    Naming like -

    .centered{
    text-align:
    center;
    }
    .large {
    font-size:
    large;
    }
    .medium {
    font-size:
    medium;
    }
    .small {
    font-size:
    small;
    }
    font-size:
    small;
    }

    Can then be called for with the class


    tag

    <body class="centered">

    This is a Class
    selector .class

    <link> allows the above to be linked


    to another tag

    <link href="styles.css"
    rel="stylesheet">
    Will link the styles file to the html
    allowing the classes to be used

    Frameworks -
    Introducing other peoples CSS,
    kinda like using libraries

    Adding a link, bootstrap - popular


    library of css

    Add a class according to the


    documentation, to alter the
    aesthetics of a table for example

    You might also like