HTML and CSS Cheatsheet

Semantic HTML

Name Tag Description
Header <header> The <header> element defines introductory content for its nearest sectioning element
Nav <nav> The <nav> element should contain a set of navigational aids. This can include the main navigation, related links, footer navigations, etc.
Main <main> The <main> element defines the main content of a web page
Section <section> The <section> element is used to group related content together. It can be used to explicitly define a new section in the document outline
Article <article> The <article> element is used to group self-contained content together
Aside <aside> The <aside> element defines content that is only slightly-related to the main content
Figure <figure> The <figure> element represents self-contained media such as: images, illustrations, diagrams, code snippets, etc. The media encapsulated inside of the <figure> element can be accompanied by an optional caption using the <figcaption> element
Footer <footer> The <footer> element creates a footer for its nearest sectioning element. It should contain footer content such as: footer navigations, copyright claims, terms of use, etc.

CSS Properties

Name Property Description
Font Size font-size The font-size property is used to set the font size of text on our web page. The value of the font-size property can either be in px, em, rem and %
Font Family font-family The font-family property allows us to change the typeface of text on our web page
Font Weight font-weight The font-weight property allows us to control the thickness of text
Color color The color property allows to modify the foreground color of text on our web page
BG Color background-color The background-color property allows us to change the background color of an element
Text Align text-align The text-align property is used to align text or inline/inline-block elements to the left, right or center of their parent
Opacity opacity The opacity property controls how transparent or opaque an element is
BG Image background-image The background-image property allows us to set the background of an element to be an image