Theory
Theory
Comments

Selectors

The selector can be found at the beginning of the CSS rule before the curly braces, and it determines which HTML elements are formatted using the properties and values from the rule. Remember the following example:

.feature-kitten {
  padding-top: 60px;                        /* Top margin */
  background-image: url("img/bottle.svg");  /* Background image */
}

The .feature-kitten string is a selector. It tells the browser to apply the property list (margin and background) to all elements whose class attribute is set to the value feature-kitten.

The simplest (and most popular) selectors are the tag and class selectors. The tag selectors contain a tag name with no < and > characters and are applied to all matching tags. The class selectors start with a period, which is followed by the class name, and they are applied to all tags with the matching class attribute. For example:

/* Selects all level 1 headings */
h1 { color: red; }

/* Selects only the elements with the info class */
.info { color: blue; }

If the CSS rules differ only by their selectors, but they share the same properties and values, then they can be grouped together and separated by commas. For example:

h1, .danger { color: red; }

/* Is the very same thing as */

h1 { color: red; }
.danger { color: red; }

And now try using several different types of selectors. Substitute the selector in the CSS rule and see what changes.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <img class="avatar" src="img/raccoon.svg" width="80" height="80" alt="Avatar"> <nav> <h2>Recent Posts</h2> <ul> <li><a href="day-1.html">Day One. How I forgot to feed the cat</a></li> <li><a href="day-2.html">Day Two. I want to become a coder</a></li> <li><a href="day-3.html">Day Three. My cat is offended at me</a></li> <li><a href="day-4.html">Day Four. How I almost got sick</a></li> <li><a href="day-5.html">Day Five. I am relaxing</a></li> <li><a href="day-6.html">Day Six. How I failed to understand anything</a></li> <li><a href="day-7.html">Day Seven. Muffin gave me an assignment</a></li> <li><a href="day-8.html">Day Eight. It’s getting very serious</a></li> <li><a href="day-9.html">Day Nine. Or more precisely night</a></li> <li><a href="day-10.html">Day Ten. Summing up</a></li> <li><a href="day-11.html">Day Eleven. Everything should be taken in moderation</a></li> <li><a href="day-12.html">Day Twelve. Everyone loves cookies</a></li> <li><a href="day-13.html">Day Thirteen. I found an article</a></li> <li><a href="day-14.html">Day Fourteen. A New Format</a></li> <li><a href="day-15.html">Day Fifteen. The Selfie Gallery</a></li> </ul> </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found <a href="https://htmlacademy.org/courses">interactive courses in HTML and CSS</a> and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> Skills section </section> </main> <footer> Website footer </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } /* Replace the name of the selector in the rule below */ selector { border-radius: 10px; } nav { margin-bottom: 30px; background-color: #4470c4; } /* Replace the name of the selector in the rule below */ selector { color: #ffffff; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

Goalscompleted

Replace the selector placeholder with the .avatar placeholder on line 25,
and then replace the selector placeholder with the nav a selector in line 35 (Yes, there is a space there. We will tell you why later).

Selectors

Comments

Log in

Sign up

Restore access