Brainscape's Knowledge GenomeTM

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


See full index

Front End Develop > CSS > Flashcards

CSS Flashcards

1
Q

What does a h1 {color: black; text-align: center;} tell my computer?

A

CSS is telling my computer that wherever there is a HTML <h1></h1> tag to color it black and align its text in the center.

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

What does a p {font-family: “Arial”; font-size: 14px;} tell my computer?

A

For all the HTML paragraphs <p></p>, let’s use the font family Arial, and let’s make the text 14px.

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

The primary way to write CSS is to _____ HTML tags.

A

DESCRIBE

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

The BIG idea with CSS is that you use it to tell your web browser how to _____ all that HTML you’ve been busy writing.

A

DISPLAY

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

CSS selector tells the computer what?

A

The HTML element it is describing.

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

Why are the greater-than and less-than HTML brackets <> missing from CSS?

A

…if they were there, the CSS wouldn’t work!

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

Each CSS property has two parts:

A
  1. NAME

2. VALUE

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

Each CSS property has its own _____.

A

LINE

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

For every HTML element you use, you should create a little bit of _____ to go with it.

A

CSS

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

What does CSS stand for?

A

Cascading Style Sheets

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

Anatomy of a CSS Block?

A 
HTML tag {
   property1: value;
   property2: value;
   property3: value;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What are the 3 BASIC levels of styling my HTML text with CSS?

A
  1. font-family
  2. font-size
  3. color
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Web safe fonts are _____ on your browser and cover a lot of _____ fonts like Times New Roman, Arial & Verdana.

A

PRELOADED

COMMON

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

What are pixels?

A

Measurements based on the height of your text as pixels, or one of the tiny dots that make up the image on your screen.

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

What are EM’s?

A

Relative text size measurement

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

What are the 2 ways to designate color with CSS?

A
  1. Web Safe Color names

2. Hexadecimal values

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

Hexadecimal values begin with what?

A

Hashtag #

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

How would I change the alignment of my text with CSS?

A

With TEXT-ALIGN to left, right, center, or justify

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

How would I italicize text with CSS?

A

Using FONT-STYLE is oblique or italic

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

How would I change my HTML text’s weight?

A

Using FONT-WEIGHT is bold, normal, bolder, lighter, or numbers 100 through 900.

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

CSS’s TEXT-TRANSFORM allows you to make all your HTML text what?

A

capitalized, uppercase or lowercase using properties capitalize, uppercase and lowercase.

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

FONT-VARIANT puts your text into, well, _____-_____ or SMALLER SCREAMING.

A

SMALL-CAPS

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

CSS TEXT-DECORATION lets you do what?

A

add lines over, under and through your text using underline, overline and line-through.

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

LINE-HEIGHT allows HTML text to have more _____ _____.

A

BREATHING ROOM

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

LINE-HEIGHT accepts what values?

A

pixels, em, numbers, and percentages

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

CSS TEXT-INDENT allows one to indents at the _____ of your paragraphs,

A

BEGINNING

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

What values does CSS TEXT-INDENT take?

A

pixels, ems, or percentages

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

WORD-SPACING sets the space between what?

A

WORDS

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

What values do WORD-SPACING AND LINE-SPACING accept?

A

pixels and ems, as well as negative values

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

How do CSS selectors and HTML tags differ?

A

CSS selectors are just like HTML opening tags, but without any brackets <>

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

What is the right way to set the color of my p tags to red?

A

p{
color: red;
}

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

What property do I use to make a line through some text?

A

text-decoration: line-through;

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

CSS is required to make websites.

A

False

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

What are 2 ways to use fancy web safe fonts?

A
  1. embed the fonts using the CSS property @font-face

2. Use a service like Google Web fonts or Typekit.

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

2 steps to add a font to your CSS using the @font-face CSS property?

A
  1. Download your font file

2. Save it in a “font” folder inside the folder where your site files are located.

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

What are the 3 font file type formats one can use?

A
  1. OpenType (.otf)
  2. Embedded OpenType (.eot)
  3. Web Open Font Format (.woff)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Make sure to always put your @font-face CSS properties at the _____ or close to the _____ of your style.css document.

A

TOP

TOP

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

Example of how you might add a Bemio OpenType font (OTF) file to your CSS?

A

@font-face {
font-family: Bemio;
src: url(‘fonts/Bemio.otf’) format(‘opentype’);
}

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

Adding a font variant?

A

@font-face {
font-family: Bemio Italic;
src: url(‘fonts/Bemio-Italic.otf’) format(‘opentype’);
}

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

Adding an Embedded OpenType font file (EOT)?

A

@font-face {
font-family: DIN;
src: url(‘fonts/DINRoundWeb.eot’) format (‘eot’);
}

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

Adding an Web Open Font Format font file (WOFF)?

A

@font-face {
font-family: DIN;
src: url(‘fonts/DINRoundWeb.woff’) format(‘woff’);
}

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

Fancy font will not work without what?

A

Single quotes around the font name.

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

How do I tell the <em> tag that it needs to use the separate font family of Bemio Italic?</em>

A

p.fancyfont em {
font-family:’Bemio Italic’;
}

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

What are the 2 parts of a CSS property?

A
  1. Name

2. Value

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

Computer screens work in what type of color?

A

RGB

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

What does RGB stand for?

A

Red
Green
Blue

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

The variety of colors you see on your screen right now are produced by _____ that appears through your screen.

A

light

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

How are different colors created on a computer screen?

A

Each pixel is turned on and off to create different colors

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

RGB is an _____ color model, meaning it mixes colors by light passing through them.

A

additive

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

Why do we see different colors when there is only three?

A

Because the eye blends the colors together due to pixels being so small.

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

_____ colors are used within the RGB color model to tell your screen what percentage of Red, Green, and Blue to turn on.

A

Hexadecimal

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

The _____ symbol signifies that we are defining a hex color.

A

#

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

00 means _____ and FF means _____

A

dark

light

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

How can one set the color of the entire website?

A

Use BACKGROUND CSS property for the HTML tag.

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

The default value for the

CSS background property is _____.

A

transparent

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

Does the CSS BACKGROUND property support images as well?

A

Yes

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

An example of a CSS BACKGROUND using an image?

A

div {
background:
url(‘img/my-background.jpg’) repeat 10px 20px white;
}

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

What are the 2 ways to write a CSS BACKGROUND image?

A
  1. Relative URL

2. Hard link

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

What is a RELATIVE URL?

A

Reference to where the image is relative to its location in your code files.

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

What is a HARD LINK?

A

A regular web link

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

What does the REPEAT command do for an image?

A

Repeats it covering the body from left to right, top to bottom.

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

What are the 4 options for REPEAT image?

A
  1. no-repeat
  2. repeat
  3. repeat-x
  4. repeat-y
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

On a webpage, the x and y axis begin in the top _____ hand corner of the webpage.

A

left

64
Q

As a default, that x and y axis values default to _____.

A

zero

65
Q

An image starts in the top _____ hand corner.

A

left

66
Q

The width attribute only accepts _____.

A

pixels

67
Q

What are the 5 border styles?

A
  1. solid
  2. dashed
  3. dotted
  4. grooved
  5. ridge
68
Q

Example of BORDER instructions in CSS?

A 
header {
   border: 
4px 
dashed 
#dddddd;
}
69
Q

What’s the CSS property you need to add a fancy font to your CSS?

A

@font-face

70
Q

Do you have to load font files to your local folders to make them work on your website?

A

No, you can use Google Fonts or another hosted web font provider, and then link their fonts.

71
Q

You can add color to your CSS using what kinds of color property values?

A

Web safe color names & hex values

72
Q

To set a border for an HTML block, you need to specify which of the following?

A

Border thickness, border style, & border color

73
Q

Which property do you need to set a color inside a div?

A

CSS BACKGROUND property

74
Q

Is there a way to make the background of your site an image using CSS?

A

Yes, using the background property with an image URL.

75
Q

One of your HTML divs needs a repeating background image. What’s the correct way to write that CSS?

A

background: url(‘img/flower.jpg’) repeat 10px 10px #ffffe0;

76
Q

Setting your height and width using pixels creates a _____ size for your HTML block elements, meaning they stay the same size no matter what sized screen you’re looking at.

A

fixed

77
Q

What is RESPONSIVE WEB DEVELOPMENT?

A

The creation of FLEXIBLE elements that change with different screen sizes.

78
Q

What is the best way in CSS to handle overflow text?

A

leave height blank so it can adjust automatically according to the text width.

79
Q

The space between content and border is known as what?

A

padding

80
Q

What is the space between two bordered paragraphs known as?

A

margin

81
Q

Margin is for _____ the HTML element.

Padding is for the _____ the HTML element.

A

outside

inside

82
Q

The 4 values that margin and padding properties take?

A
  1. Pixels
  2. Ems
  3. Percentages
  4. Auto
83
Q

All HTML elements can be thought of as _____.

A

boxes

84
Q

The term “box model” is used in CSS when talking about HTML _____ and _____.

A

design

layout

85
Q

The CSS BOX MODEL is essentially a box that wraps around HTML _____ .

A

elements

86
Q

The CSS BOX MODEL consists of what 4 things?

A
  1. margins
  2. borders
  3. padding
  4. content
87
Q

Example of CSS Box Model?

A 
div {
width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;
}
88
Q

What order to margin and padding values follow?

A

clockwise from top, right, bottom, left.

89
Q

Example of adding multiple margin and padding values?

A

div {
margin: 0px 20px 0px 10px;
padding: 0px 12px 30px 15px;
}

90
Q

What type of HTML tag are you most likely to set a width and height on?

A

<div></div>

91
Q

These are the parts of an HTML element as described in the CSS Box Model, from the inside out:

A

Content, Padding, Border, Margin

92
Q

I can set different margins and padding on each side of my HTML element.

A

TRUE

93
Q

For margin: 0px 10px 10px 20px;, what side of the HTML element do the pixel values relate to?

A

Top, Right, Bottom, Left

94
Q

What can I use in CSS to give different HTML elements (<p>, </p><h1>, etc) different styles? </h1>

A

Class OR ID

95
Q

A class is a group of HTML elements (<p>, </p><h1>, etc) that are the _____ or _____.</h1>

A

same

similar

96
Q

An ID is a _____ identifier that applies to _____ HTML tag.

A

singular

ONE

97
Q

How many HTML elements in a CSS Class can I have?

A

As many elements in a class as you want

98
Q

How many classes can an HTML elements (<p>, </p><h1>, etc) have?</h1>

A

Multiple

99
Q

Example of a CSS Class with different elements?

A

CSS Class = Car
HTML Element = Mitsubishi
HTML Element = White
HTML Element = 2001

100
Q

You can only have _____ of each CSS ID on a webpage.

A

one

101
Q

Each HTML elements (<p>, </p><h1>, etc) can only have _____ CSS ID. </h1>

A

one

102
Q

Example of a CSS ID for ONE HTML element (<p>, </p><h1>, etc)? </h1>

A

Serial number for your gray 2001 Honda

103
Q

If I want more than one HTML element to have the same or similar format then use what CSS?

A

Class

104
Q

If I want only one HTML element to have a unique format then use what CSS?

A

ID

105
Q

How would you indicate a CLASS in CSS?

A

Place a period in front of the selector name.

106
Q

How would I add the newly designated CSS CLASS to my HTML?

A

Add the CLASS attribute inside the opening HTML element (<p>, </p><h1> tag.

Ex: </h1><p class="big-idea"></p>

107
Q

T/F: You can add that class attribute .big-idea to any paragraph that that calls out one of your big ideas!

A

true

108
Q

How would one indicate a ID in CSS?

A

Place a hashtag in front of the selector name.

109
Q

How would I add the newly designated CSS ID to my HTML?

A

Add the ID attribute inside the opening HTML element (<p>, </p><h1> tag.

Ex: </h1><p></p>

110
Q

Can I use CSS CLASS and ID together?

A

YES!

Ex:

<p></p>

111
Q

3 Features of CSS CLASS?

A
  1. Can have an unlimited number of elements within that class
  2. Each element can have more than ONE class
  3. All elements in a class share the same CSS styles
112
Q

3 Features of CSS ID?

A
  1. There can only be ONE element with a given ID per page
  2. Each element can only have ONE ID
  3. Think of it like a social security number or serial number for that element
113
Q

What are some CSS CLASS and ID naming rules?

A
  1. I can name whatever I want
  2. I cannot start a name with a number
  3. Name according to what it IS not what it LOOKS like
114
Q

I should be able to read a class name or ID and immediately _____ the purpose of that element.

A

understand

115
Q

What happens if I make CSS ID’s work as navigation links?

A

When the navigation link is clicked on it will take me to the part on the page the link is destined for….this is in lieu of taking me to a NEW page.

116
Q

Example of CSS ID as a navigation link?

A 
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
117
Q

2 Steps to make a navigation work with ID’s?

A
  1. In the index.html window, give each section ID a name.

2. In the code, add a hashtag and then the ID to the href.

118
Q

Example of making a navigation working with an ID:

A

if , then <li><a>Home</a></li>.

119
Q

In an article, I’m using a a bunch of famous quotes – one of which is, as far as I’m concerned, the most important quote. What is the right way to use classes and IDs in this instance?

A

All the quotes get a class called “quotes”, while the most important quote gets an ID of “most-important-quote”.

120
Q

What is the right way to add a class name to an HTML element?

A

< p class=”class-name” >

121
Q

What is the right way to add an ID name to your CSS?

A

id-name

122
Q

A layout is simply what?

A

How one would arrange HTML elements on a webpage.

123
Q

One thing that all GOOD layouts have in common is they follow some sort of _____.

A

grid

124
Q

What 3 things do grid’s help with when designing a webpage?

A
  1. Keep ELEMENTS in line
  2. Organize a site’s SECTIONS
  3. Divide a page up according to desired emphasis
125
Q

BEFORE I start coding it is important to take some time to do what?

A

Decide what layout I am going to use.

126
Q

What are 2 ways I can preplan a websites layout?

A
  1. Photoshop

2. Piece of paper

127
Q

Describe a RESPONSIVE LAYOUT.

A

A website’s layout that changes based on the device it is being viewed on.

128
Q

What is a STATIC LAYOUT?

A

A website layout that maintains its size no matter what device one views it on.

129
Q

What are the 5 most common website layouts?

A
  1. One column
  2. Two column
  3. Three column
  4. Gridded
  5. Masonry
130
Q

What does CSS’s FLOAT property tell my HTML elements?

A

To float up next to each other instead of stacking in a block on top of each other.

131
Q

What does a CSS FLOAT property code look like?

A

p {
float: none;
}

132
Q

What are the 4 CSS FLOAT property choices?

A
  1. None (default)
  2. Left
  3. Right
  4. Inherit
133
Q

What does CSS’s INHERIT FLOAT property tell my HTML element to do?

A

Inherit the float property from the element that is wrapped around it, or its parent element

134
Q

if you float things left, they will sidle up alongside one another 1, 2, 3 from _____ to _____.

A

left

right

135
Q

If you float things right, they will stack next to each other 1, 2, 3, from _____ to _____.

A

right

left

136
Q

How do I get 30px between a website’s elements that have a width of 960px, a left-hand column of 630px, and a right-hand column of 300px?

A
  1. Float both elements to the right
  2. Give them their perspective widths
  3. Apply a margin-right: 30px to the left-hand column
137
Q

What is the set of rules that make block elements stack on top of each other and inline elements display inline.

A

Document flow

138
Q

When you float something, you are literally _____ it from the document flow.

A

removing

139
Q

When an element is floated, the other HTML elements no longer realize it’s there and are acting as if it _____

A

disappeared

140
Q

What is DOCUMENT FLOW?

A

Dictates how HTML elements are positioned on a page.

141
Q

How do I get elements to line up next to one another?

A

Break the HTML document flow by floating them

142
Q

What is the BEST way to avoid FLOATING issues?

A

FLOAT as few elements as possible

143
Q

The less HTML elements you _____, the fewer elements are removed from the _____ flow, the easier things will be.

A

FLOAT

DOCUMENT

144
Q

What is the BEST strategy to float elements to avoid issues?

A

FLOAT the biggest element rather than a bunch of little ones.

145
Q

What CSS properties can I use if I run into FLOATING issues?

A
  1. CLEAR property

2. OVERFLOW property

146
Q

What does the following do?

div {
overflow: auto;
}

A

Tells the HTML element what to do if it’s contents don’t fit into its container.

147
Q

Why would a <div> with a bunch of floated elements inside of it have NO height?</div>

A

Because all of its CHILD elements are floated so it thinks it is empty.

148
Q

How can I use CSS to help a HTML element “remember” it has children that are being floated within it?

A

By adding the CSS OVERFLOW property to the HTML element it will help the element “remember” the child elements and its height will expand to the size it needs to be to fit all of the elements inside of it.

149
Q

What does the CLEAR property do for HTML?

A

Tells an element

  1. Whether other floating elements are allowed to float next to it (and if so, on which sides of the element
  2. Whether the element needs to be moved down (or cleared) below any other floating elements.
150
Q

What does “overflow: auto;” allow one to do?

A

Adding this to a parent container causes the container to come back (if missing)

151
Q

If I apply the float:left; property to a div, what will happen?

A

It will float to the left, meaning it will allow other elements to the float alongside it to its right

152
Q

Why can floating elements cause problems?

A

When an element is floated it is removed from the document flow

153
Q

What does overflow:auto; do?

A

It makes the parent element grow to the size it needs to be to contain all of it’s floated child elements

154
Q

What does clear:both; do?

A

It makes sure that the element it is applied to doesn’t float up next to a floated element

155
Q

If I want to add a color to the background of a div, what property do I use?

A

background

156
Q

What’s the difference between a class and an ID?

A

A class applies to style settings for a group of elements, and an ID only applies a single HTML element on a page

157
Q

Margins do not affect how well my divs fit and line up inside a fixed-width container.

A

FALSE

Front End Develop (6 decks)

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