Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

CSS > CSS > Flashcards

CSS Flashcards

1
Q

What are the two parts of a CSS rule?

A
  1. Selector 2. Declaration
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What are the two parts of a CSS declaration?

A
  1. property 2. value
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

How can you split design/CSS into two aspects/files?

A

layout (background, positioning) and appearance (fonts, colors)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What are the HTML tags to include CSS in the markup (not that you’d want to do this)?

A

style=”somestyle” allows you to include css styling on the element. allows you to write CSS in the html

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What are the 8 types of CSS selectors?

A
  1. UNIVERSAL - * {} - selects every element in the markup
  2. TYPE - h1, div, p, etc. {} - selects every instance of the element type. You can select multiple types by separating them with a comma
  3. CLASS - .thisClass {} - selects every element which is a member of the class
  4. ID - #thisID {} - selects the element with the ID.
  5. CHILD - thing > thing2 - selects all the direct children of the thing (which could be a type, class, id, etc.)
  6. DESCENDENT - thing thing2 {} - selects all the thing2’s which descend (whether directly or indirectly) from thing.
  7. NEXT SIBLING - thing + thing2 {} - selects the thing’s next sibling thing2
  8. GENERAL SIBLING - thing ~ thing2 {} - selects all the siblings of thing which are thing2.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

what are the cascading rules for CSS - priority of styling?

A
  1. styles further down in the file get priority over those above.
  2. SPECIFICITY - styles that are more specific get priority over those that are more general
  3. !IMPORTANT - you can override the first two priority rules by putting !important after the style (and within the semicolon)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Explain Inheritance

A

Elements inherit some styles but not others from their parent elements. You can hard code this by setting the property to “inherit”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What three things do you separate on a website

A
  1. Structure 2. Presentation 3. Behavior
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are four ways to specify color?

A
  1. BY NAME - for example “blue”
  2. BY HEX NUMBER - for example #ffffff
  3. BY RGB - for example rgb(33, 33, 33)
  4. BY HSL - for example hsl(300, 100%, 50%)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the default browser background color?

A

transparent, but the user can change that so it’s sometimes useful to set background color for the site

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Define saturation, hue and brightness

A

SATURATION - the amount of grey in a color
HUE - the traditional understanding of color
BRIGHTNESS - the amount of black in a color

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Explain the properties when setting a color using HSL

A

hsl(240, 100%, 50%, .8)
first parameter is the degrees on a color wheel from 0 - 360
second parameter is the amount of saturation from 0 - 100%
third parameter is degree of “lightness” or the amount of BOTH white and black in the color.
fourth parameter (which is optional) is the percentage of opacity described as a decimal

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are two types of text formatting?

A
  1. the kind of formatting which only affects the appearance of the font (i.e. bold, italic, font-family, etc.)
  2. the kind of formatting which positions the text within it’s container (i.e. line-height, kerning, etc.)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are 5 types of fonts?

A
  1. Serif
  2. Sans-Serif
  3. Monospace
  4. Cursive
  5. Fantasy
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are the 5 parts of a font?

A
  1. Ascender - part of the font ascending above the line
  2. Cap height - height of the line
  3. X-height - height of the lowercase X
  4. Baseline
  5. Descender - part of the font descending below the line
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are three aspects of a font?

A
  1. Weight
  2. Style
  3. Stretch
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What does specifying font-size by percentage do?

A

sets font size at a percentage of the browsers default font size (usually 16 pixels)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

define “em”

A

the width of a letter “m”. used to set relative size

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What is the default pixel size for text?

A

usually 16 pixels unless the user has changed it

20
Q

What are four font formats?

A
  1. eot
  2. woff
  3. ttf
  4. svg
21
Q

What are three font styles?

A
  1. italic
  2. normal
  3. oblique
22
Q

Define “Leading”

A

the amount of space above the font between it’s line and the one above it

23
Q

What two parts is line-height made up of?

A

the height of the font and the leading above the font

24
Q

What is the term for the space between lettering?

A

Kerning

25
Q

What is the intent of vertical-align

A

to position text vertically within it’s line-height

26
Q

What are the eight possible values for vertical-align?

A
  1. baseline
  2. superscript
  3. subscript
  4. middle
  5. text-top
  6. text-bottom
  7. top
  8. bottom
27
Q

What are the four properties of a text shadow (also box-shadow)

A

example: text-shadow(2px, 2px, 4px, blue)
1. first property is horizontal (left-right) direction of shadow
2. second property is vertical direction of shadow
3. third property (optional) is how much blur to apply to shadow
4. fourth property is the color of the shadow

28
Q

How would you style the first letter or the first line of a block of text?

A

with the pseudo element :first-letter and :first-line

they are called pseudo because they are not selecting an actual element but only a logical part of an element

29
Q

Define pseudo elements and pseudo classes

A

they are called pseudo because they are not selecting an actual element but only a logical part of an element.
A pseudo class (such as :hover) selects a state (such as when a user hovers over the element containing the class) of the element vs the element as a whole

30
Q

What are the 5 pseudo classes for <a></a>

A
    • :link
    • :hover
    • :active
    • :visited
    • :focus
31
Q

What are 6 attribute selectors?

A
  1. existence - [class]
  2. equivalence - [class = “dog”]
  3. space - [class ~= “dog”]
  4. starts with - [attribute ^ “thing”]
  5. substring - [attribute * “thing”]
  6. ends with - [attribute $ “thing”]
32
Q

What are the 9 border styles?

A
  1. dashed
  2. dotted
  3. solid
  4. double
  5. none
  6. ridge
  7. groove
  8. inset
  9. outset
33
Q

How do you hid an element without leaving a blank space?

A

display: none

34
Q

How do you round corners on a box?

A

border-radius: 5px;

35
Q

What are the list-style-type’s for <ol> and </ol><ul>?</ul>

A
  1. FOR UL: disc, circle, square, none

2. FOR OL: decimal, decimal-leading-zero, upper-alpha, lower-alpha, upper-roman, lower-roman

36
Q

What is a way to set all text in a block to upper case or lower case?

A

text-transform: uppercase
text-transform: lowercase
text-transform also has other options

37
Q

How do you hide the top-left cell of a table?

A

empty-cells: hide;

38
Q

How can two elements in the same z-index overlap?

A

elements lower in document are put on top even if they have the same z-index

39
Q

What is one way to create a multi-column layout

A
  1. create divs or containers
  2. display those containers as inline-block
  3. assign each container a % width of the whole viewport
    You could also do this using flexbox
40
Q

How do you load multiple CSS stylesheets?

A
  1. Include multiple links in header of HTML

2. add @import links in the top of main CSS

41
Q

What is a way to center an image in a container?

A

display the image as block. Then set the image’s left and right margins to “auto” which will try and maximize the left and right space within the container, thus centering the image.
To center the image vertically, you could use margins or padding. You could also use flexbox for both these tasks

42
Q

What is a term for a single image used multiple places in a website?

A

sprite

43
Q

What are the HTML5 semantic tags?

A

main, article, section, nav, footer, header, aside

44
Q

How big can a link be?

A

you can make any portion of your website a link. Even a whole section, div, or paragraph

45
Q

How do you set the height of an element to only be as high as it’s contents?

A

height: auto;

46
Q

What are two options for how to deal with overflowing content in an element of fixed dimensions?

A

overflow: hidden;
overflow: scroll;

CSS (2 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions