Unit 1

Assignment 1-2:


**Explain CSS Basic Selectors**

The order of precedence (from lowest to highest) is Elements/Pseudo Elements, Classes/Pseudo-classes/other attributes, ID atributes, and In-line Attributes.

Element Selector is a selector that selects all of the elements with a given name tag in a file document. This kind reminds me of how we can use the Crt (control) + F key to find something inside something online by what we search.

More info on Element Selectors here!

Pseudo Elements is used to design/style a special specific section of an element. I think of as designing a special part of a project for a class assignment where we might go creative detail to show more of its meaning and importance. Examples include: Style the first letter, or line, of an element and insert content before, or after, the content of an element.

Click here to learn more about the elements, as well as the syntax (since I don't want the syntax to mess up the code that's why I didn't type it out here lol) and other examples

Pseudo Selectors is used to clarify and define the specific case/state of an element. The way I think of that is like how an case studies work where when someone creates a case study or just a study in general, they have to define the state of the case of what the topic is about but in a specific way.For example, it can be used to: Style an element when a user mouses over it, style visited and unvisited links differently, and style an element when it gets focus.

More on Pseudo Selectors and classes

Class Selector is used to select elements with a specific class attribute. The way I think of this is kind of like how we sign up for classes at DMACC where we select options that make the website load specific classes for us to see. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character, followed by the name of the class. For classes, independents are usually ".info", whereas dependents are usually "p.info" instead.

More on .class selectors

Group Selector is used to select all the HTML elements with the same style definitions. Its kind how like in some video games how some things like maybe a special power-up can be used in to do things with all other objects that have a similar style that you can use that ability on.

More on Group selectors(found almost 3/4 of the way down on the wbesite)

Descendant Selector matches all elements that are descendants of a specified element. I kind of think of this like how an ancestry tree works and how genetics that we have today as human beings, comes from descendants or ancenstors and we can find them all and match things up using DNA tests like Ancestry.com or 23 & Me.

More on Descendant Selector and others kinds that are also known as CSS Combinators

ID Selector uses the id attribute of an HTML element to select a specific element. I think of it kind of like how we have driver licenses and it identifies who we are specifically as a personn and if the ID is wrong it can cause makes mistakes (if that makes any sense). The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. The independent and dependent ID selectors are kind of written (somewhat) like how independent and dependent class selectors are written in the code.

More on ID selectors

Universal Selector (*) is used to select all HTML elements on the page. This kind reminds me of how we can use the Crt (control) + A key to select everything on the page kind like the universal selector selects all the HTML elements on the page.

More on Universal Selectors(found about halfway down on the website)

back to top