Theory
Theory
Comments

Create your own CSS rule

You definitely made an impression on the boss. Just look at his tail twitch! Already some new requirements have arrived.

I want to make the headings stand out somehow. Maybe you could emphasize them or play with the margins…

It would seem that there is a simple solution to the problem: let’s find a CSS rule for subheadings and add the desired properties to it. But no such rules have been written, so you will have to create them from scratch. This is where selectors are needed, so it would be good to learn more about them.

A selector specifies which tags receive properties from the CSS rule. Tag selectors work the easiest: they select all of the tags with a matching name. For example:

p { color: red; }

In the example, the selector is p, and it selects all tags with the name p (that is, the <p> tags), but it won’t select tags with other names, such as h1.

On our website subheadings are indicated by using the h2 tags, and we need to format everything that uses these tags. The tag selector is perfect for this, because it will select all of them.

Here is our plan: You create a new, empty CSS rule for subheadings:

name_of_desired_tag {

}

Our designer has already chosen the properties and the values, so now you need to add them to your CSS rule.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Instructor Muffin</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header class="site-header"> <h1>Instructor Muffin</h1> <p>Training for beginner kittens</p> <img src="img/muffin.png" width="359" height="159" alt="Muffin photo"> </header> <section class="features"> <h2>Why choose me?</h2> <p class="feature-kitten">I myself was once a kitten. But look at me now.</p> <p class="feature-train">I have got the master fully trained.</p> <p class="feature-cat">I have been a full-time professional cat for more than 5 years now.</p> </section> <section class="skills"> <h2>What will you learn, you may ask?</h2> <ul class="skills-list"> <li class="skills-item">How to snatch food from the master’s plate;</li> <li class="skills-item">How to give furniture a vintage look;</li> <li class="skills-item">How to open the door and not go in;</li> <li class="skills-item">How to wake the master up at night;</li> <li class="skills-item">How to scatter fur around the apartment.</li> </ul> </section> <footer class="site-footer"> <p>© Muffin, 2019</p> <p>I don’t have any contact information, but I can find you myself.</p> </footer> </div> </body> </html>

CSS

body { padding: 0; font-family: "Arial", sans-serif; font-size: 14px; line-height: 18px; color: #000000; background: #ffffff url("img/muffin-background.jpg") no-repeat 50% 0; } h1 { width: 260px; font-family: "Georgia", serif; font-size: 36px; line-height: 36px; } /* Let's add a new empty rule here */ .site-header { margin-bottom: 30px; } .skills-item { margin-bottom: 15px; } .container { width: 480px; margin: 0 auto; } .site-header img { display: block; margin: 0 auto; } .features { margin-bottom: 30px; } .features p { display: inline-block; vertical-align: top; width: 30%; margin: 0 5px; text-align: center; background-repeat: no-repeat; background-position: center top; } .feature-kitten { padding-top: 60px; background-image: url("img/bottle.svg"); } .feature-cat { padding-top: 60px; background-image: url("img/cat.svg"); } .feature-train { padding-top: 60px; background-image: url("img/whistle.svg"); } .skills-list { padding: 0; list-style: none; } .site-footer { display: flex; justify-content: space-between; color: #999999; }

Goalscompleted

Add a new empty CSS rule for all of the h2 subheadings.
Then add the property border-bottom with the value 1px solid #cccccc; to it.
And also add the property padding-bottom with the value 12px;.

Create your own CSS rule

Comments

Log in

Sign up

Restore access