Common CSS Terms

In addition to HTML terms, there are some common CSS terms you will want to familiarize yourself with. The more you work with HTML and CSS the more these terms will become second nature.

Selectors

A selector determines exactly which element, or elements, the corresponding styles will be applied. Selectors can include a combination of different IDs, classes, types, and other attributes – all depending on how specific you wish to be. Selectors can be identified as everything that comes before the first curly brace, {.

p { ... }

Properties

A property determines the style that will be applied to an element. Properties can be identified as the text coming immediately before a colon. There are an abundance number of properties you can use, and new ones are continually being added.

p {
   color: ...;
   font-size: ...;
}

Values

A value determines the behavior of a property. Values can be identified as the text in-between the colon and semicolon.

p {
   color: #ff0;
   font-size: 16px;
}

Selectors

Selectors, as mentioned earlier, are the determining factor as to which elements are to be stylized. In so, it is important to fully understand how to use selectors and how they can be leveraged. Some of the most common selectors include elements, IDs, and classes, or some combination of the three.

Type Selectors

Type selectors are the most basic selector. Simply enough, elements without any necessary attributes are targeted to apply styles. Type selectors are preferred whenever possible as they require less code and are easy to manage.

HTML
<p> ... </p>
CSS
p { ... }

Class Selectors

Class selectors allow you to apply the same style to an array of elements by giving them all the same class attribute. Classes are denoted in CSS by identifying the class with a leading period. It is permissible to use the same class attribute on multiple elements on a page.

HTML
<div class="awesome">...</div>
CSS
.awesome { ... }

ID Selectors

ID selectors are similar to class selectors however they are used to target only one unique element at a time. Instead of using the class attribute, IDs naturally use the ID attribute. In place of a period, as with classes, IDs are denoted by identifying the ID with a leading hash sign. IDs are only allowed to be used once per page and should ideally be reserved for significant elements.

HTML
<div id="transpire-solutions">...</div>
CSS
#transpire-solutions { ... }

Referencing CSS

Once content is in place you may begin to style the HTML with CSS. There are a handful of different ways to reference CSS, some of which are better than others.

The best practice for referencing CSS is to include all of your styles within a single external stylesheet, referenced within the heading of a page. Using an external stylesheet allows you to use the same styles across an entire website and quickly make changes site wide.

<!-- External CSS File -->
<link rel="stylesheet" href="file.css">
<!-- Internal CSS -->
<style type="text/css">
h1 {
  color: #5C83A2;
  font-size: 36px;
}
</style>
<h1>Hello World</h1>
<!-- Inline CSS -->
<p style="color: #f60; font-size: 16px;">Lorem ipsum dolor sit amet...</p>
Demo of above code

Hello World

Lorem ipsum dolor sit amet...


comments powered by Disqus