This tells an HTML element (p, ul, li, h1, h2, header, sidebar, span etc.) what to look like.
When you want overall changes to every instance of a general HTML element. For example if you want the entire header to be in blue, you could apply the color property with a value of blue to a header HTML tag.
These are just listed as is, and with a comma separating them when targeting multiple element selectors (which then becomes a group selector). For example, a h1 selector looks like this: h1 { color: blue }
Applies a style property and value to a list of HTML elements within a webpage.
When you want to apply the same style to multiple items on the same webpage for cleaner more efficient code.
Group selectors are separated by a comma, although you can list as many items as you want, for simplicities sake if you wanted to style an h1 and h2 element selector looks like this: h1, h2 { color: blue }.
Applies a style property and value to a 2 or more selectors that are decendents to eachother.
When you want to specifically target HTML elements that only appear when they are within another selector. For example targeting every H1 within the header tag.
Descendant Selectors are notated in the stylesheet by a space, with the first selector in the HTML read first and then on down. For example if you wanted to style every H1 within the header tag it would show as follows: header h1 {color: blue;}
Class selectors apply to an html element that is denoted in the HTML as such: class="sub-head". These can be dependent and independent. Independent meaning they apply to every instance of that class. Dependent meaning they apply when a certain condition (or conditions) is (are) met and is also within that class.
Class selectors are best to use if you want to create a cohesive look accross all similar elements of a webpage. For example if you have multiple pages each with a different subheadline you would like them to all look the same, setting each one to the same class is most efficient.
Independent class selectors are notated with a period in CSS. For example a div with a class of "sub-head" will look as follows in CSS: .sub-head { color: blue;}. A dependent class selector is notated with the condition listed first, and the class listed second. For example a dependent class of "sub-head" wanting to target only h2 elements within that class would look as follows: h2.sub-head { color: blue; }.
An ID selector selects a single element on an HTML page that is denoted in HTML with the following in an HTML element: id="new-button". These can be dependent and independent. Independent meaning they apply to every instance of that ID. Dependent meaning they apply when a certain condition (or conditions) is (are) met and is also within that ID.
ID selectors are best used for one specific element on a page. Think of it how we each have individual SSN ID's, similarly an ID selector should only be applied to one element, and is styling that one specific element alone.
ID Selectors use a hashtag character to signal them. For example to change a button color with the ID of "new-button" you can use an independent ID selector of the following: #new-button{ color: blue; }. A dependent ID selector is shown with the condition listed first and then the ID second. So a dependent if you wanted to target every "new-button" within the footer element (or condition) then it would be seen as follows: footer#new-button{ color: blue; }
Universal selectors select everything in the HTML "universe", aka everything on the page.
When you want to state the general look of the website starting at the outside. For example setting the margins to either 0 (*{margin: 0;}) to make elements flow to the edges or setting a margin of 20px (*{margin: 20px;}) to ensure that everything is pushed in a bit from the outside of the webpage.
Universal Selectors use an asterisk character to denote them. For example to change the entire page background to blue you can use a universal selector of the following: * { background-color: blue; }
Pseudo Selectors apply a certain styling when an HTML element is triggered to a certain state.
Pseudo selectors are used when you want something's style to change based on the a user's interaction with it.
Psuedo-selectors are seen with a colon separating the HTML element from the "state" that the element is in. For example if you want a link to change color when a user hover's over it, it would look like this: a:hover{ color: blue; }
Pseudo Elements apply to the either the first line or the first letter of a block of text based on the HTML element that the text is written "in".
Pseudo Elements are used to guide the user into the contet of a paragraph or body of text that otherwise may appear like too much work to read and get skimmed over. A lead-in (or psuedo element) helps prevent this.
Pseudo Elements are seen as a double colon with the HTML element in front of it. So if you wanted to change the color of the first line of text in your paragraph it would look as follows: p::first-line{ color: blue; }