2. ID Selector (#) The ID selector begins with the hashtag character "#" followed by the name of the ID. The ID selector can select only one element, because IDs must be unique and must not be repeated on a page. This must be your last choice of selectors. Do most of the styling using tag selectors, then use class or pseudo-class selectors for the special things that can't be done using the simplier tag selector, then finally use an ID selector as a last resort. Always ask yourself if you really need an ID. There is usually a simplier selector to use. ID attributes are needed for <form> inputs, but ID selectors are rarely used in CSS. JavaScript developers, however, use them often. The following CSS rule, selects the one element on the page that has an ID of "gallery": #gallery { │|} display: flex; margin: 2em; width: 100%; 3. Class Selector (.) The class selector begins with the period character "." followed by the name of the class. This must be your second choice of selectors. Always do most of the styling using tag selectors, then use class selectors for the special things that can't be done using the simplier tag selector. The class selector can select multiple elements. Use classes style a group of elements that are different that the base styling done using tag selectors. The following CSS rule sets a default style for all paragraphs using a tag selector, then adds a couple special paragraph styles using class selectors. p { } color: #3252017; .error } color: #2386261a; .warning { } color: #3c75000;| 4. Tag Selector This must be your first choice of selector. Always do most of the styling using tag selectors. The tag selector just uses the type of HTML tag to select. Using tag selectors helps you maintain consistency in your styles. For example, all paragraphs in the whole website will be styled the same. The following CSS rule sets default styles for the body, and all links, all headings, all paragraphs, all unordered lists using tag selectors: body { background-color: #f2e8d5%; color: #3252017; margin: 0; |}| a { |│} color: red; h1, h2, h3, h4, h5, h6 { } color: #3e5d8be; p { border-left: 1rem solid; |} padding-left: .6em; ul { list-style: square; margin-left: 0; } Combining Selectors (5-8) You can combine other selectors in a way that uses the selector's relationship to each other and the location of content in the document to select HTML elements. Other special characters can be inserted between the parent and descendant selector to add additional selection criteria to the parent / child relationship between elements: " " Space character' - descendant combinator. Plus sign "+" - adjacent selector Greater than sign ">" - direct child selector Tilde symbol "~" - sibling selector 5. Descendant Selector: Combining with a 11 11 space character The general syntax for the descendant selector is like this: 1. parent selector, 2. followed by a space character "", 3. followed by a descendant selector. The descendant selector selects all descendants of a parent element. For example, all paragraphs inside the header, or all the images in the footer, etc. In the following CSS rule, all unordered lists (descendants) inside the footer (parent) tag are styled. Notice that the parent is listed first, followed by a space character, followed by the descendant to select: footer ul { |}| display: flex; flex-wrap: wrap; font-size: larger; The above CSS rule would style all unordered lists that are inside the footer tag. Even if they are also inside other tags. The following CSS rule would style all anchor tags that are inside list elements: li a { |} text-decoration: none; Notice in the following HTML, that the <main> tag has five children - four paragraphs and one article. Notice that the <article> has three children one heading and two paragraphs: <main> <p>This is the first child.</p>