Visual Rules

In this lesson, you’ll learn the basic structure and syntax of CSS so that you can start styling web page elements.

CSS Structure

When you want to style an HTML element, it should be declared inside the body of CSS selector. The body is inside the curly braces following the selector name:

p {
  background-color: red;
}

 

The example above selects the <p> element. Inside of the selector’s body, we typed background-color: red. This line is referred to as a CSS declaration. CSS declarations consist of a propertyvalue pairs.

  • Property: the property you’d like to style of that element (i.e., size, color, etc.).
  • Value: the values for that particular property (i.e., 18px for size, blue for color, etc.).

In the example above, the property is background-color and the value is red. The property and value are separated by a colon (:). A semicolon (;) should always be used at the end of a declaration.

Finally, the entire snippet of code in the example above is known as a CSS rule or rule set. A CSS rule consists of the selector (here, p) and all declarations inside of the selector.

Font Family

If you have experience working with word processors like microsoft office, you have probably come across different font types you can use to style your document like Arial, Times New Roman etc.. The same goes with a web page!  You can specify the font which the browser should use to display your text using the font-family property.

h1 {
  font-family: Verdana;
}

 

In the example above, the font family for all main heading elements has been set to Verdana.

When setting font types on a web page, pay attention to the following points:

    1. Like when you use a specific font in a word document, the font specified in a stylesheet must be installed on a user’s computer in order for that font to display when a user visits the web page.

 

  • The default font for all HTML elements is Times New Roman. If no font-family attribute is defined, the page will appear in Times New Roman.

 

  1. It is better to use a limited number of fonts in a web page to keep the page consistent and also make it load faster.
  2. Usually when the name of a font consists of more than one word, it’s a best practice to enclose the font’s name in quotes, like this:
P {
  font-family: “Comic Sans MS”;
}

 

Font Size

Other than setting the font face for a text, you can also change the size of it if need be. This is done using  font-size property. Consider the following example:

p {
  font-size: 18px;
}

 

The font-size of all paragraphs was set to 18px  in this example.  px is short for pixels and is a way to measure font size.

Font Weight

In CSS, the font-weight property controls how bold or thin text appears.

p {
  font-weight: bold;
}

 

In the example above, all paragraphs on the web page would appear bolded.

The font-weight property can take the following values which determine how much the text should be bolded:

  • normal (equals 400)
  • bold (equals 700)
  • bolder
  • lighter
  • numbers 100, 200, 300, …, 900

Text Align

By default texts always appears on the left side of the browsers. The reason is that the default alignment of text in browsers is set to the left.

To align text we can use the text-align property. The text-align property will align text to the element that holds it, otherwise known as its parent.

p {
  text-align: right;
}

 

The text-align property can be set to one of the following three values:

 

  • left — aligns text to the left hand side of its parent element, which in this case is the browser.
  • center — centers text inside of its parent element.
  • right — aligns text to the right hand side of its parent element.

 

Color

Before digging into the subject of colors in CSS, you should know that color can affect the following design aspects:

  • Foreground color
  • Background color

Foreground color is the color that an element appears in. For example, when a heading is styled to appear green, the foreground color of the heading has been styled.

Conversely, when a heading is styled so that its background appears yellow, the background color of the heading has been styled.

In CSS, these two design aspects can be styled with the following two properties:

 

  • color: this property styles an element’s foreground color
  • background-color: this property styles an element’s background color

 

h1 {
  color: red;
  Background-color: yellow;

 

In the example above, the text of the heading will appear in red, and the background of the heading will appear yellow.

Opacity

Opacity is a measure transparency of an element. It’s measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible. To adjust the opacity of an element, the syntax looks like this:

.overlay {
  opacity: 0.5;
}

 

In the example above, the .overlay element would be 50% visible, letting whatever is positioned behind it show through.

Background Image

We talked about how to set a color for background of HTML elements using background-color CSS property. However, this isn’t the only way you can change the background. Sometimes you might want to set an image as your element’s background.This is done through the CSS property background-image. The syntax looks like this:

.banner {
  background-image: url(“https://www.pics.com/image.jpg”);
}

 

  1. The background-image property will set the element’s background to display an image.
  2. The value provided to background-image is a url. The url should be a url to an image. The url can be both relative or it can be a link to an external site. In the example above, the url is to an external source. The following example is using relative addressing to provide the image url:
.banner {
  background-image: url(“images/puppy.jpg”);
}

Review

Fantastic! You used CSS to alter text and images throughout a website. Throughout this lesson, you learned concepts including:

  • CSS declarations are structured into property and value pairs.
  • The font-family property defines the typeface of an element.
  • font-size controls the size of text displayed.
  • font-weight defines how thin or thick text is displayed.
  • The text-align property places text in the left, right, or center of its parent container.
  • Text can have two different color attributes: color and background-color. color defines the color of the text, while background-color defines the color behind the text.
  • CSS can make an element transparent with the opacity property.

CSS can also set the background of an element to an image with the background-image property.