Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Selectors Intro to Selectors

Posted by john knight
john knight
Courses Plus Student 9,155 Points

what is this?

you type <style> body{ and the value you want}</style>

but what is this *{ and the value }

3 Answers

Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points
Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points

you're talking about two different types of styles, the first one which contain style tag & is written on the index.html and here's an example for it :

<style>
  p {
    font-size: 20px;
    font-weight: bold;
  }
</style>
  • this one called "internal style", always embedded in the <head> section of the HTML document and is defined inside a <style> tag, mustn't be used with larger projects, that's because each inline style used must be downloaded (slow website speed), etc.

the other one you mentioned is this one:

* { 
  margin: 0; 
  padding: 0;
  color: red;
}

-this one is mentioned in this video and called "universal selector", the "universal selector" considered as "external style", because it's written in styles.css file, and then being imported to the index.html file using @import or <link rel="stylesheet" href="css/resume.css"> , the universal selector is a powerful selector that set the default styles for whole elements & tags of html.

for more clarification this is the overriding rules in different types of styles: -inline style > internal style -inline style > external style -external style = internal style (the one written the last will override the previous one, for example

<head>
    <style>
        body {
            background-color: black;
        }
    </style>
    <title>tes test..</title>
    <link rel="stylesheet" href="styles.css">
</head>

and in styles.css:

body{
    background-color:blue;
}

since internal style with black background color came before importing external style from styles.css in which background color set as blue, then the final result will be blue background, and vice versa...

One last hint: the only reason for universal selector to be external style is that it's written in an external css sheet, but there's a big difference between ordinary external style selector and universal selector, this difference is that universal selector can be override by internal style, no matter what's the order of them, the internal style will always win and have bigger strength and apply it's changes, unlike the ordinary external style selector which have the same strength of internal style and the one who' written last it's styles will be applied (writing order's taken into consideration)

john knight
PLUS
john knight
Courses Plus Student 9,155 Points
john knight
john knight
Courses Plus Student 9,155 Points

THANK YOU!

Ahmed Mohamed Fouad
Ahmed Mohamed Fouad
11,735 Points

welcome bro :)