The CSS selectors.

By

 Use the CSS selectors to style the elements:

  • With CSS there are hundreds of properties that you can use to change the way your web page looks like.
  • One such way is to create a Style block at the top of your HTML page:
<style>
</style>
  • Inside this block, you can create a CSS selector for all HTML elements.
<style>
  h2 {
    color: red;
  }
</style>
  • It is important in CSS style block it is important to have the curly braces ( {} ) around each element's style rule.
  • Also, the element's style definition must be within the style block and not outside of it.
  • Also, be sure to add a semicolon at the end of your elements style rule.
  • A real-time example of the CSS selector is:
<style>
    p {
    color:red;
    }
</style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Checkbox</title>
</head>
<body>
<p> 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>
</html>
  • Without the style element the output looked like this:

  • With the style element added the output looks like this:
  • Note the change in the question colour from black to red.

No comments:

Post a Comment