CSS Basics

Question 1

Basic syntax

Answer 1

p {

Question 2

comment syntax

Answer 2

/* comment here */

Question 3

Block style

Answer 3

surrounds portions of code in curly braces

Question 4

Selector

Answer 4

• CSS offers several ways to identify which elements to apply a style to using a selector
• identifies what element to style

Question 5

Property

Answer 5

identifies which component to change

Question 6

Value

Answer 6

specifies the value of the attribute

Question 7

Declaration

Answer 7

indicates a property/value pair

Question 8

Class selector

Answer 8

• selects all elements with the specified class attribute

- use a period before class name

Question 9

ID selector

Answer 9

• selects all elements with specified ID attribute

- use # pound symbol before class name

Question 10

Universal selector

Answer 10

• selects all elements on the page

- use * symbol

Question 11

Selecting multiple elements

Answer 11

• selects multiple elements using different selectors
• use common (,) to delimit multiple selectors

ex: html, body, h1, p {
//apply CSS here
}

Question 12

Parent-child selector

Answer 12

• selects all immediate matching children of an element
• use > symbol between parent and child

ex: div > p {
}

Question 13

Ancestor-descendant selector

Answer 13

-selects all matching descendants of an element (general descendants)
-use a space between two selectors
ex: div p {
}

Question 14

Sibling selector

Answer 14

• to select elements that are siblings (immediate children of the same parent
• use + sign
  ex: h2 + p {}

Question 15

Predecessor/Successor selector

Answer 15

• selects all successors of an element
• its a generic sibling selector
• use the tilde character (~)
  ex: p ~ span {}

Question 16

Combining selectors

Answer 16

• you can combine multiple selectors to apply styles to more specific elements
• use period
  ex: p.red.tall {}

Question 17

Specifying color

Answer 17

Examples:

name(red)
hex-value (#FF0000)
rgb (255,0,0)
rgba (255,0,0,1)
hsl(360,100%,100%)
hsla(360,100%,100%,1)

Question 18

Specifying color (hexadecimal)

Answer 18

• Each set of two characters identifies a value between 0 and 255 for its corresponding color component.
• hex-value (#FF0000)

Question 19

Specifying color (rgb)

Answer 19

• specify color in base 10 as a value between 0 and 255 for each component (red, green,blue)
• p{
  color: rgb() }

Question 20

Specifying color (rgba)

Answer 20

-4th value between 0 and 1 indicate level of transparency

Question 21

Specifying color (hsl)

Answer 21

-specify a color in terms of hue, saturation (%) and lightness (%)

Question 22

Specifying color (hsla)

Answer 22

-alpha value as a -4th value between 0 and 1 indicate level of transparency

Question 23

Background property

Answer 23

• use the background property to change styling for background of elements
• can change color, size, position, image and repeat
• use background prefix
  ex: background-color : #FF00FF;

Question 24

Background shorthand

Answer 24

-applies multiple properties in a single statement
-ex:
div {
background: url(“bg.jpg”) #0000ff top right;
}

Question 25

CSS color and background summary

Answer 25

CSS offers ways to manage the color and background properties of elements.

Color can be defined in multiple ways including a predefined name, hexadecimal, rgb or hsl values.
You can further control many aspects of background including size, image, position, repeat, and color.