Icons can easily be added to your HTML page, by using an icon library.
How To Add CSS Icons
The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. The name of the specified icon class to any inline HTML element (like `<i>` or `<span>`). All the CSS icons in the icon libraries below, are free, scalable vectors that can be customized with CSS (size, color, shadow, etc.). We will look at how to add the CSS Icon code.
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>The Display Property
The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
Block-level Elements
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
<div>
<h1>
-
<h6>
<p></p>
<form>
<header>
<footer>
<section></section>
</footer>
</header>
</form>
</h6>
</h1>
</div>Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
<span>
<a> <img /></a
></span>Display: none
display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved. The `<script>` element uses display: none; as default.
Override The Default Display Value
As mentioned, every element has a default display value. However, you can override this. Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards. A common example is making inline `<li>` elements for horizontal menus:
li {
display: inline;
}Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.
h1.hidden {
display: none;
}CSS Layout — The position Property
The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
There are five different position values:
- Static
- Relative
- Fixed
- Absolute
- Sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Static position
HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.
div.static {
position: static;
border: 3px solid #73ad21;
}```
Relative Position
An element with position: relative; is positioned relative to its normal position.
div.relative {
position: relative;
left: 30px;
border: 3px solid #73ad21;
}Fixed Position
An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73ad21;
}Absolute Position
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73ad21;
}Sticky Position
An element with position: sticky; is positioned based on the user’s scroll position. A sticky element toggles between relative and fixed, depending on the scroll position.
div.sticky {
position: -webkit-sticky;
safariposition: sticky;
top: 0;
background-color: green;
border: 2px solid #4caf50;
}Overlapping Elements
When elements are positioned, they can overlap other elements. The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).An element can have a positive or negative stack order.
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}CSS Overflow
The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
The overflow property has the following values:
- Visible — Default. The overflow is not clipped. The content renders outside the element’s box
- Hidden — The overflow is clipped, and the rest of the content will be invisible
- Scroll — The overflow is clipped, and a scrollbar is added to see the rest of the content
- Auto — Similar to scroll, but it adds scrollbars only when necessary.
The overflow property only works for block elements with a specified height.
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}Resources
You may also find the following resources useful
Why is Tailwind CSS better than other CSS framework
How to use Tailwind CSS in Nextjs
How to install Tailwind CSS in Laravel
How to Install Tailwind CSS in Vue.js
How to create Tailwind CSS Components for your Website
How to set up your first Tailwind CSS project
How to create Beautiful Bootstrap 5 Navbars
How to create Beautiful Bootstrap 5 Checkboxes and Radios
How to use Bootstrap in React Using a React Library
10 Awesome projects built with Tailwind CSS
10 tailwind CSS templates and themes
How To Create A Data table Using Angular Bootstrap
What is Nodejs, Express and When Should It Be Used.
Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN
How to use tailwind CSS padding, margin and border in your project.
How to use Tailwind CSS in React
How to use Tailwind CSS in HTML
Tailwind Flex: How to use Tailwind CSS Flex
Tailwind CSS table-How to Create Tailwind CSS table
Tailwind modal: How to create Tailwind CSS Modal
How to create Tailwind CSS dropdown
How to create React Tables using Tailwind CSS.
How to create React Forms using Tailwind CSS.
How to create Beautiful Bootstrap Tabs in Bootstrap 5
How to create Beautiful Bootstrap 5 Navbars
Tailwind form-How to create and style a Responsive Form using Tailwind CSS
Bootstrap 5 Sidebar-How to create a Responsive Bootstrap 5
Tailwind grid-How to use tailwind CSS grid templates in your project.
How to add tailwind CSS colors and Fonts to your project
Bootstrap 5 icons-How to add Icons to your Bootstrap 5 Project
Differences Between Tailwind CSS and Bootstrap
Differences between Tailwind CSS and SASS
How to create a beautiful React Bootstrap select with icons.
Bootstrap 5 stepper-How to create a beautiful Bootstrap 5 stepper
React Bootstrap Progress bar-How to create a beautiful React Bootstrap progress bar.
How to create a beautiful React multiselect.
React bootstrap 5 form-How to create React forms
How to create a React date picker.
How to create a beautiful Bootstrap Data table with Icons
Bootstrap charts-How To Create Bootstrap Charts using Bootstrap 5
Tailwind animation-How to create Tailwind CSS Animation
All you need to know about Bootstrap 5
Bootstrap 5 navbar-How To Create A Beautiful Navbar Using Bootstrap 5.
Getting Started
Accordion
Autocomplete
Alert
Badges
Animation
Box
ButtonToolbar
Breadcrumb
ButtonGroup
Checkbox
Button
Collapse
Carousel
Iframe
Card
DropDown
Footer
Input
ListGroup
InputGroup
Icon
Multiselect
Notification
Mask
Progress
Rating
Radio
Select
Modal
Pane
Panel
Slider
Spinner
Select 2
SmoothScroll
Switch
Stepper
Charts
Navbar
Tab
Sidebar
Pagination
DatePicker
FileUploader
TimePicker
EditableTable
Table
DataTable
Widgets
Forms
