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: {[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>
Categories:
