CSS

Question 1

p.center {
text-align: center;
color: red;
}

Answer 1

< p> elements with class=”center” will be center-aligned

Question 2

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

Answer 2

Universal Selector

Question 3

h1, h2, p {
text-align: center;
color: red;
}

Answer 3

grouped selectors

Question 4

<link></link>

Answer 4

External CSS

Question 5

hsla, rbga

Answer 5

color hsla(9, 100%, 64%, 0)

Question 6

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

Answer 6

background image

Question 7

background-repeat: repeat-x;

Answer 7

repeat-x, repeat-y, no-repeat

Question 8

background-attachment: fixed

Answer 8

fixed, scroll

Question 9

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

Answer 9

background shorthand

Question 10

border-style: solid;

border-width: 5px;

Answer 10

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

Question 11

border-width: 2px 10px 4px 20px;

Answer 11

border-width: 5px;

Question 12

border-color: green;

Answer 12

border-color: red green blue yellow;

Question 13

border: 5px solid red;

Answer 13

border-width
border-style (required)
border-color

Question 14

border-left: 6px solid red;

background-color: lightgrey;

Answer 14

border-bottom: 6px solid red;

background-color: lightgrey;

Question 15

border-left: 6px solid red;

background-color: lightgrey;

Answer 15

border-bottom: 6px solid red;

background-color: lightgrey;

Question 16

margin: 25px 50px 75px;

Answer 16

top margin is 25px
right and left margins are 50px
bottom margin is 75px

Question 17

margin: 25px 50px;

Answer 17

top and bottom margins are 25px

right and left margins are 50px

Question 18

max-width

Answer 18

The value of the max-width property overrides width
max-height	
max-width	
min-height	
min-width

Question 19

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

Answer 19

outline: 5px solid yellow;

Question 20

text-align

Answer 20

center / left/ right/ justify

Question 21

a {
text-decoration: none;
}

Answer 21

h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

Question 22

text-transform

Answer 22

p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

Question 23

text-indent

Answer 23

p {
text-indent: 50px;
}

Question 24

letter-spacing

Answer 24

h2 {
letter-spacing: -3px;
}

Question 25

line-height

Answer 25

p.small { line-height: 0.8; }

Question 26

direction

Answer 26

The direction property is used to change the text direction of an element: p { direction: rtl; }

Question 27

word-spacing

Answer 27

h1 { word-spacing: 10px; }

Question 28

font-family

Answer 28

font-family: "Times New Roman", Times, serif;

Question 29

font-weight

Answer 29

p.normal { font-weight: normal; } p.thick { font-weight: bold; }

Question 30

a: link - a normal, unvisited link a: visited - a link the user has visited a: hover - a link when the user mouses over it a: active - a link the moment it is clicked

Answer 30

a: hover MUST come after a:link and a:visited a: active MUST come after a:hover

Question 31

list-style-type

Answer 31

ul.a { list-style-type: circle; or none }

Question 32

Table Borders

Answer 32

table, th, td { border: 1px solid black; }

Question 33

border-collapse: collapse;

Answer 33

The border-collapse property sets whether the table borders should be collapsed into a single border:

Question 34

td { height: 50px; vertical-align: bottom; }

Answer 34

The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in or

Question 35

tr:hover {background-color: #f5f5f5;}

Answer 35

Use the :hover selector on to highlight table rows on mouse over:

Question 36

tr:nth-child(even) {background-color: #f2f2f2;}

Answer 36

For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd) table rows:

Question 37

display: none;

Answer 37

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.

Question 38

visibility:hidden;

Answer 38

visibility:hidden; also hides an element. However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Question 39

position

Answer 39

``` static relative fixed absolute sticky ```

Question 40

div.relative { position: relative; left: 30px; border: 3px solid #73AD21; }

Answer 40

An element with position: relative; is positioned relative to its normal position.

Question 41

div.fixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid #73AD21; }

Answer 41

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

Question 42

div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21; }

Answer 42

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A "positioned" element is one whose position is anything except static.

Question 43

div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; }

Answer 43

An element with position: sticky; is positioned based on the user's scroll position. You must also specify at least one of top, right, bottom or left for sticky positioning to work.

Question 44

overflow

Answer 44

visible - Default. The overflow is not clipped. The content renders outside the element's box hidden - The overflow is clipped, and the rest of the content will be invisible scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content auto - Similar to scroll, but it adds scrollbars only when necessary

Question 45

float

Answer 45

left / right / none / inherit

Question 46

clear

Answer 46

The clear property specifies what elements can float beside the cleared element and on which side. none/left/right/both/inherit

Question 47

div p { background-color: yellow; }

Answer 47

Descendant Selector | The following example selects all

elements inside

elements:

Question 48

div > p { background-color: yellow; }

Answer 48

The child selector selects all elements that are the children of a specified element.

Question 49

div + p { background-color: yellow; }

Answer 49

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Question 50

div ~ p { background-color: yellow; }

Answer 50

The general sibling selector selects all elements that are siblings of a specified element.

Question 51

p:first-child { color: blue; }

Answer 51

The :first-child pseudo-class matches a specified element that is the first child of another element.

Question 52

p:nth-child(2) { background: red; }

Answer 52

Specify a background color for every p element that is the second child of its parent:

Question 53

::first-letter

Answer 53

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

Question 54

list-style-type

Answer 54

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

Question 55

li a { display: block; width: 60px; }

Answer 55

Vertical Navigation Bar

Question 56

:not(p) { background: #ff0000; }

Answer 56

Set a background color for all elements that are not a

element:

Question 57

a[target] { background-color: yellow; }

Answer 57

CSS [attribute] Selector

Question 58

a[target="_blank"] { background-color: yellow; }

Answer 58

CSS [attribute="value"] Selector

Question 59

[title~="flower"] { border: 5px solid yellow; }

Answer 59

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.

Question 60

[class|="top"] { background: yellow; }

Answer 60

The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value.

Question 61

[class^="top"] { background: yellow; }

Answer 61

The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.

Question 62

[class$="test"] { background: yellow; }

Answer 62

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.

Question 63

[class*="te"] { background: yellow; }

Answer 63

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.

Question 64

input[type=text]:focus { background-color: lightblue; }

Answer 64

Use the :focus selector to do something with the input field when it gets focus:

Question 65

textarea { resize: none; }

Answer 65

Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):

Question 66

border-radius

Answer 66

The border-radius property is actually a shorthand property for the border-top-left-radius, border-top-right-radius, border-bottom-right-radius and border-bottom-left-radius properties.

Question 67

html { background: url(img_man.jpg) no-repeat center fixed; background-size: cover; }

Answer 67

Full Size Background Image

Question 68

``` .hero-image { background: url(img_man.jpg) no-repeat center; background-size: cover; height: 500px; position: relative; } ```

Answer 68

Hero Image

Question 69

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Answer 69

CSS Linear Gradients

Question 70

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Answer 70

CSS Linear Gradients ``` #grad1 { background-color: red; /* For browsers that do not support gradients */ background-image: linear-gradient(red, yellow); /* Standard syntax (must be last) */ } ```

Question 71

background-image: linear-gradient(angle, color-stop1, color-stop2);

Answer 71

``` #grad { background-image: linear-gradient(-90deg, red, yellow); } ```

Question 72

``` #grad { background-image: radial-gradient(red, yellow, green); } ```

Answer 72

``` #grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%); } ```

Question 73

div { box-shadow: 10px 10px 5px grey; }

Answer 73

horizontal shadow and the vertical shadow / blurr / color

Question 74

``` p.test1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; text-overflow: ellipsis; } ```

Answer 74

It can be clipped: This is some long text that will not fit in the box or it can be rendered as an ellipsis (...): This is some long text that will

Question 75

What do you want to eat? |

Answer 75

We then assign the for attribute of the element with the value of the id attribute of , like so:

Answer 76

We can also provide a step attribute which creates arrows inside the input field to increase or decrease by the value of the step attribute.