ul li a
a
.example a
div a
.example a
div a
a
ul 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 > title
a=title
a.title
Note: 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: #000
color: rgb(0,0,0)
color: #000000
color: 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 5 px;
}
li:nth-child(3n + 2) {
margin: 0 5 px;
}
li:nth-child(2),
li:nth-child(5),
li:nth-child(8) {
margin: 0 5 px;
}
li:nth-child(2n + 3) {
margin: 0 5 px;
}
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!
*prime
override
!important
___
pseudo-class to set a different color on a link if it was clicked on.a:visited
a:hover
a:link
a:focus
background-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-style
text-transform
font-variant
letter-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 * p
section + p
section ~ p
section > p
ul {
--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%;
margins: 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%;
margins: 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>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<stylesheet>mystyle.css</stylesheet>
<style src= "mystyle.css">
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 page
p
.class
#id
-