The id attribute part2

By

  • One cool thing about id attributes is that, like classes, you can style them using CSS.
  • However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.
  • Here's an example of how you can take your element with the id attribute, give it the background color of green. In your style element:

#cat-photo-element {
  background-color: green;
}

  • Note that inside your style element, you always reference classes by putting  . in front of their names. You always reference ids by putting a # in front of their names.
  • A real-time example of this is:

<style>
#the-personality-test {
    background-color: green;
    }
    .blue-text {
    color:blue
    }
    .silver-background {
    background-color: silver;
    }

</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox</title>

</head>
<div class="silver-background">
<body>
<h2 id="the-personality-test">The personality test</h2>
<p class="blue-text" id="personality-test"> What kind of people do you love</p>
<label for="Loving"><input id="Loving" value="Loving" type="checkbox" name="Loving-Funny-Serious-Bodybuilder"> Loving</label>
<label for="Funny"><input id="Funny" value="Funny" type="checkbox" name="Loving-Funny-Serious-Bodybuilder"> Funny</label>
<label for="Serious"><input id="Serious" value="Serious" type="checkbox" name="Loving-Funny-Serious-Bodybuilder">Serious</label>
<label for="Bodybuilder"><input id="Bodybuilder" value="Bodybuilder" type="checkbox" name="Loving-Funny-Serious-Bodybuilder">Bodybuilder</label>
</body>
</div>
</html>

  • the output of this code is:











No comments:

Post a Comment