CSS
Types
inline CSS
internal CSS
external CSS
priority: inline > internal > external
Selectors
Type selector -> element name
eg: p, h1, div
Class selector -> .classname
eg: .colorImg
ID selector -> #idname
eg: #reference
Background Image Repeat
CSS background-repeat -> sets if/how a background image will be repeated. By default, a background-image is repeated both vertically and horizontally
CSS background-repeat Horizontally -> repeat-x
CSS background-repeat Vertically -> repeat-y
CSS background-repeat No Repeat -> no-repeat
CSS background-position -> is used to set the starting position of the background image. By default, a background-image is placed at the top-left corner of an element.
eg:
body{
background-image: url("../images/background.png");
background-size: 400px;
}
Horizontal Navigation Bar
flex -> modern way of creating a horizontal navigation bar
eg:
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #6B6F3B;
display: flex;
justify-content: center;
top: 0;
width: 100%;
}
ul li a {
display: block;
color:#F2D091;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #8E1A1A;
}
Dropdown Menu
eg:
.dropdown-content {
display: none;
position: absolute;
background-color: #6B6F3B;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: #F2D091;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #8E1A1A}
.dropdown:hover .dropdown-content {
display: block;
border-radius: 10px;
}
Box Model
Position
static -> all HTML elements are positioned static by default.
relative -> is positioned relative to its normal position in the document flow.
absolute -> is positioned relative to the nearest positioned ancestor (with position other than static).
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 set the final location of the element.
sticky -> A sticky element is positioned relative until a certain scroll position is reached - then it "sticks" in that place (like position:fixed).
How To Create a Two Column Layout
flex
eg:
.row {
display: flex;
}
.column {
flex: 50%;
}
Inline-block
eg:
.occasionsList{
text-align: left;
display: inline-block;
font-size: 25px;
list-style-type: disc;
width: 300px;
height: auto;
border-radius: 15px;
color:#F2D091;
padding: 30px;
}
How To Create a Modal Box - CSS
A modal is a dialog box/popup window that is displayed on top of the current page.
eg:
.modal {
display:none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
backdrop-filter: blur(5px);
background-color: rgba(0,0,0,0.4);
}
.modalContent{
background-color: #F2D091;
margin: 15% auto;
padding: 20px;
border: 1px solid #6B6F3B;
width: 80%;
color: #8E1A1A;
border-radius: 15px;
}
.modalButton{
margin-top: 20px;
cursor: pointer;
border-radius: 12px;
background-color: #8E1A1A;
color: #F2D091;
width: auto;
padding: 10px 20px;
}
CSS backdrop-filter Property
The backdrop-filter property is used to apply a graphical effect to the area behind an element.
Tip: To see the effect, the element or its background must be at least partially transparent.
eg:
.modal {
backdrop-filter: blur(5px);
background-color: rgba(0,0,0,0.4);
}
How To Create a Form With Multiple Steps - CSS
eg:
#form1 {
background-color: #6B6F3B;
margin: 100px auto;
padding: 40px;
width: 70%;
min-width: 300px;
border-radius: 15px;
border: 3px solid #F2D091;
}
.tab-title{
font-size: 30px;
font-weight: bold;
margin-bottom: 20px;
color:#F2D091
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
border: 5px solid #F2D091;
border-radius: 10px;
}
textarea{
padding: 10px;
width: 100%;
font-size: 17px;
border: 5px solid #6B6F3B;
}
input.invalid {
background-color: #ffdddd;
}
textarea.invalid {
background-color: #ffdddd;
}
.tab {
display: none;
}
.formButton {
background-color: #8E1A1A;
color: #F2D091;
border: none;
padding: 10px 20px;
font-size: 17px;
cursor: pointer;
border-radius: 12px;
}
.step-all {
text-align: center;
margin-top: 40px;
}
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #8E1A1A;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
.step.finish {
background-color: #F2D091;
}