CSS Guide

CSS Quick Guide
How would you center an element horizontally and

vertically? 2
What is the box model in CSS? 3
How would you create a responsive layout using CSS? 4
What is the difference between display: none and visibility:
hidden? 6
How would you create a hover effect on a button? 6
How would you add a custom font to a website? 7
How would you create a fixed header that stays at the top
of the page while scrolling? 7
How would you create a responsive image that adjusts its
size based on the screen width? 8
How would you create a gradient background using CSS? 8
How would you create a sticky footer that stays at the
bottom of the page? 9
How would you create a CSS animation? 9
How would you create a responsive grid system using CSS?
10
How would you create a custom checkbox using CSS? 11
How would you create a responsive navbar using CSS? 12
How would you create a CSS tooltip? 13
How would you create a custom scrollbar using CSS? 14
How would you create a responsive image gallery using
CSS? 15
How would you create a CSS transition on hover? 15
Laurence Svekis https://basescripts.com/

How would you create a responsive font size using CSS? 16
How would you create a CSS hover effect that reveals text
over an image? 16
How would you center an element horizontally and
vertically using CSS? 18
How would you create a CSS fade-in animation? 18
How would you create a sticky header using CSS? 19
How would you create a CSS flip card? 19
How would you create a CSS progress bar? 21
How would you create a CSS triangle? 22
How would you create a CSS accordion? 22
How would you create a CSS pulse effect? 23
How would you create a CSS tooltip? 24
How would you create a CSS responsive grid? 25
How would you create a CSS gradient background? 27
How would you create a CSS navigation bar? 27
How would you center an element horizontally

and vertically?
Solution:
.element {
position: absolute;

top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<html>
<body>
<div class="container">
<div class="box">
<h1>Hello, World!</h1>
</div>
</div>
</body>
</html>
What is the box model in CSS?

Solution:
The box model is a concept in CSS that refers to the rectangular
box that surrounds every HTML element. It consists of four parts:
content, padding, border, and margin. The content is the actual
text or media that is displayed within the element, while the
padding is the space between the content and the border. The
border is the visible edge around the element, and the margin is
the space between the border and other elements on the page.

How would you create a responsive layout
using CSS?
Solution:
<html>
<body>
<div class="row">
<div class="col-12 col-sm-6 col-md-4">
<div class="box">
<h1>Box 1</h1>
</div>
</div>
<div class="box">
<h1>Box 2</h1>
</div>
</div>
<div class="box">
<h1>Box 3</h1>
</div>
</div>

</div>
</div>
</body>
</html>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 100%;
padding: 20px;
box-sizing: border-box;
}
@media (min-width: 768px) {

.item {
width: 50%;
}
}

What is the difference between display: none
and visibility: hidden?
Solution:
display: none removes the element from the document flow and
makes it completely invisible, while visibility: hidden hides the
element but still reserves space for it in the layout.
How would you create a hover effect on a

button?
Solution:
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: background-color 0.2s ease-in-out;
}
.button:hover {
background-color: darkblue;
}

How would you add a custom font to a
website?
Solution:
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'CustomFont', sans-serif;
}
How would you create a fixed header that

stays at the top of the page while scrolling?
Solution:
.header {
position: fixed;
top: 0;
left: 0;

width: 100%;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
z-index: 1;
}
How would you create a responsive image

that adjusts its size based on the screen
width?
Solution:
img {
max-width: 100%;
height: auto;
}
How would you create a gradient background

using CSS?
Solution:
body {
background: linear-gradient(to bottom, #f1c40f,
#e67e22);

}
How would you create a sticky footer that

stays at the bottom of the page?
Solution:
html, body {
height: 100%;
}
.container {
min-height: 100%;
margin-bottom: -50px; /* height of footer */
}
.footer {
height: 50px;
}
<html>
<body>

<h1>Main Content</h1>
</div>
<div class="footer">
<p>Sticky Footer</p>
</div>
</body>
</html>
How would you create a CSS animation?

Solution:
<html>
<body>
<div class="box"></div>
</body>
</html>
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.element {

animation: slide 1s infinite;
}
How would you create a responsive grid

system using CSS?
Solution:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,
1fr));
grid-gap: 20px;
}
How would you create a custom checkbox

using CSS?
Solution:
input[type="checkbox"] {
display: none;
}
.checkbox {

display: inline-block;
width: 20px;
height: 20px;
border: 2px solid gray;
border-radius: 4px;
}
.checkbox:checked {
}
How would you create a responsive navbar

using CSS?
Solution:
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.logo {

font-size: 24px;
font-weight: bold;
}
.menu {
display: none;
}

.menu {
display: flex;
width: 50%;
}
}
How would you create a CSS tooltip?

Solution:
.tooltip {
position: relative;
}
.tooltip:before {

content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: white;
padding: 5px;
border-radius: 4px;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease-in-out;
}
.tooltip:hover:before {
opacity: 1;
visibility: visible;
}
How would you create a custom scrollbar

using CSS?
Solution:
::-webkit-scrollbar {
width: 10px;

}
::-webkit-scrollbar-thumb {
background-color: gray;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background-color: lightgray;
}
How would you create a responsive image

gallery using CSS?
Solution:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px,
1fr));
grid-gap: 20px;
}
.gallery img {
max-width: 100%;
height: auto;

display: block;
}
How would you create a CSS transition on

hover?
Solution:
.button {
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
transition: transform 0.2s ease-in-out;
}
.button:hover {
transform: scale(1.1);
}
How would you create a responsive font size

using CSS?
Solution:

body {
font-size: calc(16px + (20 - 16) * ((100vw - 320px) /
(1600 - 320)));
}
How would you create a CSS hover effect that

reveals text over an image?
Solution:
.container {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;

font-size: 24px;
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.container:hover .text {
opacity: 1;
}
How would you center an element horizontally

and vertically using CSS?
Solution:
.parent {
display: flex;
justify-content: center;
}
How would you create a CSS fade-in

animation?
Solution:
@keyframes fadeIn {
from { opacity: 0; }

to { opacity: 1; }
}
.element {
opacity: 0;
animation: fadeIn 1s forwards;
}
How would you create a sticky header using

CSS?
Solution:
header {
position: sticky;
top: 0;
padding: 20px;
}
How would you create a CSS flip card?

Solution:
.card {
position: relative;

width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out;
}
.card:hover {
transform: rotateY(180deg);
}
.card .front,
.card .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card .front {
z-index: 2;
}

.card .back {
transform: rotateY(180deg);
color: white;
}
How would you create a CSS progress bar?

Solution:
.progress {
position: relative;
width: 100%;
height: 20px;
}
.progress-bar {
position: absolute;
top: 0;
left: 0;
height: 100%;

transition: width 0.2s ease-in-out;
}
.progress-bar-50 {
width: 50%;
}
<html>
<body>
<div class="progress progress-bar-50">
<div class="progress-bar"></div>
</div>
</body>
</html>
How would you create a CSS triangle?

Solution:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
}

How would you create a CSS accordion?
Solution:
.accordion {
width: 100%;
}
.accordion-item {
border: 1px solid lightgray;
border-radius: 5px;
margin-bottom: 10px;
overflow: hidden;
}
.accordion-header {
padding: 10px;
font-weight: bold;
cursor: pointer;
}
.accordion-header:hover {

}
.accordion-content {
padding: 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
.accordion-item.active .accordion-content {
max-height: 500px;
}
How would you create a CSS pulse effect?

Solution:
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.5); }
}
.button {
display: inline-block;
padding: 10px 20px;

color: white;
border: none;
border-radius: 5px;
animation: pulse 1s infinite alternate;
}
How would you create a CSS tooltip?

Solution:
.tooltip {
position: relative;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: white;
padding: 5px 10px;
border-radius: 5px;
opacity: 0;

visibility: hidden;
transition: opacity 0.2s ease-in-out, visibility 0.2s
ease-in-out;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
How would you create a CSS responsive grid?

Solution:
.row::after {
content: "";
clear: both;
display: table;
}
.col {
width: 100%;
padding: 10px;
box-sizing: border-box;
}

.col {
width: 50%;
}
}

.col {
width: 33.33333%;
}
}

.col {
width: 25%;
}
}
How would you create a CSS gradient

background?
Solution:
.gradient {
background: linear-gradient(to bottom right, #1abc9c,
#2ecc71);

}
How would you create a CSS navigation bar?

Solution:
.navbar {
display: flex;
padding: 20px;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar li {
margin-right: 20px;
}

.navbar a {
color: blue;
text-decoration: none;
font-weight: bold;
}
.navbar a:hover {
text-decoration: underline;
}

CSS Guide

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Guide

Uploaded by

Copyright:

Available Formats

CSS Quick Guide

How would you center an element horizontally and

Laurence Svekis https://basescripts.com/

How would you center an element horizontally

Laurence Svekis https://basescripts.com/

What is the box model in CSS?

Laurence Svekis https://basescripts.com/

Laurence Svekis https://basescripts.com/

@media (min-width: 768px) {

Laurence Svekis https://basescripts.com/

How would you create a hover effect on a

Laurence Svekis https://basescripts.com/

How would you create a fixed header that

Laurence Svekis https://basescripts.com/

How would you create a responsive image

How would you create a gradient background

Laurence Svekis https://basescripts.com/

How would you create a sticky footer that

Laurence Svekis https://basescripts.com/

How would you create a CSS animation?

Laurence Svekis https://basescripts.com/

How would you create a responsive grid

How would you create a custom checkbox

Laurence Svekis https://basescripts.com/

How would you create a responsive navbar

Laurence Svekis https://basescripts.com/

@media (min-width: 768px) {

How would you create a CSS tooltip?

Laurence Svekis https://basescripts.com/

How would you create a custom scrollbar

Laurence Svekis https://basescripts.com/

How would you create a responsive image

Laurence Svekis https://basescripts.com/

How would you create a CSS transition on

How would you create a responsive font size

Laurence Svekis https://basescripts.com/

How would you create a CSS hover effect that

Laurence Svekis https://basescripts.com/

How would you center an element horizontally

How would you create a CSS fade-in

Laurence Svekis https://basescripts.com/

How would you create a sticky header using

How would you create a CSS flip card?

Laurence Svekis https://basescripts.com/

Laurence Svekis https://basescripts.com/

How would you create a CSS progress bar?

Laurence Svekis https://basescripts.com/

How would you create a CSS triangle?

Laurence Svekis https://basescripts.com/

Laurence Svekis https://basescripts.com/

How would you create a CSS pulse effect?

Laurence Svekis https://basescripts.com/

How would you create a CSS tooltip?

Laurence Svekis https://basescripts.com/

How would you create a CSS responsive grid?

Laurence Svekis https://basescripts.com/

@media (min-width: 992px) {

@media (min-width: 1200px) {

How would you create a CSS gradient

Laurence Svekis https://basescripts.com/

How would you create a CSS navigation bar?

Laurence Svekis https://basescripts.com/