CSS – Using Font Awesome Icons
Font Awesome is a collection of icons that can be used on the page for many purposes including, menu items, list bullets, download icons, etc.
CSS – Using Entities
In CSS/HTML there are specific entities that can be placed via code. This is a list of some of the most used CSS entities and their HTML equivalents.
CSS – Text Link Coloring
An HTML text link is displayed in a different color depending on whether it has been visited, is unvisited, is being hovered over, or is currently active.
CSS – Using Pseudo-Classes and Pseudo-Elements
A pseudo-class is used to define a special state of an element, while a pseudo-element is used to style specified parts of an element.
CSS – Styling HTML Lists
In HTML, there are two main types of lists: unordered lists <ul>, which use bullets for each list item and ordered lists <ol>, which use a numbering system.
CSS – Styling HTML Tables
HTML tables can be styled to a point using tag attributes like border, cell-padding, cell-spacing, and width/height. But tables can be greatly improved with CSS.
CSS – Styling HTML Forms
CSS can be used to style the labels, fields, buttons, checkboxes, etc. in an HTML form.
CSS – Applying 2D Transforms to an Element
2D CSS transforms allow you to move, rotate, scale, and skew an element on two planes.
CSS – Applying 3D Transforms to an Element
3D CSS transforms allow you to move, rotate, scale, and skew an element on three planes.
CSS – Applying a Transition to an Element
CSS transitions allows an element to be changed or moved smoothly, over a given time, creating simple animations.
CSS – Animating HTML Elements
CSS animations allow for elements to gradually change from one style to another or create movement on the page using keyframes to store the animation data.
CSS – Using a Grid Layout for a Responsive Design
A CSS grid Layout offers a grid-based system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
CSS – Using Media Queries for a Responsive Design
CSS media queries not only look for the screen size to determine which styles to apply, but also look at the user’s device type and its capabilities.
CSS – Flexbox – Define a Flex Container
A Flexbox container allows for a responsive layout structure, giving you complete control over the direction, alignment, order, and size of the boxes.
CSS – Flexbox – Define the Flex Direction
The flex-direction property defines in which direction a flex container will stack the flex items within.
CSS – Flexbox – Define the Flex Wrap
The flex-wrap property specifies whether the flex items should wrap or not wrap within the flex container.
CSS – Flexbox – Define Content Justification
The justify-content property is used to align the flex items within the flex container.
CSS – Flexbox – Vertically Aligning the Content
The align-items property is used to vertically align the flex items within the flex container.
CSS – Flexbox – Vertically Aligning a Specified Flex Item
The align-self property defines the alignment for a specified item and overrides the default vertical alignment set by the container’s align-items property.
CSS – Flexbox – Vertically Align Wrapped Content
The align-content property is used to vertically align the wrapped flex lines of items within the flex container.