Brainscape's Knowledge GenomeTM

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


See full index

HTML, CSS & Javascript > CSS > Flashcards

CSS Flashcards

1
Q

body {
background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}
A

The code uses mediaqueries to set the background-color to lavender if the viewport is 800 pixels wide or wider, to lightgreen if the viewport is between 400 and 799 pixels wide. If the viewport is smaller than 400 pixels, the background-color is lightblue.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q 
@media screen {
  body {
    color: green;
  }
}
@media print {
  body {
    color: black;
  }
}
A

Use mediaqueries to set the text color to green when the document is displayed on the screen, and to black when it is printed.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q 
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
A

When the browser’s width is between 600 and 900px OR above 1100px, change the appearance of DIV.

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

Drop-Down Menu

     body            { font-family: arial, sans-serif }
     nav             { font-weight: bold;
                       color: white;
                       border: 2px solid RoyalBlue;
                       text-align: center;
                       width: 10em;
                       background-color: RoyalBlue; }
     nav ul          { display: none;
                       list-style: none;
                       margin: 0;
                       padding: 0; }
     nav:hover ul    { display: block; }
     nav ul li       { border-top: 2px solid RoyalBlue;
                       background-color: whitesmoke;
                       width: 10em;
                       color: black; }
     nav ul li:hover { background-color: PowderBlue; }
     a               { text-decoration: none; }
  .... Menu

     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
     </ul>
A

Simple nav dropdown hidden until hover using just CSS

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

What are the values of the text-shadow property?

A

h1{ text-shadow: -4px 4px 6px dimgrey; }

1) horizontal offset - num pixels to left (negative) or right (positive) of text
2) vertical offset - num pixels shifted up (negative) or down (positive)
3) blur radius: in pixels, 0px would be sharp edge (no blur)
4) color: color of the text-shadow

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

border-radius property

A

Shorthand for border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.

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

border-radius: 50px 20px;

A

If two values are set; the first one is for the top-left and bottom-right corner, the second one for the top-right and bottom-left corner.

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

RGBA

A

RGBA (Red, Green, Blue, Alpha)
The value for each color—red, green and blue—can range from 0 to 255 . The alpha value– represents opacity—can be any value in the range 0.0 (fully transparent) through 1.0 (fully opaque).

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

What type of value is #00FFFF

A

Hexadecimal RGB. Each digit 16. So, 256-256-256 RGB

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

box-shadow property’s values

A

box-shadow property’s values: horizontal-offset vertical-offset blur-radius color

1) horiz: pixels to left (negative) or right (positive)
2) vert: pixels up (negative) or down (positive)
3) blur-radius: 0px sharp edge
4) color: box-shadow’s color

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

box-shadow: 25px 25px 50px dimgrey;

A 
box-shadow with...
right: 25px
down: 25px
blur-radius: 50px
color: dimgrey
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Selects the second <li> element in a list and make the text green.</li>

A

li:nth-child(2) {
color: green;
}

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

Selects every fourth element among any group of siblings and change text color to lime.

A

:nth-child(4n) {
color: lime;
}

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

Selects any <a> element when “hovered” and change it’s text color to blue</a>

A 
hover psuedoclass
a:hover {
  color: blue;
}
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Describe how negative margins work.

A

If you apply a negative margin to top or left, it will move element in that direction. If you apply a negative margin to bottom or right, it will pull any succeeding element into/over the main element to overlap.

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

What does p::first-line selector do?

A

::first-line is a pseudoelement. Allows you to apply styles to the first line of all p

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q 
What will this do?
#example:before {
   content: "#";
}
#example:after {
   content: ".";
}
A

It will place a # before #example and a . after.

18
Q 
What will this do?
@media all and (min-width:420px) {
   body { background-color : red; }
 }
@media all and (max-width:420px) {
   body { background-color : black; }
 }
A

The min-width:420px will make the background red for screen size which is equal to 420px or greater than that and the max-width:420px will make the background black for the screen size equal to 420px or less than that.

19
Q

What will this do?
@media all and (min-width:360px) and (max-width:420px) {
body { background-color : red; }
}

A

This will apply the color red to body only for a screen size between 360px and 420px. This is done with the help of and operator between the two.

20
Q 
What will the below css/html do?
.topnav a {
  float: left;
  display: block;
  text-align: center;
  padding: 14px 16px;
}
@media screen and (max-width: 600px) {
  .topnav a { float: none; width: 100%;
  }
}
<div class="topnav">
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
</div>
A

When the screen is less than 600px, the navigation menu will be displayed stacked vertically instead of horizontally next to each other.

21
Q

What are the three types of font families? (What are the three generic families of fonts?

A

The generic families are:
Serif
Sans-serif
Monospace

22
Q

Name two Serif fonts. What are Serif fonts good for?

A

Times New Roman
Georgia
Good for print.

23
Q

Name two Sans-serif fonts. What are Sans-serif fonts good for?

A

Arial
Verdana
Good for screens.

24
Q

What type of fonts are Monospace and give two examples.

A

All monospace characters have the same width.
Courier New
Lucinda Console

25
Q

How to make paragraphs use Times New Roman, Times or serif (in that order).

A

p {
font-family: “Times New Roman”, Times, serif;
}

26
Q

How to select in CSS every first line of paragraphs?

A

p::first-line{

}

27
Q

Apply the color red to body only for a screen size between 360px and 420px.
Hint: This is done with the help of and operator between the two.

A

@media all and (min-width:360px) and (max-width:420px) {
body { background-color : red; }
}

28
Q

Use mediaqueries to set the background-color to lavender if the viewport is 800 pixels wide or wider, to lightgreen if the viewport is between 400 and 799 pixels wide. If the viewport is smaller than 400 pixels, the background-color is lightblue.

A

body {
background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}
29
Q

Use mediaqueries to set the text color to green when the document is displayed on the screen, and to black when it is printed.

A 
@media screen {
  body {
    color: green;
  }
}
@media print {
  body {
    color: black;
  }
}
30
Q

When the browser’s width is between 600 and 900px OR above 1100px, change the appearance of DIV.

A 
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}
31
Q

Simple nav dropdown hidden until hover using just CSS

A

Drop-Down Menu

     body            { font-family: arial, sans-serif }
     nav             { font-weight: bold;
                       color: white;
                       border: 2px solid RoyalBlue;
                       text-align: center;
                       width: 10em;
                       background-color: RoyalBlue; }
     nav ul          { display: none;
                       list-style: none;
                       margin: 0;
                       padding: 0; }
     nav:hover ul    { display: block; }
     nav ul li       { border-top: 2px solid RoyalBlue;
                       background-color: whitesmoke;
                       width: 10em;
                       color: black; }
     nav ul li:hover { background-color: PowderBlue; }
     a               { text-decoration: none; }
  .... Menu

     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">News</a></li>
     </ul>
32
Q

Give a div a border. How many values does property get?

A

3 values
div{
border: 2px solid black;
}

33
Q

border-radius: 5px 20px 5px;

A

5px top-left
20px top-right and bottom-left
5px bottom-right

34
Q

border-radius: 30px/10px;

A

horizontal radius: 30px (more pronounced, “longer” radius along top/bottom sides)
vertical radius: 10px (less pronounced, “shorter” radius on left-hand side

35
Q

border-radius: 50%;

A

Makes a circle.

36
Q

Make a circle using border-radius

A

border-radius: 50%

37
Q

How does the responsive meta tag work? What happens if you use a responsive meta tag on a site that isn’t responsive?

A

Here’s Bootstrap’s responsive meta tag:

This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
You should also use the viewport meta if you are building a dedicated mobile site, so it’s not just for responsive sites.

If we use this parameter on a non-responsive site, the website will zoom to the top left corner, forcing the users to zoom out (just to understand where they are) and zoom in to the see the details. Not the best user experience, right?

38
Q

What is the viewport?

A

Viewport — The visible area inside the browser window.

39
Q

Write the HTML element of an image called photo.jpg. Use inline style to set the dimensions to 500px/600px (width/height)

A

<img></img>

40
Q

Write the HTML element of an image called photo.jpg. Specify a width/height of 500px/600px using the width and height attributes of the img.

A

<img></img>

HTML, CSS & Javascript (3 decks)

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