ul li a
a
.example a
div a
.example adiv aaul li a<a> element with a “title” attribute?a[title]{...}a > title {...}a.title {...}a=title {...}Note: an alternative to the question below.
<a> tag containing the title attribute?a[title]a > titlea=titlea.titleNote: an alternative to the question above.
1) .nav {
...;
}
2) nav {
...;
}
3) #nav {
...;
}
1. An element with an ID of "nav"
2. A nav element
3. An element with a class of "nav"
They all target the same nav element. 1. An element with a class of "nav"
2. A nav element
3. An element with an id of "nav"
1. An element with a class of "nav"
2. A nav element
3. A div with an id of "nav"
rgba() value?rgba() value applies transparency to the background color only.rgba() value specifies the level of transparency of an element, as a whole, including its content.rgba() value applies transparency to the background color only.rgba() value specifies the level of transparency of the parent element only.<nav> element is an example of an inline element. <header> is an example of a block element.<span> is an example of a block element. <div> is an example of an inline element..grid {
display: grid;
width: 500px;
grid-template-columns: 50px 1fr 2fr;
}
Note:an alternative to the question below.`
.grid { display: grid; grid-template-columns: 50px 1fr 2fr; }
Note:an alternative to the question above.`
Note:an alternative to the question below.`
Note:an alternative to the question above.`
background: blue url(image.jpg) no-repeat scroll 0px 0px;
background-color: blue;
background-image: url(image.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0px 0px;
background-color: blue;
background-img: URL(image.jpg);
background-position: no-repeat;
background-scroll: scroll;
background-size: 0px 0px;
background-color: blue;
background-src: URL(image.jpg);
background-repeat: no-repeat;
background-wrap: scroll;
background-position: 0px 0px;
background-color: blue;
background-src: URL(image.jpg);
background-repeat: no-repeat;
background-scroll: scroll;
background-position: 0px 0px;
.example {
color: yellow;
}
ul li a {
color: blue;
}
ul a {
color: green;
}
a {
color: red;
}
<ul>
<li><a href="#" class="example">link</a></li>
<li>list item</li>
<li>list item</li>
</ul>
Note:an alternative to the question below.`
1. Larger z-index values appear on top elements with a lower z-index value.
2. Negative and positive numbers can be used.
3. The z-index can be used only on positioned elements.
1. Smaller z-index values appear on top of elements with a larger z-index value.
2. Negative and positive numbers can be used.
3. The z-index can be used with or without positioned elements.
1. Smaller z-index values appear on top of elements with a larger z-index value.
2. Negative and positive numbers can be used.
3. The z-index must also be used with positioned elements.
1. Larger z-index values appear on top of elements with a lower z-index value.
2. Only a positive number can be used.
3. The z-index must also be used with positioned elements.
Note:an alternative to the question above.`
line-height: 20px;
line-height: 2;
<section>
<p>paragraph one</p>
</section>
<p>paragraph two</p>
section p {
color: red;
}
section + p {
color: blue;
}
1. External; CSS is written in a separate file.
2. Inline; CSS is added to the <head> of the HTML page.
3. Internal; CSS is included within the HTML tags.
1. External; CSS is written in a separate file and is linked within the <header> element of the HTML file.
2. Inline; CSS is added to the HTML tag.
3. Internal; CSS is included within the <header> element of the HTML file.
1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
2. Internal; CSS is included within the <header> element of the HTML file.
3. Inline; CSS is added to the HTML tag.
1. External; CSS is written in a separate file and is linked within the <head> element of the HTML file.
2. Inline; CSS is added to the HTML tag.
3. Internal; CSS is included within the <head> element of the HTML file.
a:active {
color: pink;
}
p {
color: #000000;
}
"p" is the selector
"#000000" is the property
"color" is the value
"p" is the selector
"color" is the property
"#000000" is the value
"color" is the selector
"#000000" is the property
"#p" is the value
"color" is the selector
"p" is the property
"#000000" is the value
corner-radius: 10px;border-corner: 10px;corner-curve: 10px;border-radius: 10px;@media (min-width: 1024px), screen and (orientation: landscape) { … }
color: #000color: rgb(0,0,0)color: #000000color: 000000<div style="margin-bottom: 2rem;">Div 1</div>
<div style="margin-top: 2rem;">Div 2</div>

flex-direction: row;flex-direction: row-reverse;flex-direction: column;flex-direction: column-reverse;flex-direction: row-reverse;flex-direction: row;flex-direction: column-reverse;flex-direction: column;flex-direction: row;flex-direction: row-reverse;flex-direction: column;flex-direction: reverse-column;flex-direction: column;flex-direction: column-reverse;flex-direction: row;flex-direction: row-reverse;h2 ~ p {
color: blue;
}
h2 + p {
background: beige;
}
<section>
<p>paragraph 1</p>
<h2>Heading</h2>
<p>paragraph 2</p>
<p>paragraph 3</p>
</section>
Note: a variant of the question below.
h2 ~ p {
color: blue;
}
<section>
<p>P1</p>
<h2>H2</h2>
<p>P3</p>
<p>P4</p>
</section>

display:none and visibility:hidden?font-weight: 400;
font-weight: 700;
li:nth-child(3 + 2n) {
margin: 0 5px;
}
li:nth-child(3n + 2) {
margin: 0 5px;
}
li:nth-child(2),
li:nth-child(5),
li:nth-child(8) {
margin: 0 5px;
}
li:nth-child(2n + 3) {
margin: 0 5px;
}
a[href="#"] {...}a[href~="#"]a[href^="#"]a[href="#"]@font-face {
font-family: 'Avenir', sans-serif;
src:
url('avenir.woff2') format('woff2'),
url('avenir.woff') format('woff');
}
.example {
margin-left: calc(5% + 5px);
}
.logo { position: absolute; left: 100px; top: 150px; }.logo { position: absolute; margin-left: 100px; margin-top: 150px; }.logo { position: absolute; padding-left: 100px; padding-top: 150px; }.logo { position: absolute; left-padding: 100px; top-padding: 150px; }p:first-of-type {
color: red;
}
p {
color: blue;
}
.container {
color: yellow;
}
p:first-child {
color: green;
}
<div class="container">
<h1>Heading</h1>
<p>Paragraph1</p>
<p>Paragraph2</p>
</div>
::placeholder pseudo-element used for?:) or double colon (::) notations for pseudo-elements-for example, ::before and :before?::) was introduced to create a consistency between pseudo-elements from pseudo-classes. For newer browsers, use the double colon notation. For IE8 and below, use single colon notation (:).::) was introduced to differentiate pseudo-elements from pseudo-classes. However, modern browsers support both formats. Older browsers such as IE8 and below do not.___.color: red; /* declaration A */
font-size: 1em; /* declaration B */
padding: 10px 0; /* declaration C */
a:link {
background: #0000ff;
}
a:hover {
background: rgba(0, 0, 255, 0.5);
}
a {
color: blue;
}
a:hover {
background: white;
}
a:link {
background: blue;
}
a:hover {
color: rgba(0, 0, 255, 0.5);
}
a:hover {
background: rgba(blue, 50%);
}
a:link {
background: rgba(blue);
}
div.sidebar {}* {}div#sidebar2 p {}.sidebar p {}body {
background: #ffffff; /* white */
}
section {
background: #0000ff; /* blue */
height: 200px;
}
!elevate!*primeoverride!important___ pseudo-class to set a different color on a link if it was clicked on.a:visiteda:hovera:linka:focusbackground-color: #aaa;background-color: #999999;background-color: rgba(170,170,170,0.5);background-color: rgba(170,170,170,0.2);."header clear" {}header#clear {}.header.clear {}.header clear {}___.'h1' is the ___, while 'color' is the ___.h1 {
color: red;
}
font-weight: bold;
HTML {
font-size: 10px;
}
body {
font-size: 2rem;
}
.rem {
font-size: 1.5rem;
}
.em {
font-size: 2em;
}
<body>
<p class="rem"></p>
<p class="em"></p>
</body>
font-styletext-transformfont-variantletter-spacing.element {cursor: pointer;}.element {cursor: hand;}.element {cursor: move-hand;}.element {cursor: pointer-hand;}background-position: 10% 50%;
grid-template-columns: 2fr 1fr;
<img id="photo" alt="" src="..." />
A. border-radius: 10px 10px 0 0;
B. border-top-left-radius: 10px; and border-top-right-radius: 10px;
C. border-radius: 10px 0;
D. border-top-radius: 10px;
<section>
<p class="example">...</p>
</section>
1. section \* {
...;
}
2. [class*='example'] {
...;
}
3. p.example {
...;
}
4. section p {
...;
}
1. p {
...;
}
2. p.example {
...;
}
3. section p {
...;
}
4. [class*='example'] {
...;
}
1. p.example {
...;
}
2. section p {
...;
}
3. [class*='example'] {
...;
}
4. section \* {
...;
}
1. p {
...;
}
2. section p {
...;
}
3. [class*='example'] {
...;
}
4. p.example {
...;
}
input[type="text"]:not([disabled]) {...}input[type="text"]:not("disabled") {...}input[type*="text"]:not([disabled="disabled"]) {...}input[type="text"]:not([type="disabled"]) {...}input[type="text"] selects all the input with type text, and :not([disabled]) select all the elements not having the attribute “disabled”. Combining both only selects all the input elements with type attribute as “text” and not having “disabled” attribute.`
background-color: hsl(0, 0, 0, 0.5);background-color: rgbx(0, 0, 0, 0.5);background-color: rgba(0, 0, 0, 0.5);background-color: rgba(0, 0, 0, 1);rgba is a funtion in css. rgba stands for red, green, blue, and alpha. The value of alpha can be between 0 and 1 both inclusive with 0 being fully transparent and 1 being fully opaque.
<header> element?<header>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</header>
<h2>Heading 2</h2>
header h1, header h2 {...}header h1 + header h2 {...}header h1, h2 {...}h1, h2 {...}.container {
display: flex;
}
.item {
border: 1px solid red;
flex-direction: row-reverse;
}
transition: margin 1000ms ease-in-out;transition: color 1.3s ease-in;transition: position 400ms linear;transition: opacity 1s ease-in;article p {
color: blue;
}
article > p {
color: green;
}
<article>
<p>Paragraph 1</p>
<aside>
<p>Paragraph 2</p>
</aside>
</article>
border: 1px solid red;
border-size: 1px;
border-style: solid;
border-color: red;
border-size: 1px;
border-type: solid;
border-color: red;
border-width: 1px;
border-style: solid;
border-color: red;
border-width: 1px;
border-line: solid;
border-color: red;
_.section {
color: gray;
}
<section>
<p>paragraph</p>
<a href="#">link</a>
</section>
.header {...}header {...}#header {...}header > h1 {...} a
a:hover
:link
:visited
:hover
:active
:focus
:active
:focus
:hover
:link
:visited
:link
:visited
:focus
:hover
:active
section * psection + psection ~ psection > pul {
--color: red;
}
p {
color: var(--color);
}
a {
color: var(--color, orange);
}
<p>Paragraph</p>
<ul>
<li>
<a href="#">list item a link </a>
</li>
<li>list item</li>
</ul>
.example {
width: 800px;
margin: 0 auto;
}
10vw = ?px
10vh = ?px
10vmin = ?px
10vmax = ?px
p:first-of-type:first-letter {
color: red;
}
<body>
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<article>
<h1>Heading</h1>
<p>Paragraph 3.</p>
<p>paragraph 4.</p>
</article>
<section>
<p>Paragraph 5.</p>
<p>Paragraph 6.</p>
</section>
</body>
a[href$='domain.com'] {
color: pink;
}
a[href='*domain.com'] {
color: pink;
}
a[href*='domain.com'] {
color: rgba(255, 155, 155);
}
a[href*='domain.com'] {
color: pink;
}
css background: linear-gradient(#648880, #293f50);css background-image: linear(#648880, #293f50);css background: gradient(linear, #648880, #293f50);css background-color: linear-gradient(#648880, #293f50);.glyphicon-bgcircle {
circle-radius: 50%;
margin: 50px;
background-color: #fdadc6;
color: rgba(255, 255, 255, 1);
font-size: 24px;
}
glyphicon-bgcircle {
border-circle: 50%;
padding: 50px;
background-color: #fdadc6;
color: rgba(255, 255, 255, 1);
font-size: 24px;
}
.glyphicon-bgcircle {
border-radius: 50%;
padding: 50px;
background-color: #fdadc6;
color: rgba(255, 255, 255, 1);
font-size: 24px;
}
.glyphicon-bgcircle {
radius-rounded: 50%;
margin: auto;
background-color: #fdadc6;
color: rgba(255, 255, 255, 1);
font-size: 24px;
}
A. font-size: xsmall
B. font-size: 50%
C. font-size: 1em
D. font-size: 20px

<style>
.container {
position: relative;
height: 200px;
width: 200px;
border: 1px solid black;
}
</style>
<div class="container"><div class="overlay"></div></div>
.overlay {
position: static;
top: 200px;
bottom: 200px;
right: 200px;
left: 200px;
background-color: rgba(0, 0, 0, 0.5);
}
.overlay {
position: absolute;
top: 200px;
bottom: 200px;
right: 200px;
left: 200px;
background-color: rgba(0, 0, 0, 0.5);
}
.overlay {
position: static;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
<div class="container">
<img src="grumpy-cat.gif" />
<p>The z-index property is cool!</p>
</div>
img {
position: absolute;
left: 0px;
top: 0px;
// Missing line
}
z-index: 1;z-index: -1;z-index: 0;z-index: true;font-size: reduce;font-size: 8px;font-size: -1em;font-size: smaller;<span class="highlight">#BLM</span>
.highlight {
background-color: yellow;
}
#highlight {
background-color: yellow;
}
.highlight {
color: yellow;
}
#highlight {
color: yellow;
}
background-repeat: no-repeat;
background-repeat: fixed;
background-repeat: none;
background-tile: none;
transform: rotate(-30deg);transform: rotate(30deg);rotate: 30deg;spin: 30deg;background-image: file('wood.png');background-image: url('wood.png');background-image: wood.png;image: wood.png<section><p>paragraph one</p></section><p>paragraph two</p>
section > p {
color: blue;
}
p {
color: blue;
}
section + p {
color: blue;
}
p + section {
color: blue;
}
transform: translateX(-100px)transform: translateY(-100px)transform: translateY(100px)transform: translateX(100px)<div id="outer">
<div id="inner">Center Me!</div>
</div>
#inner {
width: 50%;
}
#outer {
width: 100%;
}
#inner {
left: 0;
right: 0;
position: center;
}
#inner {
text-align: center;
}
#inner {
width: 50%;
margin: 0 auto;
}
.pen {
height: 100px;
width: 100px;
border: 2px dashed brown;
position: relative;
}
#puppy {
position: absolute;
right: 80px;
bottom: 0px;
}
<div class="pen">
<span id="puppy">:dog:</span>
</div>
a:hover {...}a :hover {...}a.hover {...}a hover {...} <style>
#cellar-door {
box-shadow: 3px 5px 10px #000;
}
.text-shadow {
text-shadow: 3px 5px 10px #000;
}
</style>
<h1 _____> Cellar Door</h1>
class="text-shadow"id="cellar-door"id="text-shadow"class="cellar-door"-- This line has been cancelled./* This line has been cancelled. */// This line has been cancelled.# This line has been cancelled. h2 ~ p {
color: blue;
}
<section>
<p>P1</p>
<h2>H2</h2>
<p>P3</p>
<p>P4</p>
</section>
a:visited {
...;
}
a:active {
...;
}
a:hover {
...;
}
a:focus {
...;
}
:visited styles are applied after the link has been opened.
:active styles are applied on mouse click and hold.
:hover styles are applied on mouse over or mouse click and hold.
:focus styles are applied when a Tab key on a keyboard is used to navigate through links.:visited styles are applied after the link has been opened.
:active styles are applied on mouse click.
:hover styles are applied on mouseover.
:focus styles are applied on mouse click and hold, or when a Tab key on a keyboard is used to navigate through links.:visited styles are applied after the link has been opened.
:active styles are applied on mouse click only and before mouse release.
:hover styles are applied on mouseover.
:focus styles are applied when a Tab key on a keyboard is used to navigate through links.:visited styles are applied on mouse hold.
:active styles are applied when the link has been opened.
:hover styles are applied on mouseover.
:focus styles are applied when a Tab key on a keyboard is used to navigate through links.input.valid[false] {
color: red;
}
input:invalid {
color: red;
}
input.not(valid) {
color: red;
}
input.invalid {
color: red;
}
img {
transform: grayscale(1);
}
img {
filter: grayscale(0);
}
img {
transform: grayscale(0);
}
img {
filter: grayscale(1);
}
.logo {
position: absolute;
padding-left: 100px;
padding-top: 150px;
}
.logo {
position: absolute;
left: 100px;
top: 150px;
}
.logo {
position: absolute;
left-padding: 100px;
top-padding: 150px;
}
.logo {
position: absolute;
margin-left: 100px;
margin-top: 150px;
}
<div> with the class .child be positioned within its container?<style>
.container {
height: 200px;
width: 200px;
}
.child {
margin: auto 0;
height: 100px;
}
</style>
<div class="container">
<div class="child">...</div>
</div>
header {
grid-column: 1 / auto;
}
header {
grid-column: 1/-1;
}
header {
grid-column: -1/1;
}
header {
grid-column: 1/100%;
}
align-items: start;
justify-items: end;
align-items: center;
justify-items: center;
align-items: middle;
justify-items: middle;
align-items: stretch;
justify-items: stretch;
Reference for align-items Reference for justify-items
input.valid[false] {
color: red;
}
input:invalid {
color: red;
}
input.not(valid) {
color: red;
}
input.invalid {
color: red;
}
@import@link@insert@style<style>
#tall-text {
display: inline;
font-size: 20px;
height: 200px;
}
</style>
<p id="tall-text">Did I grow?</p>

Reference: CSS RGB and RGBA Colors
<link rel="stylesheet" type="text/css" href="mystyle.css"><stylesheet>mystyle.css</stylesheet><style src= "mystyle.css">| Reference: HTML link tag | HTML Link Tag Syntax for External CSS Files |
Reference: CSS Margin Collapse
Reference: CSS box-sizing Property
Reference: HTML inert attribute - MDN
Reference: CSS Line Height Property
Reference: CSS Visibility Property - W3Schools
Reference: CSS outline Property - W3Schools
Reference: CSS text-align Property - W3Schools
display:none hides the elements but maintains the space it previously occupied. visibility:hidden will hide the element from view and remove it from the normal flow of the document There is no difference; both will hide the element on the pageReference: CSS visibility:hidden vs display:none
p.class#id-
Reference: CSS Selectors – Cheat Sheet