My Coding Cheat Sheet

CSS Cheat Sheet

The cursor CSS property sets the mouse cursor
css code description action
cursor: default; the basic cursor
cursor: pointer; use to indicate links
cursor: help; help information is available
cursor: progress; the program is busy in the background, but the user can still interact with the interface
cursor: wait; the program is busy, and the user can't interact with the interface
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements
css code description
position: static; default value; the element is positioned according to the normal flow of the document
position: relative;
top: 40px; left: 40px;
 the element is positioned according to the normal flow of the document, and then offset relative to itself based on the values
position: absolute;
top: 40px; left: 40px;
 the element is removed from the normal document flow, and no space is created for the element in the page layout. will positioned to the closed ancestor
position: sticky;
top: 20px;
the element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor
The display CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
css code description
display: block; the element generates a block elements + generating line break before and after the element
display: inline; the element generates one or more inline elements boxes that do no generate line break before and after.
display: inline-block; the element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
The breadcrumb navigation helps the user to understand their location in the website by providing a breadcrumb trail back to the start page.
html code css code display
input html code here .breadcrumb > li {
display: inline;
}

.breadcrumb li+li::before {
padding: 10px;
content: ">";
}

.breadcrumb a {
text-decoration: none;
color:#4C4E52;
}

.breadcrumb a:hover {
color: #d3b5a0;
}
Miscellanous
css code description
href="#" this value will link the page to scroll to the top of the current page