Intermediate CSS Flashcards by Brandon Hill

You can define your own selectors in the form of _______ selectors

class and id

How well did you know this?

Not at all

Perfectly

What is the benefit of classes and ids?

The benefit of this is that you can have the same HTML element, but present it (style it) differently depending on its class or id

How well did you know this?

Not at all

Perfectly

A class selector is a name preceded by a _______

full stop (“.”)

How well did you know this?

Not at all

Perfectly

An ID selector is a name preceded by a ________

hash character (“#”)

How well did you know this?

Not at all

Perfectly

What is the difference between an ID and a class?

An ID can be used to identify one element, a class can be used to identify more than one

How well did you know this?

Not at all

Perfectly

p.jam { property: value; }

Style only paragraph elements that have the class “jam”.

How well did you know this?

Not at all

Perfectly

Two ways you can simplify HTML and CSS

Grouping and Nesting

How well did you know this?

Not at all

Perfectly

What is grouping?

You can give the same properties to a number of selectors without having to repeat them. Separate selectors with commas in one line

How well did you know this?

Not at all

Perfectly

You can specify properties to selectors within other selectors using _______

Nesting

How well did you know this?

Not at all

Perfectly

_________ are bolted on to selectors to specify a state or relation to the selector

Pseudo classes

selector:pseudo_class { property: value; }

How well did you know this?

Not at all

Perfectly

a:link {
color: blue;
}

Target unvisited links with a pseudo class and color them blue

How well did you know this?

Not at all

Perfectly

a:visited {
color: purple;
}

Target visited links with a pseudo class and color them purple

How well did you know this?

Not at all

Perfectly

Commonly used for links, the _________ can be used to apply styles when something happens to something

dynamic pseudo classes

How well did you know this?

Not at all

Perfectly

a:active {
color: red;
}

dynamic pseudo class used to target a link activated by the user, and then color it red

How well did you know this?

Not at all

Perfectly

a:hover {
color: blue;
}

dynamic pseudo class used to target a link hovered over by the user, and then color it blue

How well did you know this?

Not at all

Perfectly

input:focus, textarea:focus {
background: #eee;
}

dynamic pseudo class used to target an input field or textarea that has focus, and then color the background

How well did you know this?

Not at all

Perfectly

Target something only if it is the very first descendant of an element

The first-child pseudo class

How well did you know this?

Not at all

Perfectly

p:first-child {
font-weight: bold;
font-size: 40px;
}

Style the first paragraph

How well did you know this?

Not at all

Perfectly

margin-top: 1px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 20px;

To shorthand

margin: 1px 5px 10px 20px;

How well did you know this?

Not at all

Perfectly

What do these values target?

padding: 1em 10em;

The first value will be the top and bottom

The second value will be the right and left

How well did you know this?

Not at all

Perfectly

This combines which properties?

border: 1px red solid;

border-width
border-color
border-style

This combines which properties?

font: italic bold 12px/2 courier;

font-style
font-weight
font-size
line-height
font-family

True or False?

Background-images can be used in most HTML elements - not just for the body

True

What is Specificity?

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

If the selectors are the same then _________ will always take precedence.

The last one

When calculating specificity -- An ID selector will be given

A value of 100

When calculating specificity -- A class selector will be given

A value of 10

When calculating specificity -- An HTML selector will be given

A value of 1

When calculating specificity what is the total of? body #content .alternative p

HTML selector + id selector + class selector + HTML selector, 1+100+10+1 = 112

The most fundamental types of display are _______ and they can be manipulated with the display property

inline, block and none

Boxes that follow the flow of a line are using which display type?

inline

_______ display type makes a box standalone, fitting the entire width of its containing box, with an effective line break before and after it.

block

_______ will keep a box inline but lend the greater formatting flexibility of block boxes, allowing margin to the right and left of the box

inline-block

Which display type doesn't display a box at all?

display: none;

What is the difference between display: none and visibility: hidden?

display: none completely removes the bo, whereas visibility: hidden keeps the box and its flow in place without visually representing its contents

You can create tables with CSS. True or False?

True. CSS tables can be created using the display property. display: table; display: table-row; display: table-column

What does the display: list-item property do?

Displays a box in the way that you would usually expect an li HTML element to be displayed. To work properly elements displayed this way should be nested in a ul or ol element

_______ makes a box either in-line or block depending on the display of its parent

run-in

What is first-letter?

pseudo element applies to the first letter inside a box

Pseudo element that applies to the top-most displayed line in a box?

first-line

Is p::first-line a pseudo element or class?

Element uses two colons instead of one

The ________ pseudo elements are used in conjunction with the content property to place content either side of a box without touching the HTML.

before and after

You can layout page elements _______ to another page element.

absolute, relative, static or fixed

What property is used to do page layout?

position

What is the default position value?

static - the default value and renders a box in the normal

______ is much like static but the box can be offset from its original position with the properties top, right, bottom and left.

relative

What is the absolute box?

The absolute box can be placed anywhere on the page using top, right, bottom and left

________ behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled.

fixed

What is Floating a box?

Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.

What is floating typically used for?

Floating is normally used to shift around smaller chunks within a page, such as pushing a navigation link to the right of a container, but it can also be used with bigger chunks, such as navigation columns.

What are the two values used with float?

Left or Right

If you do not want the next box to wrap around the floating objects, you can apply the ______ property

clear: left or right or both