Beginner CSS: Visual Rules Cheatsheet | Codecademy

Home » What Is A Ruleset In Css » Beginner CSS: Visual Rules Cheatsheet | Codecademy

Maybe your like

Skip to ContentCodecademy Logo
  1. Cheatsheets
  2. Beginner CSS
Visual Rules

Print Cheatsheet

Share

Topics

  • Visual Rules

Related learning

  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Checker DenseBeginner Friendly.6 hours
  • Skill path

    Build a Website with HTML, CSS, and GitHub Pages

    Learn the basics of web development to build your own website.
    • Checker DenseIncludes 9 Courses
    • Checker DenseWith Certificate
    • Checker DenseBeginner Friendly.14 hours

CSS declarations

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.

/* CSS declaration format:property-name: value;*//* CSS declarations */text-align: center;color: purple;width: 100px;Copy to clipboard

Font Size

The font-size CSS property is used to set text sizes. Font size values can be many different units or types such as pixels.

font-size: 30px;Copy to clipboard

Background Color

The background-color CSS property controls the background color of elements.

background-color: blue;Copy to clipboard

!important Rule

The CSS !important rule is used on declarations to override any other declarations for a property and ignore selector specificity. !important rules will ensure that a specific declaration always applies to the matched elements. However, generally it is good to avoid using !important as bad practice.

#column-one{width: 200px !important;}.post-title{color: blue !important;}Copy to clipboard

Opacity

The opacity CSS property can be used to control the transparency of an element. The value of this property ranges from 0 (transparent) to 1 (opaque).

opacity: 0.5;Copy to clipboard

Font Weight

The font-weight CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal.

font-weight: bold;Copy to clipboard

Text Align

The text-align CSS property can be used to set the text alignment of inline contents. This property can be set to these values: left, right, or center.

text-align: right;Copy to clipboard

CSS Rule Sets

A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is h1, points to an HTML element. The declaration(s), which in this example are color: blue and text-align: center style the element with a property and value. The rule set is the main building block of a CSS sheet.

h1{color: blue;text-align: center;}Copy to clipboard

Setting foreground text color in CSS

Using the color property, foreground text color of an element can be set in CSS. The value can be a valid color name supported in CSS like green or blue. Also, 3 digit or 6 digit color code like #22f or #2a2aff can be used to set the color.

p{color: #2a2aff ;}span{color: green ;}Copy to clipboard

Resource URLs

In CSS, the url() function is used to wrap resource URLs. These can be applied to several properties such as the background-image.

background-image:url("../resources/image.png");Copy to clipboard

Background Image

The background-image CSS property sets the background image of an element. An image URL should be provided in the syntax url("moon.jpg") as the value of the property.

background-image:url("nyan-cat.gif");Copy to clipboard

Font Family

The font-family CSS property is used to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. If a font value is not available, browsers will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes.

h2{font-family: Verdana;}#page-title{font-family:"Courier New";}Copy to clipboard

Color Name Keywords

Color name keywords can be used to set color property values for elements in CSS.

h1{color: aqua;}li{color: khaki;}Copy to clipboard

Learn more on Codecademy

  • Free course

    Learn CSS

    In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.
    • Checker DenseBeginner Friendly.6 hours
  • Skill path

    Build a Website with HTML, CSS, and GitHub Pages

    Learn the basics of web development to build your own website.
    • Checker DenseIncludes 9 Courses
    • Checker DenseWith Certificate
    • Checker DenseBeginner Friendly.14 hours

Print Cheatsheet

Share

Tag » What Is A Ruleset In Css