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:

Fonts

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"
href="https://fonts.googleapis.com/css?family=Tangerine">
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

<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
// Targeting Classes
.red-text {
color: red;
}

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

// Targeting Types
[type='radio']{
margin: 10px 0px 15px 0px
}
</style>
</head>
<body>

<title1>KimConnect.com</title1>

<div class="red-text">
<p>Things:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
</div>

<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>
</form>

<body>

Leave a Reply

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