Css selectors

Question 1

• universal selector

Answer 1

targets all elements on the page

Question 2

explain targeting elemnts in html from css using class=””

Answer 2

For example, consider the following HTML:

<p>Sole Shoe Company</p>

The paragraph element in the example above has a class attribute within the opening tag of the<p> element. The class attribute is set to ‘brand’. To select this element using CSS, we can create a ruleset with a class selector of .brand.

.brand {

}

Question 3

how to add mutiple classes

Answer 3

For instance, perhaps there’s a heading element that needs to be green and bold. You could write two CSS rulesets like so:

.green {
color: green;
}

.bold {
font-weight: bold;
}

Then, you could include both of these classes on one HTML element like this:

<h1> ... </h1>

Question 4

how to use the Id=””

Answer 4

large-title {

<h1> ... </h1>

In contrast to class which accepts multiple values, and can be used broadly throughout an HTML document, an element’s id can only have a single value, and only be used once per page.

To select an element’s ID with CSS, we prepend the id name with a number sign (#). For instance, if we wanted to select the HTML element in the example above, it would look like this:

}

Question 5

how to use an attribute selector using [ ] brackets

Answer 5

The attribute selector can be used to target HTML elements that already contain attributes. Elements of the same type can be targeted differently by their attribute or attribute value. This alleviates the need to add new code, like the class or id attributes.

[href]{
color: magenta;
}

The most basic syntax is an attribute surrounded by square brackets. In the above example: [href] would target all elements with an href attribute and set the color to magenta.

And it can get more granular from there by adding type and/or attribute values. One way is by using type[attribute*=value]. In short, this code selects an element where the attribute contains any instance of the specified value. Let’s take a look at an example.

<img></img>
<img></img>

Question 6

what is a psudo class

Answer 6

change the state of the element from user intreaction.

you can use

visited disabled active

it can be done by putting a :

a:hover{
color: darkorange;
}

Question 7

what is the difference between classes and ids

Answer 7

classes = styled over many elements

ids= only used once

Question 8

what is chaining

Answer 8

adding two or more selectors at the same time

e.g h1.special{
}

this would select all the h1 elements with the class special