Brainscape's Knowledge GenomeTM

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


See full index

Web Development > CSS Foundation > Flashcards

CSS Foundation Flashcards

1
Q

What does CSS stand for?

A

Cascading Style Sheet

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

What is CSS used for?

A

CSS is used to style web pages e.g. the layout, colour etc.

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

True or false:

CSS is used to create page layouts in websites?

A

True.

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

True or false:

There is more than one way to add CSS to a web page.

A

True e.g. you can add CSS via an external stylesheet or in the style element in the head of a web page.

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

What is a CSS ‘style block’?

A

It is an opening and closing CSS tag with CSS code in between, which is located in the head element.

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

What are the opening and closing tags for a CSS style block?

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

No, there is no HTML code, just CSS.

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

In this code, which is the ‘selector’:

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

In this code, which is the value:

A

‘blue’

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

In this code, which is the property:

A

‘color’

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

What would you call this chunk of code:

A

A CSS declaration block, as there are more than one declarations:

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

What does this code do:

A

It selects ALL h2 tags in the page(s), and sets the text color to blue.

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

If you don’t set the font-size in CSS, what does the web browser do?

A

It will use the default/automatic font-size set by the browser.

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

How many CSS declarations do we have in this chunk of code: {color: red; font-size: 24px;}

A

There are two declarations:

color: red;

font-size: 24 px;

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

What are the Web Developer Tools and how can you access them?

A

They are tools to assist web developers which are accessible via hitting F12 in Chrome.

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

How do you inspect the element in Google Chrome?

A

Via one of two ways:

  1. Select a section of the page, right click and select Inspect Element
  2. Select a section of the page and press Ctrl + Shift + i
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What does this tag do?

A

Links the web page to an external CSS style sheet.

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

What would the code look like for a link tag which points to an external CSS style sheet called page.css?

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

What do div tags do?

A

Div tags create sections/divisions in the web page.

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

Why does it sometimes help to leave a comment next to a closing tag?

A

To clearly mark where the tag ends.

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

Why would you indent code?

A

To clearly show which tags are nested/sub tags to make the code easier to read.

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

What do you call the logical meaning of HTML tags? And what does that term mean?

A

The semantic meaning. A semantic element clearly describes its meaning to both the browser and the developer.

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

What is the SEMANTIC meaning of these tags:

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

What are the four ways to set the color value in CSS?

The code appears as the following:

A
  1. RGB
  2. HSL
  3. HEX
  4. Named colours
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

How can you quickly access a colour picker?

A
  1. Select Inspect Element (or CTRL+SHIFT+I)
  2. Select the colour box next to any code with a colour.
  3. Use SHIFT+click to change the colour method.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

When changing code in the web developer tools, WHERE are you changing the code?

A

You are changing the code that is ONLY in the browser’s memory. Your changes will not be saved to the web page.

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

What does a CSS comment look like?

A

/* This is a CSS comment */

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

When code is in HTML or CSS comments, what does the browser do when it reads those comments?

A

Ignore all text in the Comments.

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

What’s a prototype web page?

A

A page built quickly as a mock up.

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

What CSS color type/value gives you the LEAST amount of control?

A

Name colours.

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

What color will the h1 tag be and why?

h1 {

color: red;
color: blue;
color: green;
}

A

Green, because the browser will use the last line of code.

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

What is the CSS property text-transform used for and what values can be defined?

A

Text-transform is used primarily for capitalization.

The following can values be defined:

text-transform: capitalize

text-transform: uppercase

text-transform: lowercase

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

What is the CSS property text-align used for and what values can be defined?

A

To align text to the center, left, right or justify

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

What is the CSS property text-decoration used for and what values can be defined?

A

Text-decoration sets the decoration of the text e.g. overline, line-through, underline

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

What is the CSS property text-indent used for and what values can be defined?

A

It indents the first line by how many pixels you set.

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

What term is used to mean ‘render the web page’?

A

For the browser to display the web page.

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

What is the CSS property font-weight used for and what values can be defined?

A

To change the font weight, make it bolder, lighter, bold or normal

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

What is the difference between these two selectors:

p.italic

p .italic

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

When setting font weight, you have the options ‘bold’ and ‘bolder’ … is there any difference displayed in the browser?

A

There is no visible difference in most browsers.

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

True or false: Not all of the official CSS rules work in the web browsers

A

True

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

What are the 3 basic font types?

A

Sans serif, Serif, Monospace

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

What are Web Safe Fonts?

A

Fonts that you are SURE people have on their computers.

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

When you declare your fonts after the font-family property, what do you need to do for the fonts which have more than one word as part of their name? For example, Times New Roman.

A

Ensure that the font is enclosed with quotes e.g.

{font-family:

“Times New Roman”, Arial, Verdana}

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

What CSS property will set the size of a text?

A

font-size

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

How would you set the font size in a body selector to 14px?

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

Using only ONE declaration block, how would you set both the h1 and h2 tags to have a red text color?

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

Using only ONE declaration block, how would you set the text color to black using the LONG FORM HEX code for both the h1 and h2 tags?

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

What is a pixel?

A

The pixel (a word invented from “picture element”) is the basic unit of programmable color on a computer display or in a computer image.

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

Which option below is true?

a) When you set a font size to pixels, the font size can change depending on the size of the browser window.
b) When you set font size to pixels, the font size is fixed - it does not change.
c) Both are false.

A

b) When you set font size to pixels, the font size is fixed - it does not change.

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

What is VW short for?

A

Viewport Width

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

VW = viewport width. How is this best described?

A

Viewport width is a relative unit of measure - it flexes.

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

If you set your font size to 5vw, what will happen to the font when you EXPAND the browser window?

A

The font size will increase as you expand it.

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

VW (viewport width) is a slice of the WIDTH of your browser window, so what is 4 vw?

a) 4/100th of the width of your screen.
b) 4% of the width of your screen.
c) 4vw is equal to 4 slices out of 100 of your screen’s width
d) All of the above.

A

d) All of the above.

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

When would you use Viewport Width?

A

For creating websites for tablets and mobile phones.

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

What is the viewport?

A

The browser window.

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

When creating websites or web apps for tablets or any mobile device, which unit of measure should you use?

A

Viewport Width (vw)

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

What font size type is an ‘em’?

A

Relative

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

The ‘em’ is a relative font size, but relative to what?

A

The base font size set for the page.

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

What are the typical child tags of ol?

A
60
Q
A

tr tag

61
Q

What will the font family of the p tags be, if I set the body to use a monospace font?

A

Since p is a child of body, it will use the same monospace font.

62
Q

What are one of the benefits of recognising parent / child relationships within CSS?

A

We can make the code cleaner.

63
Q

Can the CSS color property be used with CSS inheritance? For example:

A

Yes, it is inherited.

64
Q

With regards to CSS inheritance, what is the easiest way to set the text color in your entire page?

A

Set it via the body tag.

65
Q

How do you add a CSS comment?

A
66
Q

Please choose the correct way to add the font family value:

a) Comic Sans MS, cursive, sans-serif
b) “Lucida Sans Unicode, “Lucida Grande”, sans-serif
c) Lucida Sans Unicode, “Lucida Grande”, sans-serif
d) “Comic Sans MS”, cursive, sans-serif

A

d) “Comic Sans MS”, cursive, sans-serif

67
Q

What is the default font family type in the Chrome web browser?

A

Serif

68
Q

Why would you want to use Google fonts in your web pages?

A

By using Google fonts, you can select from 700 hundred fonts instead of just the 13 web safe fonts.

69
Q

Which is TRUE below:

a) The web browser loads the page from the bottom up.
b) You cannot use Google Fonts unless the web browser is Chrome.
c) The web browser loads the page from the top down.
d) There are more web safe fonts than Google Fonts.

A

c) The web browser loads the page from the top down.

70
Q

I’ve used a Google Font in the code below, please add it to the p tag selector:

A
71
Q

What is the @font-face CSS rule?

A

With the @font-face rule, web designers no longer have to use one of the “web-safe” fonts. In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.

72
Q

Why should you be using the browser’s developer tools?

A

To save time; because you get instant feedback with the browser’s developer tools.

73
Q

True or false: the changes made to web pages in the browser developer tools are permanent.

A

False.

74
Q

What is the easiest way to select colors for your web pages?

A

Use the browser’s developer tools and use the color pickers there.

75
Q

What are the three ways to add CSS to a page?

A
  1. Inline - by using the style attribute in HTML elements
  2. Internal - by using a style element in the head section
  3. External - by using an external CSS file
76
Q

If you put CSS right on the tag, this is called?

A

Inline CSS

77
Q

If you use ‘inline’ CSS, that is, CSS code directly applied to a tag:

a) It will always take effect.
b) CSS in the style block will override it.
c) CSS in the external stylesheet will win.

A

a) It will always take effect.

78
Q

Is this true: class selectors will override tag selectors?

A

True

79
Q

Which color will the text be and why:

A

Brown, because the last code wins.

80
Q

Add the following image, to the background of the body tag, with CSS:

frog.gif

A
81
Q

Please choose the proper ‘background-repeat:’ value:

a) repeat-x
b) repeat-y
c) Both are good.

A

c) Both are good.

82
Q

Please add the css declaration code, so that a background image is fixed.

A
83
Q

What CSS code will cause a background image to fill the entire space in a tag?

A
84
Q

When using the compact way to add background images with CSS, what is the proper order of the code:

a) background: link, color, repeat, position, attachment
b) background: color, link, position attachment, repeat
c) background: color, link, repeat, attachment, position
d) background: color, link, repeat, position, attachment

A

d) background: color, link, repeat, position, attachment

85
Q

Why would you want to put your CSS code into external style sheets?

A

To make your web pages cleaner by sharing CSS code across many web pages.

86
Q

What is the box model?

a) The box model is another word for the browser window.
b) The box model is a virtual box that wraps around tags.
c) The box model is an actual model box that you build with plastic that helps you visualize tags.

A

b) The box model is a virtual box that wraps around tags.

87
Q

What is the best way to describe a responsive layout?

a) It is a layout type that causes the web page to resize and reflow with the size of the browser window.
b) It is a layout type that has an input box that responds to user input.
c) It is a layout type that has a fixed width and only responds to JavaScript code.

A

a) It is a layout type that causes the web page to resize and reflow with the size of the browser window.

88
Q

In the box model, what is the center of the box?

A

The center of the box is the content.

89
Q

From the INSIDE out, what is the proper order of the box model?

a) content - border - margin - padding
b) content - padding - margin - border
c) content - padding - border - margin
d) padding - margin - border - content

A

c) content - padding - border - margin

90
Q

In the Chrome Developer Tools, what color does it highlight the content portion of the box model?

A

Blue

91
Q

In Chrome, Ctrl + Shift + I does what?

A

Opens the ‘inspect element’ view in the browser development tools window.

92
Q

True or false: Does the box model have anything to do with page layouts?

A

True

93
Q

What does ‘padding’ do?

A

It creates a space between the content and the border, in the tag

94
Q

Which of the following is correct:

  1. Padding is in between the border and the content.
  2. Margins are on the outside of the border, of a tag.
  3. Margins are used to position tags in the page.
  4. All of the above are true!
A
  1. All of the above are true!
95
Q

If you want to shift the text inside a tag, but not the tag itself, you should use:

  1. Padding
  2. Margins
  3. Borders
  4. None of the above
A
  1. Padding
96
Q

Which of the following is NOT a possible border-style value:

  1. Pixel
  2. Dotted
  3. Double
  4. Dashed
  5. Solid
A
  1. Pixel
97
Q

Is this true: the margin is on the outside of the tag’s borders.

A

True

98
Q

What do web browsers automatically give div and p tags?

A

Margins and padding

99
Q

What is the shorthand order of specifying margins?

A

top, right, bottom, left

100
Q

In the following code, how many pixels is the bottom margin? margin: 10px 25px 15px 50px;

A

15px

101
Q

In the following code, how many pixels is the top margin? margin: 12px 100px 12px 50px;

A

12px

102
Q

This is another form of shorthand CSS; what is the right and left margin size? margin: 10px 25px;

A

25px

103
Q

When calculating how much width a tag takes up in the page, what parts of the box model do you have to include?

A

padding, margins, borders and the width of the tag

104
Q

How do you center align tags (from left to right) with CSS?

  1. Use the center tag.
  2. Use the center CSS property
  3. Use the value of ‘auto’ on left and right margins.
  4. Use the value of ‘auto’ on left and right padding.
A
  1. Use the value of ‘auto’ on left and right margins.
105
Q

How would you update the following CSS selector code, so that the id of ‘middle’, is centered on the page:

A
106
Q

Why do web designers set the margins (on div tags) to auto, on the left and the right?

A

To center align div tags horizontally - on the left and the right.

107
Q

What is a selector?

A

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. For example using h1, which is a selector, would select the h1 element.

108
Q

What is the shorthand hexadecimal value for the colour of white?

A

fff

109
Q

What is the shorthand hexadecimal value for the colour of black?

A

000

110
Q

Hexadecimal color codes are based on what basic colors?

A

Red, green and blue.

111
Q

What color is this hexadecimal color: #FF0000

A

Red. The first two characters ‘FF’ represent the red portion of RGB.

112
Q

What color is this hexadecimal color: #0000FF

A

Blue. The last two characters ‘FF’ represent the blue portion of RGB.

113
Q

If you set the height of a tag using %, what do you need to do for it to work?

  1. You have to be sure that the tag is inside another tag, with a height set to %.
  2. You have to be sure that the tag is inside another tag where its height is set to pixels.
  3. You have to be sure that you set the width to % too.
  4. None of the above.
A
  1. You have to be sure that the tag is inside another tag where its height is set to pixels.
114
Q

Which of the following code, properly adds inline CSS to the div tag?

A
115
Q

What is another official name for a pair of tags?

A

An element.

116
Q

How do you get rounded corners on a tag?

A

Use the border-radius property.

117
Q

How do you make a tag transparent?

A

Use the property: opacity

118
Q

Name three reasons why the height property doesn’t work on the span tag.

A
  1. Because by default, the span tag does not support the height property.
  2. Because span is an inline tag.
  3. Because most of the time the height property only works on block level tags.
119
Q

What does ‘refactoring’ mean in coding?

A

It means cleaning up/tidying your code.

120
Q

Why should we be refactoring our code every so often?

A

Refactoring regularly will help to keep the code cleaner, which will make it easier to read for you and other coders.

121
Q

What is a pseudo-class selector? Give an example of it’s use.

A

A pseudo-class selector is a special selector type. It can be a selector based on something happening - like a user rolling over a link.

122
Q

What is the format of a pseudo-class selector?

A
123
Q

Please select the pseudo-class selector in the options below:

A
124
Q

What is the ‘hover state’?

A
125
Q
A
126
Q

How do you activate the pseudo-class’ a:active state?

A

a:active becomes active when you click down on the a tag.

127
Q

What is the proper order of the ‘a’ tag pseudo-classes?

A

a: link
a: visited
a: hover
a: active

128
Q

Check out this code; which color will the li text be and why?

A

It will be red, because the way CSS works, is that the more specific rule always wins.

129
Q

Is this true: More specific CSS selectors/rules, override less specific rules.

A

True.

130
Q

When you set a tag to “display: block”, what does that do to the tag?

A

It changes to a block-level tag and causes the tag to extend all the way across its enclosing tag.

131
Q

What are the options with CSS transitions and what do they do?

A

‘ease in’ and ‘ease out’

They specify a slow transition effect, in and out.

132
Q

What are the four basic list style types?

A

none, disc, square and circle

133
Q

If you want to change your bullet points in your list to another style, what CSS code would you use?

A
134
Q

How would you set the width on a class, ID or element selector?

A
135
Q

If the base font size of a page is 12 pixels, how big is the font size of an h1 tag if we set it to 3em and why?

A

36 px.

This is because the base font size set is multiplied by the number of ems set. In this case, 3 x 12px = 36 px

136
Q

Choose the selector that says:

Select any h1 that also has a class of ‘super-header’:

A
137
Q

What does the list style type of ‘lower-alpha’ appear like?

A

a.

b.

c.

138
Q

Why would we use the css property ‘overflow: hidden’ on ul tags?

A

To hide the list item bullets, but the items would still appear in a list.

139
Q

Why would you want to add the ccs code

‘display: block;’ to an ‘a’ tag selector?

A

By default an ‘a’ tag is an inline element.

Setting it to a ‘block’ level element would allow you to add a width property.

140
Q

When creating a horizontal (left to right) menu with list (li) tags, what CSS property (and value) do you need to add, to have the list position itself left to right?

A

float: left;

141
Q
A

It is fluid.

142
Q

How would you best describe a liquid layout?

A

liquid layouts reflow.

143
Q

How are responsive layouts different from liquid layouts?

A

Responsive layouts are fluid but they also shift elements to fit the page.

144
Q

How do you set the height of a tag?

A

Using the Height CSS property.

145
Q

What overflow option values do you have?

A

hidden, scroll, auto

Web Development (2 decks)

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