Scribd Logo
Carica

Benvenuto in Scribd!

  • CSS Reviewer

    Caricato da

    aldrinejhonviluan
    8 visualizzazioni3 pagine
    css review

    Titolo originale

    CSS-REVIEWER

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    css review

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    8 visualizzazioni3 pagine

    CSS Reviewer

    Caricato da

    aldrinejhonviluan
    css review

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    CSS (Cascading Style Sheet) name “highlight” and sets their

    background color to yellow.


    Used to describe the look and formatting of a
    3. ID Selector: ID Selectors target a
    document written in markup language.
    specific element with a unique ID
    attribute.
    Generally used with HTML to change the style
    of web pages and user interfaces.
    Example:
    Add new looks to your old HTML documents. #header {font=size: 24px; }
    You can completely change the look of your
    website with only a few changes in CSS code. In the sample, the #header selector
    selects the element with the ID
    CSS Selectors are used to target specific
    “header” and sets its font size to 24px.
    HTML elements for styling.
    4. Attribute Selector: The attribute
    CSS selectors allow you to apply styles to selector targets elements based on
    specific elements or groups of elements, their attribute values.
    giving you control over the appearance of
    your web page. Example:
    [type=” Submit”]
    {background-color: green; }

    .highlight {background-color: yellow; } In the sample, the [type=” submit”]


    selector selects all elements with the
    Selector Property value attribute type “submit” and sets their
    background color to green.
    4 types of CSS Selectors:
    1. Element Selector: the element selector 3 types of CSS
    targets all HTML Elements of a
    specific type. 1. INLINE CSS
    2. EXTERNAL CSS
    Example:
    3. INTERNAL CSS
    p {color : blue;} Inline CSS

    An inline style may be used to apply a


    In the example, the p selector selects unique style to a single element.
    all <p> elements and sets their text
    color to blue. To use inline styles, add the style attribute to
    2. Class Selector: the class selector the relevant element. The style attribute can
    targets elements with specific class contain any CSS property.
    attribute
    Example: Inline styles are defined within the “style”
    attribute of the relevant element.
    .highlight {background-color: yellow; }
    Example of an INLINE CSS:
    In the example, the .highlight selector
    selects all elements with the class
    <h1 style="color:blue;text-
    align:center;">This is a heading</h1>
    <p style="color:red;">This is a EXTERNAL CSS
    paragraph.</p>
    External CSS is applied using a separate file and
    These multiple CSS properties can be linked to an HTML webpage. It is applied to
    separated by a semicolon (;). multiple HTML documents.

    1. color: Sets the color of the text. The external style sheet is generally used when
    Example: <h1 style="color: you want to make changes on multiple pages. It
    blue;">Heading</h1> is ideal for this condition because it facilitates
    you to change the look of the entire website by
    2. font size: Sets the size of the text. changing just one file.
    Example: <p style="font-size: 16px;">This
    is a paragraph.</p> It uses the <link> tag on every page and the
    3. Background color: Sets the background <link> tag should be put inside the head section.
    color of an element.
    Example: <div style="background-color: <head>
    yellow;">Content</div> <link rel="stylesheet" type="text/css" href="my
    4. width: Sets the width of an element. style.css">
    Example: <img src="image.jpg" </head>
    style="width: 200px;"> must be saved with a .css extension. This file
    should not contain HTML elements.
    5. height: Sets the height of an element.
    EXAMPLE OF EXTERNAL CSS
    Example: <div style="height:
    300px;">Content</div>
    6. text-align: Aligns the text within an HTML FILE:
    element.
    Example: <p style="text-align: <!DOCTYPE>
    center;">Centered text</p> <html>
    7. padding: Sets the padding (space) inside
    an element. <head>
    Example: <div style="padding: <link rel="stylesheet" type="text/css" href="my
    10px;">Content</div> style.css">
    8. margin: Sets the margin (space) around </head>
    an element. <body>
    Example: <div style="margin: <div>Hello&#128149;</div>.
    20px;">Content</div>
    9. border: Sets the border properties of an </body>
    element.
    Example: <div style="border: 1px solid CSS FILE:
    black;">Content</div>
    10. font-family: Sets the font family for the body{
    text.
    Example: <p style="font-family: Arial, sans- background-color: #128149;
    serif;">This is a paragraph.</p> }
    div{ padding:5px;
    border: 2px solid gray; text-align: center;
    border-radius: 10%; font-size:100px;
    background:linear-gradient(to }
    right,gray,white,gray,gray,white,gray,white,gray
    ,gray); </style>

    height: 200px <body>

    width: 200; <div>Hello&#128149;</div>.

    padding:5px; </body>
    }

    Internal CSS
    is applied in a group of HTML Elements.

    The internal style sheet is used to add a unique


    style for a group of elements. It is defined in the
    <head> section of the HTML page inside the
    <style> tag.

    Example of an INTERNAL CSS:

    <!DOCTYPE>
    <html>
    <head>
    <style>
    body{
    background-color: #128149;
    }
    div{
    border: 2px solid gray;
    border-radius: 10%;
    background:linear-gradient(to
    right,gray,white,gray,gray,white,gray,white,gray
    ,gray);
    height: 200px
    width: 200;

    Potrebbero piacerti anche