Element selectors in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an element selector in CSS?

An element selector targets all HTML elements of a specific type to apply styles. For example, p selects all paragraph elements.

beginner

How do you write a CSS rule to change the text color of all h1 elements to blue?

Use the element selector h1 like this:<br>

h1 {<br>  color: blue;<br>}

beginner

True or False: Element selectors apply styles only to elements with a specific class.

False. Element selectors apply styles to all elements of that type, regardless of class or id.

beginner

What will this CSS do?<br>

div { background-color: lightgray; }

It will set the background color of all div elements on the page to light gray.

intermediate

Why should you be careful when using element selectors on large pages?

Because element selectors style every element of that type, they can affect many parts of the page and may cause unexpected changes if not used carefully.

Which CSS selector targets all p elements?

A #p

B .p

C *p

D p

The element selector is just the element name, so p selects all paragraph elements.

What does this CSS rule do?<br>

h2 { font-weight: bold; }

A Makes all elements with class 'h2' bold

B Makes all <code>h2</code> elements bold

C Makes all elements with id 'h2' bold

D Does nothing

The element selector h2 targets all h2 tags and makes their text bold.

If you want to style only one specific element, should you use an element selector?

A No, element selectors target all elements of that type

B Yes, element selectors target single elements

C Yes, but only if the element has a class

D No, element selectors only work with ids

Element selectors apply styles to all elements of that type, not just one.

Which selector would you use to style all button elements?

A button

B #button

C *button

D .button

The element selector is simply the element name, so button selects all button elements.

What is a potential downside of using element selectors on a large website?

A They only style one element

B They are slower than class selectors

C They can unintentionally style many elements and cause layout issues

D They don't work in modern browsers

Element selectors apply styles to every element of that type, which can cause unexpected changes if not used carefully.

Explain what an element selector is and give an example of how to use it in CSS.

Think about how you select all paragraphs or headings in CSS.

Describe a situation where using an element selector might cause problems on a webpage.

Consider what happens if you style all <code>div</code> or <code>p</code> elements without limits.