Skip to content

05. Element Selecters

Jump to bottom
martin@mustbebuilt.co.uk edited this page Sep 3, 2024 · 1 revision

Element or HTML selectors use HTML tags to target their content. Any HTML element can be targeted. Commonly used HTML selectors include <body>, <h1>, <p>, <ul> but any can be used.

In index.html add a <style> between the <head> tags. This is a document level stylesheet.

<head>
<meta charset="utf-8">
<title>Your Name :: About Me</title>
<style>
</style>
</head>

It is inside the <style> tag that we’ll now add a number of CSS rules.

A stylesheet will often have a rule that uses the <body> tag.

This will set defaults like font style, font color and background colour.

Add the following CSS rule inside the <style> tag.

body{
    font-family: helvetica, arial, sans-serif;	color:#000099;
    background-color:#FFFFCC;
}

Create HTML selectors to target the document's headings. Have an experiment with some of the 20 CSS properties such as font-weight, background-color and text-align.

h1{
    font-size: 2rem;
    font-weight:100;
    background-color:#cccccc;
    text-align: center;
}
Clone this wiki locally