Scribd Logo
Upload

Welcome to Scribd!

  • 32 views

    CSS Stylesheets

    Uploaded by

    Arisha
    The document discusses various CSS selectors and how to add CSS styles to HTML elements, including internal, external, and inline CSS. Simple selectors select elements based on name, id, or class, while combinator selectors select elements based on their relationship. CSS properties like color, background, border, margin, and padding are used to style elements.

    Copyright:

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

    CSS Stylesheets

    Uploaded by

    Arisha
    32 views31 pages
    The document discusses various CSS selectors and how to add CSS styles to HTML elements, including internal, external, and inline CSS. Simple selectors select elements based on name, id, or class, while combinator selectors select elements based on their relationship. CSS properties like color, background, border, margin, and padding are used to style elements.

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses various CSS selectors and how to add CSS styles to HTML elements, including internal, external, and inline CSS. Simple selectors select elements based on name, id, or class, while combinator selectors select elements based on their relationship. CSS properties like color, background, border, margin, and padding are used to style elements.

    Copyright:

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

    CSS Stylesheets

    Uploaded by

    Arisha
    The document discusses various CSS selectors and how to add CSS styles to HTML elements, including internal, external, and inline CSS. Simple selectors select elements based on name, id, or class, while combinator selectors select elements based on their relationship. CSS properties like color, background, border, margin, and padding are used to style elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 31

    Year 12

    HTML <div> Tag


    The <div> tag defines a division
    or a section in an HTML
    document.
    The <div> tag is used as a
    container for HTML elements -
    which is then styled with CSS or
    manipulated with JavaScript.
    The <div> tag is easily styled by
    using the class or id attribute.
    Any sort of content can be put
    inside the <div> tag!
    Note: By default, browsers
    always place a line break before
    and after the <div> element.
    CSS Selectors
    We can divide CSS selectors into five categories:
    1. Simple selectors (select elements based on name, id, class)
    2. Combinator selectors (select elements based on a specific
    relationship between them)
    3. Pseudo-class selectors (select elements based on a certain state)
    4. Pseudo-elements selectors (select and style a part of an element)
    5. Attribute selectors (select elements based on an attribute or
    attribute value)
    Simple Selectors (select elements based on
    name, id, class)
    Combinator Selectors
    A combinator is something that explains the relationship between the
    selectors.
    A CSS selector can contain more than one simple selector. Between
    the simple selectors, we can include a combinator.
    • There are four different combinators in CSS:
    • descendant selector (space)
    • child selector (>)
    • adjacent sibling selector (+)
    • general sibling selector (~)
    Descendant selector (space)

    The descendant selector matches all elements that are descendants of


    a specified element.
    Child selector (>)
    The child selector selects all elements that are the children of a
    specified element.
    Adjacent sibling selector (+)
    • The adjacent sibling selector is used to select an element that is
    directly after another specific element.
    • Sibling elements must have the same parent element, and "adjacent"
    means "immediately following".
    General sibling selector (~)
    The general sibling selector selects all elements that are next siblings
    of a specified element.
    CSS Attribute Selectors
    It is possible to style HTML elements that have specific attributes or attribute
    values.
    1. existence
    2. equality
    3. Space
    4. prefix
    5. substring
    6. suffix.

    • CSS [attribute] Selector


    • CSS [attribute="value"] Selector
    • CSS [attribute~="value"] Selector
    • CSS [attribute|="value"] Selector
    • CSS [attribute^="value"] Selector
    • CSS [attribute$="value"] Selector
    • CSS [attribute*="value"] Selector
    Summary
    HOW TO ADD CSS – CSS STYLES
    There are three ways of inserting a style sheet:
    • External CSS
    • Internal CSS
    • Inline CSS
    DOM TREE
    Inline CSS
    • An inline style may be used to apply a unique style for a single
    element.
    • To use inline styles, add the style attribute to the relevant element.
    The style attribute can contain any CSS property.
    For example:
    <p style=”color:white;background-color:black;font-size:14pt;”>Welcome to CSS</p>
    Note:Inline styles get apply only to that specific tag in which they are declared.
    Internal CSS
    • An internal style sheet may be used if one single HTML page has a
    unique style.
    • The internal style is defined inside the <style> element, inside the
    head section.
    For example:
    {
    color:whte;
    background-color:black;
    font-size:24pt;
    }
    External CSS

    https://www.youtube.com/watch?v=b3_n5UPYvMo&t=284s
    STEPS FOR EXTERNAL STYLE SHEET
    1. Create code for mystyle in your text editor i-e notepad or any other.
    2. Save this with extension of .CSS and place it in the same folder
    where your html web page is available.
    3. Use the code given the pervious slide no 19.
    mystyle while only contain:
    body{ the body style of your html page such as background , images , colors,
    etc.}
    elements such as h1, p, table , etc.{ style for heading either color, font size, etc.}
    4. Call the link in the head section of your html as shown in the
    pervious slide no 19.
    Other
    •
    CSS
    CSS Comments
    Elements
    • CSS Colors
    • CSS Background { Image, color, repeat, etc.}
    • CSS Border { width, color, size, etc.}
    • CSS Margins
    • CSS Padding{Right, Left, Bottom, Top}
    • CSS height, Width
    • CSS Text {Colors, Size , etc.}
    • CSS Font , Size
    • CSS Table {Span Row & Col}
    • CSS Lists
    • CSS Link

    Practices these in your code.


    CSS Units

    CSS has several different units for expressing a length.


    • Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
    • Length is a number followed by a length unit, such as 10px, 2em, etc.
    Absolute Lengths
    1. The absolute length units are fixed and a length expressed in any of these will appear as
    exactly that size.
    2. Absolute length units are not recommended for use on screen, because screen sizes vary so
    much. However, they can be used if the output medium is known, such as for print layout.
    3. * Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel
    (dot) of the display. For printers and high resolution screens 1px implies multiple device
    pixels.
    Absolute Length
    Relative Length
    Relative length units specify a length relative to another length
    property. Relative length units scale better between different rendering
    medium.
    Relative Length
    Note: For more CSS units review
    slide no 24 & 26.
    Class Practice Task
    Make a timetable with different colors of cells.
    HOME TASK
    Understand the purpose of CSS:
    a. control page layout.
    b. consistent page design.
    https://www.w3schools.com/css/css_website_layout.asp

    Search for absolute value and relative length units.

    Complete your work and place in OneNote in homework section.

    For assistance visit


    https://www.w3schools.com/css/default.asp
    https://www.w3schools.com/html/default.asp

    You might also like