Scribd Logo
Upload

Welcome to Scribd!

  • CSSSS

    Uploaded by

    Kim Taehyung
    6 views16 pages
    The document discusses the basics of CSS including what CSS is, CSS syntax, different CSS selectors like element, id, class and universal selectors, common CSS properties, and the three ways to apply CSS styles either inline, internally or externally. It provides examples for each concept discussed.

    Original Description:

    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
    The document discusses the basics of CSS including what CSS is, CSS syntax, different CSS selectors like element, id, class and universal selectors, common CSS properties, and the three ways to apply CSS styles either inline, internally or externally. It provides examples for each concept discussed.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views16 pages

    CSSSS

    Uploaded by

    Kim Taehyung
    The document discusses the basics of CSS including what CSS is, CSS syntax, different CSS selectors like element, id, class and universal selectors, common CSS properties, and the three ways to apply CSS styles either inline, internally or externally. It provides examples for each concept discussed.

    Copyright:

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

    css_essentials.html demo.

    css

    1
    2
    3
    4
    Cascading Style Sheet{
    5
    6
    7
    8
    9
    10 < ITEC-50 >
    11
    12
    13 }
    14

    CSS Essentials
    css_essentials.html demo.css

    1
    2
    3

    What is CSS?
    4
    5
    6
    7 - describes how HTML elements are to be displayed on
    8
    screen, paper, or in other media
    9
    10 - is a simple design language intended to simplify the
    11 process of making web pages presentable
    12
    13
    14

    CSS Essentials
    css_essentials.html demo.css

    CSS Syntax
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    CSS Essentials
    css_essentials.html workshop.css

    1
    2
    CSS Selectors {
    3
    Element selector
    4
    selects HTML elements based on the element name.
    5
    6
    7 Id selector
    8 uses the id attribute of an HTML element to select
    9 a specific element (#)
    10
    NOTE: Id of an element is unique in a page
    11
    12
    13
    14
    }
    CSS Essentials
    css_essentials.html workshop.css

    1
    2
    CSS Selectors {
    3
    Class selector
    4
    selector selects HTML elements with a specific class
    5 attribute (.)
    6
    7 Universal selector
    8 selects all HTML elements on the page (*)
    9
    10
    11
    Grouping selector
    12 selects all the HTML elements with the same style
    13 definitions
    14
    }
    CSS Essentials
    css_essentials.html demo.css

    1
    2 Element selector
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    CSS Essentials
    css_essentials.html demo.css

    1
    2 Id selector
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    CSS Essentials
    css_essentials.html demo.css

    1
    2 Class selector
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    CSS Essentials
    css_essentials.html demo.css

    1
    2 Grouping selector
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    CSS Essentials
    css_essentials.html demo.css

    1
    2 Universal selector
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    CSS Essentials
    css_essentials.html demo.css

    1
    2
    CSS properties
    3
    background margin
    4
    - background-color - margin-top
    5 - background-image - margin-left
    6 - background-position - margin-bottom
    7 border padding
    - p.dotted {border-style: dotted;} - padding-bottom
    8
    - p.dashed {border-style: dashed;} - padding-top
    9 - p.solid {border-style: solid;} float
    10 - p.double {border-style: double;} - float-left
    11 - p.groove {border-style: groove;} - float-right
    - p.ridge {border-style: ridge;} overflow
    12
    - p.inset {border-style: inset;} - hidden
    13 - auto
    14

    CSS Essentials
    css_essentials.html workshop.css

    1
    2
    3 ways to apply CSS {
    3
    Inline
    4
    by using the style attribute inside HTML elements
    5
    6
    7 Internal
    8 by using a <style> element in the <head> section.
    9
    10 External
    11 by using a <link> element to link to an
    12 external CSS file.
    13
    14
    }
    CSS Essentials
    css_essentials.html demo.css

    1
    2 Inline
    3
    4
    5
    <h1 style="color:blue;">A Blue Heading</h1>
    6
    <p style="color:red;">A red paragraph.</p>
    7
    8
    <div style="background-color:yellow;">A red paragraph.</div>
    9
    10
    11
    12
    13
    14

    CSS Essentials
    css_essentials.html demo.css

    1
    2 Internal
    3
    4
    5
    6 <style>
    7 body {
    8
    background-color: powderblue;
    9
    10
    }
    11 </style>
    12
    13
    14

    CSS Essentials
    css_essentials.html demo.css

    1
    2 External
    3
    4 Inside the <head> tag, insert:
    5 <link rel="stylesheet" href="mystyle.css">
    6
    7
    Create a file “mystyle.css”
    8
    9
    10
    11
    12
    13
    14

    CSS Essentials
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

    You might also like