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