FAQ: Selectors - Universal

This community-built FAQ covers the “Universal” exercise from the lesson “Selectors”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Full-Stack Engineer
Front-End Engineer
Back-End Engineer

FAQs on the exercise Universal

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in Language Help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

Looking for motivation to keep learning? Join our wider discussions in Community

Learn more about how to use this guide.

Found a bug? Report it online, or post in Bug Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

What are the different types of property that can be used? Here in the lesson we have border and color.

Hello, mine didn’t change to red after I carried out the instruction given both in the previous one and two.
and moreso I’m unable to paste anything I copied, is there any solution to that

1 Like

How does * function in relation to language semantics? Does it act like a pointer or like a container with key-value sets?

In the exercise we were asked to write the code with universal selector at the beginning of the document, is the order of the selectors in the code something to be wary of ?

So does the “*” universal selector trump any specific “type selector”?
For instance: p {
border: 1px solid red;
}

  • {
    border: 5px dotted blue
    }

Will the “p” element selector run?

I have found that when coping code syntax into the ccs editor, the copy text isn’t always recognized.
When I typed the code itself into the ccs editor it typically works.
I know that sounds like a pain, but it was the only way I got some of the lessons to function well.

I am certain that by now this was figured out; however, in the event someone else has the same issue later hopefully this post will help.

2 Likes

Confirmed that manually typing in the code in this particular exercise solved the above issue of the red borders not displaying. Thanks!

I know that “*” in the code below

  • {
    font-family: Verdana;
    }

means all in terms of universal selector is there a reason it needs to be in the beginning of the css code or can it be anywhere in the code?

Hello, What is the main difference between universal selectors and selector? and in what situations are the best to use different types of universal selectors?

Hi Ahrail

From the class, the type selector is used for styling a specific element tag, for example, p element. While Universal selector, just as the name implies, applies styling generally to the HTML element regardless of the elements.

However, a Universal selector is used in specific use cases. For example, a Universal selector could be used to give a border to an aspect of an HTML document.

I hope this explains it better. Thank you

1 Like

Hold ctrl plus C to copy. Hold ctrl plus V to paste. This is something Codecademy should cover but doesn’t. Thank you Hope Smith for the help.

ctrl plus C to copy. ctrl plus V to paste.

Yes, the * universal selector has a lower specificity than a type selector (like p ), so it won’t trump the specific type selector. In your example:

p {
  border: 1px solid red;
}

* {
  border: 5px dotted blue;
}

The p selector will apply to all p elements, and the border specified for p will override the border specified for the universal selector (* ). The * selector targets all elements, but its lower specificity means it won’t override a more specific selector like the type selector (p in this case).

@cizaneli @hani_al-azzawi

For the universal selector (*), its specificity is quite low, meaning it’s less specific than most other types of selectors. Therefore, if you use the universal selector to apply styles to all elements, you might want to place it at the beginning of your stylesheet to provide a baseline style for all elements.

However, the position of the universal selector within the stylesheet is not a strict rule, and there may be cases where you intentionally place it elsewhere based on your design and styling needs. For example, you might use the universal selector later in your stylesheet to reset or normalize styles for specific elements after other styles have been applied.

Here’s an example:

/* Reset or normalize styles for all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Other styles for specific elements */
body {
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
}

p {
  color: #333;
  margin-bottom: 10px;
}

Here are some common types of CSS properties:

  1. Text Properties:
  • color: Sets the color of text.
  • font-family: Specifies the font for text.
  • font-size: Sets the size of the font.
  • font-weight: Defines the boldness of the font.
  • text-align: Aligns the text within an element.
  1. Background Properties:
  • background-color: Sets the background color.
  • background-image: Specifies an image to use as the background.
  • background-repeat: Defines how a background image is repeated.
  • background-position: Sets the starting position of a background image.
  1. Box Model Properties:
  • width: Sets the width of an element.
  • height: Sets the height of an element.
  • margin: Sets the margin space around an element.
  • padding: Sets the padding space around the content of an element.
  • border: Sets the border properties of an element.
  1. Positioning Properties:
  • position: Specifies the positioning method (static, relative, absolute, fixed).
  • top, right, bottom, left: Positions an element relative to its containing element.
  1. Flexbox Properties:
  • display: flex: Enables a flex container.
  • flex-direction: Defines the direction of the flex container.
  • justify-content: Aligns items on the main axis.
  • align-items: Aligns items on the cross axis.
  1. Grid Properties:
  • display: grid: Enables a grid container.
  • grid-template-columns, grid-template-rows: Defines the columns and rows of the grid.
  • grid-gap: Sets the gap between grid items.
  1. Animation and Transition Properties:
  • animation: Combines multiple animation properties into a single declaration.
  • transition: Specifies the transition effect.
  1. Transform Properties:
  • transform: Applies a 2D or 3D transformation to an element.
  1. Visibility Properties:
  • visibility: Sets whether an element is visible or hidden.
  • opacity: Sets the transparency level of an element.’

And many more for you to research on ~~