4. CSS

Question 1

What does CSS do?

Answer 1

Allows applying the same format to various elements in a web page.

Question 2

What are 3 types of CSS?

Answer 2

1. External
2. Internal
3. Inline CSS

Question 3

CSS structure?

Answer 3

Selector {property:value; property:value; …property:value}

Question 4

How to make paragraph text black and 10 pixels large?

Answer 4

P {color:black; font-size:10px;}

Question 5

What does a selector do?

Answer 5

A selector allows choosing the specific element of interest that needs styling.

Question 6

Types of selectors? (3)

Answer 6

1. Element selector
2. Id selector
3. Class selector

Question 7

What is an element selector?

Answer 7

Selecting based on element name

ex:

p {
text-align: center;
color: red;
}→css applies to all <p></p> tags

Question 8

What is a Id selector?

Answer 8

para1 {

Selecting based on the id of the element

ex:

text-align: center;
color: red;
}→ css applies to the HTML element with id=“para1” attribute

Question 9

What is a class selector?

Answer 9

Selecting based on the class of the element

ex:

.center {
text-align: center;
color: red;
}→ css applies to the HTML elements with class=“center” attribute

Question 10

What are styles used in this course? (7)

Answer 10

1. Font
2. Background
3. Border
4. Margin
5. Padding
6. Height
7. Width

Question 11

What does CSS mean?

Answer 11

Cascading Style Sheets

Question 12

What is id? (2)

Answer 12

1. A unique identifier, therefore, each specific id can only be assigned to one element in an HMTL page
2. Used to target a single element

Question 13

What is class used for? (2)

Answer 13

1. Class is used for grouping elements together.
2. Several elements can have the same class name

Question 14

Where are class and id defined?

Answer 14

Inside a tag (e.g., <p class=“class1” id=“para2”>…</p>)

Question 15

CSS commment structure

Answer 15

/* This is a single-line comment */

Question 16

HTML comment structure?

Answer 16

<!-- These paragraphs will be red -->

Question 17

3 useful properties to define colours

Answer 17

1. background-color
2. color (text color)
3. border (you can assign more than one value to each property: <h1 style="border:2px solid Tomato;">Hello World</h1>)

Question 18

Basic Styles-Background properties (2)?

Answer 18

1. background-color
2. background-image

ex background-image:
body {background-image: url(“paper.gif”);}

Question 19

Border styles proporties? (10)

Answer 19

1. dotted - Defines a dotted border
2. dashed - Defines a dashed border
3. solid - Defines a solid border
4. double - Defines a double border
5. groove - Defines a 3D grooved border. The effect depends on the border-color value
6. ridge - Defines a 3D ridged border. The effect depends on the border-color value
7. inset - Defines a 3D inset border. The effect depends on the border-color value
8. outset - Defines a 3D outset border. The effect depends on the border-color value
9. none - Defines no border
10. hidden - Defines a hidden border

Question 20

Other border properties

Answer 20

Border-width: 5px; -> other values: medium, thick, etc.

Border-color: red;

Question 21

Define margins in 4 directions

Answer 21

margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;

Question 22

Basic styles height and width

Answer 22

1. auto - This is default. The browser calculates the height and width
2. length - Defines the height/width in px, cm, etc.
3. % - Defines the height/width in percent of the containing block
4. initial - Sets the height/width to its default value
5. inherit - The height/width will be inherited from its parent value

Question 23

Adding external CSS

Answer 23

Each HTML page must include a reference to the external style sheet file inside the <link></link> element, inside the head section.

<link></link>

Question 24

Defining internal CSS

Answer 24

The internal style is defined inside the <style> element, inside the head section.</style>

Question 25

When is inline CSS used?

Answer 25

To apply a unique style for a single element

Question 26

How to use inline CSS?

Answer 26

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

Question 27

What is most common way to create layouts?

Answer 27

Using

elements is the most common way of creating layouts.

Question 28

What does the div element allow for?

Answer 28

elements allow for creating blocks of content (combine parent display: flex with child float: left/right)