Scribd
Upload
50 views5 pages

Visual Rules

The document discusses various visual rules in CSS including font properties like font-family, font-size, and font-weight to control typography. It also covers text alignment with text-align, color properties, opacity, background images, and the !important flag. Key properties covered include font-family, font-size, font-weight, text-align, color, background-color, opacity, background-image, and !important.

Uploaded by

Jorge García González
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views5 pages

Visual Rules

The document discusses various visual rules in CSS including font properties like font-family, font-size, and font-weight to control typography. It also covers text alignment with text-align, color properties, opacity, background images, and the !important flag. Key properties covered include font-family, font-size, font-weight, text-align, color, background-color, opacity, background-image, and !important.

Uploaded by

Jorge García González
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Visual Rules

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.

Font Family

To change the typeface of text on your web page, you can use the font-family
property.

h1 {
  font-family: Garamond;
}

• The font specified must be installed on the user’s computer or downloaded with
the site.
• Web safe fonts are a group of fonts supported across most browsers and
operating systems.
• Unless you are using web safe fonts, the font you choose may not appear the
same between all browsers and operating systems.
• When the name of a typeface consists of more than one word, it’s a best
practice to enclose the typeface’s name in quotes

h1 {
  font-family: 'Courier New';
}

Font Size

To change the size of text on your web page, you can use the font-size property.

p {
  font-size: 18px;
}

Font Weight

In CSS, the font-weight property controls how bold or thin text appears.
p {
  font-weight: bold;
}

If a certain section of text was required to appear normal, however, we could set the
font weight of that particular element to normal, essentially shutting off bold for that
element.

Text Align

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

h1 {
  text-align: right;
}

• left — aligns text to the left 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 side of its parent element.
• justify— spaces out text in order to align with the right and left side of the
parent element.

Color and Background Color

Foreground color is the color that an element appears in.

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


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

h1 {
  color: red;
  background-color: blue;
}

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 used to make elements fade into others for a nice overlay effect.

.overlay {
  opacity: 0.5;
}

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.

.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}

.main-banner {
  background-image: url('images/mountains.jpg');
}

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 used, it is very hard to override.

p {
  color: blue !important;
}

.main p {
  color: red;
}

One justification for using !important is when working with multiple stylesheets. For
example, if we are using the Bootstrap CSS framework and want to override the styles
for one specific HTML element, we can use the !important property.

Review

• 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.
• The !important flag will override any style, however it should almost never be
used, as it is extremely difficult to override.

You might also like