Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 74 views

    Module 8: Using Internal CSS Module 8: Using Internal CSS

    Uploaded by

    Just Me
    Internal CSS may be used to style a single page with unique styles. It is defined within <style> tags in the <head> section. A CSS rule-set consists of a selector that points to the HTML element to style and a declaration block containing property-value pairs separated by semicolons. Common selectors include element selectors that select elements by name, id selectors that select unique elements by id, and class selectors that select elements by class. Grouping selectors allows styling multiple elements at once.

    Copyright:

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

    Module 8: Using Internal CSS Module 8: Using Internal CSS

    Uploaded by

    Just Me
    74 views23 pages
    Internal CSS may be used to style a single page with unique styles. It is defined within <style> tags in the <head> section. A CSS rule-set consists of a selector that points to the HTML element to style and a declaration block containing property-value pairs separated by semicolons. Common selectors include element selectors that select elements by name, id selectors that select unique elements by id, and class selectors that select elements by class. Grouping selectors allows styling multiple elements at once.

    Original Title

    Module-8-Using-Internal-CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PPSX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Internal CSS may be used to style a single page with unique styles. It is defined within <style> tags in the <head> section. A CSS rule-set consists of a selector that points to the HTML element to style and a declaration block containing property-value pairs separated by semicolons. Common selectors include element selectors that select elements by name, id selectors that select unique elements by id, and class selectors that select elements by class. Grouping selectors allows styling multiple elements at once.

    Copyright:

    © All Rights Reserved
    Download as PPSX, PDF, TXT or read online from Scribd
    Download as ppsx, pdf, or txt
    74 views23 pages

    Module 8: Using Internal CSS Module 8: Using Internal CSS

    Uploaded by

    Just Me
    Internal CSS may be used to style a single page with unique styles. It is defined within <style> tags in the <head> section. A CSS rule-set consists of a selector that points to the HTML element to style and a declaration block containing property-value pairs separated by semicolons. Common selectors include element selectors that select elements by name, id selectors that select unique elements by id, and class selectors that select elements by class. Grouping selectors allows styling multiple elements at once.

    Copyright:

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

    Module 8: Using Internal

    CSS
    Internal CSS
    • Internal CSS may be used if one single page has a
    unique style.
    • Internal CSS are defined within the <style> and
    </style> tags, inside the <head> section of an
    HTML page.
    Internal CSS
    • A CSS rule-set should be followed when using
    Internal CSS.
    • A CSS rule-set consists of a selector and a
    declaration block.
    Internal CSS

    • The selector points to the HTML element you want to


    style.
    • The declaration block contains one or more
    declarations separated by semicolons.
    • A CSS declaration always ends with a semicolon, and
    declaration blocks are surrounded by curly braces.
    Activity 34
    CSS Selectors
    • CSS Selectors are used to find HTML elements
    based on their element name, id, class and
    attribute.
    Element Selectors
    • The element selector selects elements based on
    the element name.
    Activity 34
    Activity 35

    Element Selector
    • Let’s try to edit Laboratory3.html to fully
    understand how internal CSS and element selector
    works
    Laboratory
    Exercise 14
    Using Internal CSS
    Instructions
    • Open laboratory4.html
    • Save the file as Laboratory14.html
    • Change the title to Laboratory 14
    • Transfer all the inline style to internal CSS using
    element selectors.
    The id selector
    • The id selector uses the id attribute of an HTML
    element to select a specific element.
    • The id of an element should be unique within a
    page, so the id selector is used to select one
    unique element.
    • To select an element with specific id, write a hash
    character (#), followed by the id of the element.
    • An id name cannot start with a number.
    Activity 36
    Activity 37

    The id selector
    • Let’s try to edit Laboratory5.html to fully
    understand how internal CSS and id selector works
    The class selector
    • The class selector selects elements with a specific
    class attribute.
    • To select elements with a specific class, write a
    period (.) character, followed by the name of the
    class.
    • A class name cannot start with a number.
    • HTML elements can also refer to more than one
    class
    Activity 38
    Activity 39

    The class selector


    • Let’s try to edit Laboratory6.html to fully
    understand how internal CSS and class selector
    works
    Grouping selectors
    • Grouping selectors will be ideal if you have
    elements with the same style definitions.
    • Grouping selectors will help minimize the length of
    the code.
    • To group selectors, separate each selector with a
    comma.
    Activity 40
    Activity 40
    Laboratory
    Exercise 15
    Using Internal CSS
    Instructions
    • Open laboratory7.html
    • Save the file as laboratory15.html
    • Change the title to Laboratory 15
    • Transfer all the inline style to internal CSS
    • Create an element selector for the body.
    • Create an id selector “head” for the heading styles.
    • Create a class selector “para” for the paragraph
    styles.

    You might also like