Scribd Logo
Upload

Welcome to Scribd!

  • Id and Classes in CSS

    Uploaded by

    Ankit Kumar
    19 views20 pages
    CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. CSS separates document content from document presentation/style. This separation allows content to be presented in different styles for different devices/users without changing the HTML. CSS uses selectors to apply styles to HTML elements by ID, class, tag type or other attributes. IDs are unique identifiers for a single element, while classes can be used for multiple elements.

    Original Description:

    Original Title

    ID AND CLASSES IN CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. CSS separates document content from document presentation/style. This separation allows content to be presented in different styles for different devices/users without changing the HTML. CSS uses selectors to apply styles to HTML elements by ID, class, tag type or other attributes. IDs are unique identifiers for a single element, while classes can be used for multiple elements.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    19 views20 pages

    Id and Classes in CSS

    Uploaded by

    Ankit Kumar
    CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. CSS separates document content from document presentation/style. This separation allows content to be presented in different styles for different devices/users without changing the HTML. CSS uses selectors to apply styles to HTML elements by ID, class, tag type or other attributes. IDs are unique identifiers for a single element, while classes can be used for multiple elements.

    Copyright:

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

    CSS(CASCADING STYLE SHEETS)

    WHAT IS CSS?
     Cascading Style Sheet
     Stylesheet Language
     Standards-based set of properties and attributes to define

    styles
     To describe the presentation a document written in a

    ‘markup language’ like HTML or XML


     Markup encoding: <p>My paragraph here.</p>

     Defines the style of how things in <p> tags appear.

     Font, color, size, margins, etc.

     Cascading

     Rules to determine how to

     apply markup that contains

     other markup
    WHY CSS?
     Separate Content from Form
     Content is the text and images, marked up to define regions of
    specific types
     Form defines the “style” for the content

    <font size=“14px”>
    My First Header
    </font>
    <font size=“12px” color=“red” face=“Verdana”>
    My information 1 goes here.
    The old way: </font>
    <font size=“14px”>
    My Second Header
    </font>
    <font size=“12px” color=“red” face=“Verdana”>
    Different information goes here.
    </font>
    WHY CSS? CONTINUED.
     Separate Content from Form
     Content

    <p class=“header”>My First Header</p>


    <p class=“info”>My Information 1 goes here</p>
    <p class=“header”>My Second Header</p>
    <p class=“info”>Different Information goes here</p>
    (Specific markup properties like Class will be discussed later).

     Form or Style
    .header { font-size:14px;}
    .info { font-family: verdana;
    font-color: blue;
    font-size: 12px; }
    WHAT DOES THIS SEPARATION GET US?
     Separate Content from Form
     Specify the style once for every instance of that class.
     Example: Specify the font once for all text on the HTML page that
    you’ve identified as a “header”.

     The stylesheet can be a separate file which all HTML pages


    on your entire site can link to.
     Only have to specify the style once for your ENITRE SITE

     Can change the style for your entire site by editing only
    ONE FILE.
    CSS SKINNING
     “Skinning” - changing the look of a page or your site
     Selecting an appearance by choosing which stylesheet to use.

    <link rel="stylesheet" type="text/css" href=“skin1.css" />

    <p class=“info”>My Information 1 goes here</p>


    +
    skin1.css
    .info { background-color: White;
    font-family: Verdana;
    font-color: Blue; }
    =
    Some information goes here.
    CSS SKINNING 2
     “Skinning” - changing the look of a page or your site
     Selecting an appearance by choosing which stylesheet to use.

    <link rel="stylesheet" type="text/css" href=“skin2.css" />

    <p class=“info”>My Information 1 goes here</p>


    +
    skin1.css
    .info { background-color: Blue;
    font-family: Serif;
    font-color: White; }
    =
    Some information goes here.
    CSS SYNTAX
     3 Elements to a CSS Statement
     Selector
     What HTML sections does it affect?
     Property
     What attribute of that HTML section will be affected?
     Value
     What change will be made to that attribute?
    THREE CSS DEFINITION LOCATIONS
     Inline: the “style” attribute
    <p style=“font-color:red;font-size:10px;”>Content</p>
    Note, the selector for inline CSS is the tag which contains the style attribute.
     Internal: the <style> markup tag
    <html><head><style>
    p { background-color: Red;
    font-family: serif;
    font-color: White; }
    </style></head><body>
    <p>Content</p>
    </body></html>

     External: the .css stylesheet file


    <link rel="stylesheet" type="text/css" href=“mystylesheet.css" />
    CSS SYNTAX: SELECTORS
     There are many kinds of selectors and many ways to reference them:
     Type, Class, ID, Pseudo, etc.

     HTML Type Tag – selected with the tag type


    p { font-size: 10px;
    font-color: White; }

    <p>Content</p>

     The Class Attribute – precede the class with a period


    .myinfo { font-size: 10px;
    font-color: White; }

    <p class=“myinfo”>Content</p>
    <div class=“myinfo”>Other content</div>
    CASCADING INHERITANCE
     Nested elements inherit
    the properties from the
    its parent

     body { font-family: Verdana;


    If you specify a style for the
    font-size: 14px; }
    <body> tag it will affect all
    content in your HTML page. body { font-family: Verdana;
    font-size: 1.1em; }
    .littletext { font-size: 8px; }
     If you want to override
    inherited settings, you <body>
    need to specify a style in This text is larger.
    <p class=“littletext”>This text is
    a more local element smaller.</p>
    ID AND CLASSES IN CSS
     When comparing CSS class vs ID, the difference is
    that CSS class applies a style to multiple elements.
    ID, on the other hand, applies a style to one unique
    element. ID is also special in that you can use a
    special URL to link directly to an element 
    CSS SELECTORS

     When designing a web page you will want certain


    styles to apply to specific elements on the page. For
    instance, you may want to set the text color of all <p>
    tags to green or change the font size of a header.
     Selectors allow you to target specific elements on a
    web page that you can apply styles to. In CSS, there
    are many selectors available, such as universal
    selectors, descendant selectors, child selectors, and
    grouping selectors. If you’re interested in learning
    more about CSS selectors, read our beginner’s guide
    to CSS selector .
    ID SELECTOR

     The id selector allows you to define style rules that


    apply to a single element on the web page. Each web
    page can only have one element with a single ID
    attribute. This means the ID selector can never be
    used to style more than one element.
     ID selectors are defined using a hash sign. They are
    immediately followed by the ID value that you want to
    apply a set of style rules to. Here is an example of the
    ID selector in action
    ID SELECTOR IS UNIQUE
    CLASS SELECTOR IS NOT UNIQUE

     A class selector allows you to define style rules that


    apply to any element with a class attribute equal to a
    certain value.
     As we discussed earlier, the ID selector can only be
    used to style one element. This is because IDs can
    only be used once on a web page. Classes, on the
    other hand, can be used across multiple elements. So,
    if you apply a style using a class selector, any element
    which shares that class will be subject to the styles
    you define.
    CLASS SELECTOR IS NOT UNIQUE
    IDS HAVE A UNIQUE BROWSER FUNCTION

     IDs can only apply styles to one element. Unlike


    classes that can apply styles to multiple elements.
    This is not the only difference between the class and
    ID selectors.
     In the browser, classes have no special function. Their
    main purpose is to allow you to apply styles to a
    range of elements on a web page. IDs, on the other
    hand, can be used by the browser to navigate to a
    certain part of the web page.
     If you assign an element an ID, you can use a special
    URL to link directly to that element. This behavior
    works because IDs are unique on a web page.
    YOU CAN USE BOTH ID AND CSS CLASS
    SELECTORS

     <div class="backgroundOrange"
    id="customDiv"></div>
     This <div> tag will be subject to the styles for the
    class backgroundOrange. In addition, it will also use
    the styles applied to the customDiv ID using an ID
    selector.
    CONCLUSION

     When you’re working with CSS, there are no specific


    reasons forcing you to use an ID over a class.
    However, it is best practice to only use IDs if you want
    a style to apply to one element on the web page, and
    to use classes if you want a style to apply to multiple
    elements.

     In this tutorial, we discussed, with reference to


    examples, the basics of the CSS ID and class selectors,
    and we compared and contrasted the two. Now you’re
    ready to start using the CSS ID and class selectors like
    an expert developer

    You might also like