Visual rules

Question 1

What’s the purpose of CSS?

Answer 1

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

Question 2

How would you change the font of texts?

Answer 2

To change the typeface of text on your web page, you can use the font-family property.
e.g.
p { font-family: ‘Garamond’;}

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. ‘ ‘

Question 3

How would you change the size of texts?

Answer 3

You can use font-size e.g. p { font-size: 12px;}

Question 4

In CSS what does the property font-weight control?

Answer 4

Font-weight controls how bold or how thin texts appear on the webpage.
e.g. font-weight: bold;

Question 5

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.
How would you center your text on the webpage?

Answer 5

Using the text-align property, e.g.
.first-p { text-align: center; }

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.

Question 6

Color can affect the following design aspects:

Foreground color
Background color

Answer 6

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

Question 7

What’s opacity?
e.g. .Porsche { opacity: 0.4; }

Answer 7

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.

Question 8

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.

Answer 8

e.g.
.main-banner {
background-image: url(‘https://www.example.com/image.jpg’);
}
To link to an image inside an existing project, you must provide a relative file path. If there was an image folder in the project, with an image named mountains.jpg;
.main-banner {
background-image: url(‘images/mountains.jpg’);
}

Question 9

!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.

Answer 9

e.g.
p {
color: blue !important;
}

.main p {
color: red;
}