CSS: Basic Targeting of Tag, Class, and Type

Cascading Style Sheets (CSS)

CSS is often included between the <head><style>CSS-HERE</style></head> sections so that it would load before the <body> section. The purpose of CSS is to control the display of HTML. Below is an example on how CSS targets HTML markups by Tag, Class, and Type names:


Check out Google Fonts at this link: https://fonts.google.com. Once a desired font has been identified, set a link to it in this format: https://fonts.googleapis.com/css?family={[FONTNAME]:[bold|italic]|[FONT2NAME]:[b|i]}

<link rel="stylesheet"
Style Section

Each Document Object Model (DOM) element would have a tag name, class name, type name, etc. In the below example, these CSS lines would target each of the named elements

<link rel="stylesheet"
// Targeting Classes
.red-text {
color: red;

// Targeting Tags
title1 {
font-size: 48px;
font-family: 'Tangerine',serif;
text-shadow: 4px 4px 4px #aaa;

// Targeting Types
margin: 10px 0px 15px 0px


<div class="red-text">
<li>cat nip</li>
<li>laser pointers</li>

<form action="/submit1" id="submit1">
<label><input type="radio" name="radio1" checked>Radio1</label>
<label><input type="radio" name="radio2">Radio2</label><br>
<input type="text" placeholder="field1" required>
<button type="submit">Submit</button>


Leave a Reply

Your email address will not be published. Required fields are marked *