CSS #2 ~ CSS Properties

CSS Tools

Because CSS is meant for styling contents created by HTML, it contains a variety of tools, also known as properties, for developers to use. We stylize HTML elements by choosing an element of choice and applying CSS properties.

There are many different CSS properties Here are some standard CSS tools that are used most often:

Color: apply color to a content (ex. text, attributes, background, etc).

Font-size: changing the size of a font in a text.

Font-family: choosing a font style in a text.

Selectors

Selectors are basically patterns used to select the elements that you want to style in CSS. Selectors are very useful to quickly change the style of either a single element or a group of elements at once. We use curly-brackets to fill in all the properties we want to apply in a selector.

// Stylizing a heading element with various CSS properties
h1 {
  color: blue;
  font-size: 26px;
  font-family: sans-serif;
  font-style: italic;
}

As mentioned, we can change a group of different selectors all at once using the same rule.

h1, h2, h3, h4, p, li {
  color: blue;
  font-size: 26px;
  font-family: sans-serif;
  font-style: italic;
}

Additionally, we can also choose a specific element within another element. This method is known as a descendant selector.

h1 p {
  color: blue;
  font-size: 26px;
  font-family: sans-serif;
  font-style: italic;
}

Class and ID

Using selectors in CSS is very useful for stylizing contents. However, just using the element themselves can create conflicts as many elements have the same property with each other. By using class and ID, this problem can be solved.

Using either a class or an id, we are able to give names to HTML elements. By naming elements, we can differentiate elements even if they have the same property. This makes applying style with CSS much easier.

A class is written with a dot(.) while an id is written with a hash(#). Developers tend to use class more than id due to its freedom. When using an id, we are not allowed to repeat names which creates a restriction. However, we are able to repeat class names in other elements. As such, it is encouraged to use classes rather than id's.

.class {
  color: blue;
  font-size: 26px;
  font-family: sans-serif;
  font-style: italic;
}

#id {
  color: blue;
  font-size: 26px;
  font-family: sans-serif;
  font-style: italic;
}

Pseudo-Classes

A pseudo-class is used to define a special state of an element. It can be combined with a CSS selector to add an effect to existing elements based on their states. So instead of trying to find the element and add classes to each of them, we can use pseudo-classes directly in CSS to quickly add effects.

For example, when we want to change the color of the text in a list, we can use the first-child, last-child, or the nth-child method (starting with a colon(:)).

li:first-child {
  color: blue;
}

li:last-child {
  color: blue;

li:nth-child {
  color: blue;

Styling Hyperlinks

We can style hyperlinks in our webpage using various pseudo-class properties. The most well-known one would be the hover property where we can create a pointer that appears when we move our cursor to the link. The pointer appears without activating the link itself. Here are some other properties that are used to manipulate the color of the link.

a:link {
  color: #1098ad;
  text-decoration: none;
}

a:visited {
  color: #1098ad;
}

a:hover {
  color: orangered;
  font-weight: bold;
  text-decoration: underline orangered;
}

a:active {
  background-color: black;
  font-style: italic;
}