CHAPTER 3

CHAPTER 3

1. Selectors: Identifying What to Style

   • Every CSS style has two basic parts:
     • A selector
       • A declaration block.
         • The declaration block carries the formatting properties—text color, font size, and so on.
       • It gives you full control of your page’s appearance
         • It lets you single out one specifc item or a collection of similar items.
           • Styling HTML Tags
             • Type Selectors
               • A type selector affects every instance of the tag on the page.
                 • Class Selectors: Pinpoint Contro
                   • to give one or more elements a look that’s diferent from related tag
                     • Class selectors also let you pinpoint an exact element,
                       • You create class styles exactly like tag styles.
                         • Using class selectors is a two-step process.
                           • Create a class rule
                             • indicate where you want to apply that formatting.
                               • Add a class attribute to the HTML tag you wish to style.
                                 • Example <p class="special"> (css .special)
                                   • Formatting to a specific part of a paragraph.
                                     • <span> tag
                                       • <p>Welcome to <span class="special">Café Soylent Green</span>, the restaurant with something a little different.</p>
                                         • ID Selectors: Specifc Page Elements
                                           • identifying a unique part of a page
                                             • The <div> tag identifies a logical division of the page.
                                               • <span> tag lets you play a style to part of a tag.
                                                 • Styling Groups of Tags (let you apply a style to multiple selectors at the same time).
                                                   • h1, h2, h3, h4, h5, h6 { color: #F1CD33; }
                                                     • The Universal Selector (*)
                                                       • Selecting every single tag
                                                         • Ancestor
                                                           • Descendant
                                                             • A tag inside one or more tags is a descendant.
                                                               • PARENT :.(the frst tag directly connected to and above another tag).
                                                                 • CHILD: (A tag that’s directly enclosed by another tag)
                                                                   • SIBILING: next to each other and connected to the same parent
                                                                     • Attribute Selectors
                                                                       • Provides a way to format a tag based on any HTML
                                                                         • The :target Selector
                                                                           • It let you create some really interesting efects,
                                                           • <html>,<body>(inside h1.h-6,and <strong>)