Key Concepts

Review core concepts you need to learn to master this subject

CSS declarations

Font Size

Background Color

Opacity

Font Weight

Text Align

CSS Rule Sets

Setting foreground text color in CSS

See more

CSS declarations

/* 
CSS declaration format:
property-name: value;
*/

/* CSS declarations */
text-align: center;
color: purple;
width: 100px;

In CSS, a declaration is the key-value pair of a CSS property and its value. CSS declarations are used to set style properties and construct rules to apply to individual or groups of elements. The property name and value are separated by a colon, and the entire declaration must be terminated by a semi-colon.

Visual Rules
Lesson 1 of 1
  1. 1
    Introduction To Visual Rules
    The purpose of CSS is to add style to web page, and each element on the page can have many style properties. Some of the basic properties relate to the size, style, and color of the element. In thi…
    Start
  2. 2
    Font Family
    If you’ve ever used word processing software, like Microsoft Word or Google Docs, chances are that you probably also used a feature that allowed you to change the font you were typing in. Font refe…
    Start
  3. 3
    Font Size
    Changing the typeface isn’t the only way to customize the text. Oftentimes, different sections of a web page are highlighted by modifying the font size. To change the size of text on your web pa…
    Start
  4. 4
    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 pro…
    Start
  5. 5
    Text Align
    No matter how much styling is applied to text (typeface, size, weight, etc.), the text always appears on the left side of the container in which it resides. To align text we can use the text-alig…
    Start
  6. 6
    Color and Background Color
    Before discussing the specifics of color, it’s important to make two distinctions about color. Color can affect the following design aspects: - Foreground color - Background color Foreground color…
    Start
  7. 7
    Opacity
    Opacity is the measure of how transparent an element is. It’s measured from 0 to 1, with 1 representing 100%, or fully visible and opaque, and 0 representing 0%, or fully invisible. Opacity can be…
    Start
  8. 8
    Background Image
    CSS has the ability to change the background of an element. One option is to make the background of an element an image. This is done through the CSS property background-image. Its syntax looks lik…
    Start
  9. 9
    Important
    !important can be applied to specific declarations, instead of full rules. It will override any style no matter how specific it is. As a result, it should almost never be used. Once !important is…
    Start
  10. 10
    Review Visual Rules
    Incredible work! You used CSS to alter text and images on a website. Throughout this lesson, you learned concepts including: - The font-family property defines the typeface of an element. - font-s…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo