Brainscape's Knowledge GenomeTM

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


See full index

Coding > CSS > Flashcards

CSS Flashcards

1
Q

CSS stands for ____

A

Cascading Style Sheets

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

CSS is used to define styles for your _____

A

web pages, including the design, layout and variations in display for different devices and screen sizes.

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

p {
color: red;
}
Explain code

A

p is a selector in CSS (it points to the HTML element you want to style: <p>).
color is a property, and red is the property value

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

________ selects the HTML element(s) you want to style.

A

A CSS selector

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

The element selector selects HTML elements based on the ________

A

element name.
i.e. p, h1, h2

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

The id selector uses the id attribute of an HTML element to select a _____ element.

A

specific or 1 unique element

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

Syntax of ID selector:

A

#para1
{text-align: center;
color: red; }
p id=”para1”

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

The class selector selects HTML elements with a _______

A

specific class attribute.

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

Syntax of class selector

A

p.center {
text-align: center;
color: red; }
h1 class=”center”

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

________ selects all HTML elements on the page.

A

Universal selector (*)

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

Syntax of Universal selector

A

*
{
text-align: center;
color: blue;
}

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

The grouping selector selects all the HTML elements with the ________

A

same style definitions.
h1, h2, p {
text-align: center;
color: red;
}

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

Which are three Ways to Insert CSS

A

External CSS
Internal CSS
Inline CSS

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

________ sheet, you can change the look of an entire website by changing just one file!

A

External

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

External sheet syntax

A

<head>
link rel="stylesheet" href="mystyle.css"
</head>

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

An internal style sheet may be used if ________ has a unique style.

A

one single HTML page

<style>

body { background-color: red; }
</style>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

An inline style may be used to apply a unique style for a _____

A

single element.
h1 style=”color:blue; text-align:center;”

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

Cascading Order
What style will be used when there is more than one style specified for an HTML element?

A

Highest priority
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default

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

A CSS comment is placed inside the <style> element, and starts and end with \_\_\_\_</style>

A

starts with /* and ends with */

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

The ________property specifies an image to use as the background of an element.

A

background-image

By default, the image is repeated so it covers the entire element.

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

Syntax of background-image:

A

background-image: url(“paper.gif”);

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

To repeat an image vertically, set _______

A

background-repeat: repeat-y;

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

To repeat an image horizontally, set _______

A

background-repeat: repeat-x;

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

Background should not repeat and show once, set ____

A

background-repeat: no-repeat

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

The ______property is used to specify the position of the background image.

A

background-position
background-position: right top;

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

The ______________property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

A

background-attachment
background-attachment: fixed;
background-attachment: scroll;

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

To shorten the code, it is also possible to specify all the background properties in one single property. This is called a ________ property.

A

shorthand
background: #ffffff url(“img_tree.png”) no-repeat right top;

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

When using the shorthand property the order of the property values is:

A

background-color
background-image
background-repeat
background-attachment
background-position

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

The ______property specifies what kind of border to display

A

border-style
solid - Defines a solid border
none - Defines no border
double - Defines a double border
hidden - Defines a hidden border

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

Border-width property

A

border-style: solid;
border-width: medium;
border-width: 2px;
border-width: thick;

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

Border-color property

A

border-style: solid;
border-color: red;
border-color: #ff0000;
border-color: rgb(255, 0, 0);
border-color: hsl(0, 100%, 50%);

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

The __________ property is used to add rounded borders to an element

A

border-radius

33
Q

______ are used to create space around elements, outside of any defined borders.

A

Margins
margin: 70px;
all four margins are 25px

34
Q

4 Margin - Individual Sides

A

margin-top
margin-right
margin-bottom
margin-left

35
Q

Margin - Shorthand Property

A

margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

36
Q

The margin property to ___ horizontally center the element within its container.

A

auto

37
Q

______ is used to create space around an element’s content, inside of any defined borders.

A

Padding
padding: 25px;
all four paddings are 25px

38
Q

4 Padding - Individual Sides

A

padding-top
padding-right
padding-bottom
padding-left

39
Q

Padding - Shorthand Property

A

padding: 25px 50px 75px 100px;
top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

40
Q

The CSS _______properties are used to set the height and width of an element.

A

height and width
height: 35px;
width: 50%;

41
Q

The _____ property is used to set the maximum width of an element.

A

max-width

42
Q

In CSS, the term “box model” is used when talking about ________

A

design and layout.

43
Q

The image below illustrates the box model:
Content - _______
Padding - __________
Border - _________
Margin - ________

A
  1. The content of the box, where text and images appear
  2. Clears an area around the content. The padding is transparent
  3. A border that goes around the padding and content
  4. Clears an area outside the border. The margin is transparent
44
Q

An _______ is a line drawn outside the element’s border.

A

outline

45
Q

An ______ is a line that is drawn around elements, OUTSIDE the borders, to make the element “stand out”.

A

outline

46
Q

CSS has the following outline properties:

A

outline-style
outline-color
outline-width
outline-offset
outline

47
Q

outline-width:
thin (typically ____)
medium (typically ____)
thick (typically _____)
A specific size (in __, pt, cm, em, etc)

A

1px
3px
5px
px

48
Q

The __________ property adds space between an outline and the edge/border of an element.

A

outline-offset

49
Q

_________ is the browser window size. 1vw = _____of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

A

Viewport
1%

50
Q

To use Google fonts:

link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=________”

A

Sofia

51
Q

In Google fonts, To request multiple font effects, just separate the effect names with a pipe character (|), like this

A

link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple”

52
Q

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page:

A

script src=”https://kit.fontawesome.com/yourcode.js” crossorigin=”anonymous”> /script

53
Q

To use the Bootstrap glyphicons, add the following line inside the <head> section of your HTML page:

A

link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”

54
Q

To use the Google icons, add the following line inside the <head> section of your HTML page:

A

link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons”

55
Q

The ______ property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

A

overflow
overflow: scroll;

The overflow property has the following values:
visible - Default.
hidden - The overflow is clipped, and the rest of the content will be invisible.
scroll - add scrollbar
auto - Similar to scroll, but it adds scrollbars only when necessary

56
Q

Compared to display: inline, the major difference is that display: inline-block allows to set a ___________ on the element.

Also, with display: inline-block, the __________ are respected, but with display: inline they are not.

A

width and height

top and bottom margins/paddings

57
Q

Compared to display: block, the major difference is that display: inline-block does not ___________after the element, so the element can sit next to other elements.

A

add a line-break

58
Q

To horizontally center a block element (like <div>), use _______

A

margin: auto;

59
Q

A _________ is something that explains the relationship between the selectors.

A

combinator

60
Q

There are four different combinators in CSS:

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

A

descendant selector (space) - The descendant selector matches all elements that are descendants of a specified element.
It selects all <p> elements inside <div> elements:

61
Q

child selector (>) - __________

A

The child selector (>) selects all elements that are the children of a specified element.
It selects all <p> elements that are children of a <div> element:

62
Q

Adjacent Sibling Selector (+) - ____________

A

The adjacent sibling selector is used to select an element that is directly after another specific element.
It selects the first <p> element that are placed immediately after <div> elements

63
Q

General Sibling Selector (~) -_____________

A

The general sibling selector selects all elements that are next siblings of a specified element.
It selects all <p> elements that are next siblings of <div> elements.

64
Q

A _________ is used to define a special state of an element.

For example, it can be used to:

Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

A

pseudo-class

65
Q

The syntax of pseudo-classes:

A

selector:pseudo-class {
property: value;
}

66
Q

A CSS ________is used to style specified parts of an element.

A

pseudo-element

For example, it can be used to:

Style the first letter, or line, of an element
Insert content before, or after, the content of an element

67
Q

The syntax of pseudo-elements:

A

selector::pseudo-element {
property: value;
}

68
Q

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

A

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

It formats the first letter of the text in all <p> elements:

69
Q

The _____ pseudo-element can be used to insert some content before the content of an element.

A

::before
h1::before {
content: url(smiley.gif);
}

70
Q

The _________ pseudo-element can be used to insert some content after the content of an element.

A

::after
h1::after {
content: url(smiley.gif);
}

71
Q

The ______ property can take a value from 0.0 - 1.0. The lower the value, the more transparent:

A

opacity

72
Q

The opacity property is often used together with the :hover selector to change the opacity on mouse-over:

A

img {
opacity: 0.5;
}

img:hover {
opacity: 1.0;
}

73
Q

Navigation Bar = List of Links

Note: We use href=”#” for test links. In a real web site this would be URLs.

A

ul
Li at start and end
a href=”#home”>Home /a
a href=”#news”>News /a
a href=”#Contact”>Contact /a
a href=”#About”>About /a
/ul

74
Q

To remove the bullets and the margins and padding from the list

A

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

list-style-type: none; - Removes the bullets.
Set margin: 0; and padding: 0; to remove browser default settings

75
Q

Create a hoverable dropdown with CSS. Basic Dropdown

.________ {
position: relative;
display: inline-block;
}

._____________{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

A

dropdown

dropdown-content

.dropdown:hover .dropdown-content {
display: block;
}

76
Q

Function
Filter: invert(100%)

A

makes black logo to white and white logo to black

77
Q

@media ______ and (______)
{
/* CSS Rules to be applies*/
}

A

media-type
media-feature

78
Q

@media ____and (max-width: 800px)
{
#contents{width:90%}
}

A

screen

79
Q
A

Coding (7 decks)

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