HTML Tags

Tag name Description Atrributes
<!DOCTYPE html> Defines the document type None
<html> Defines the root element of an HTML document 'lang', 'dir'
<head> Contains metadata information about the document None
<title> Defines the title of the document None
<body> Defines the body of the document 'background', 'text', 'link', 'vlink', 'alink'
<h1> Defines a heading None
<p> Defines a paragraph None
<a> Defines a hyperlink 'href', 'target', 'download', 'rel', hreflang', 'type'
<img> Defines an image 'src', 'alt', 'width', 'height'
<ul> Defines an unordered list None

HTML Tables

Table Element Description Attributes
<table> Defines a table 'border', 'width'
<tr> Defines a table row None
<th> Defines a table header cell 'colspan', 'rowspan'
<td> Defines a table data cell 'colspan', 'rowspan'
<caption> Defines a table caption None
<col> Defines a column within a table 'span'
<thead> Defines a group of heading rows in a table None
<tobdy> Defines a group of body rows in a table None
<tfood> Defines a group of footer rows in a table None
<colgroup> Defines a group of columns in a table None

CSS Selectors

Selector Name Description Example
p Selects all <p> elements p { color: red; }
.class Selects all elements with class="class" .class { color: blue; }
#id Selects all elements with id="id" #id { color: green; }
* Selects all elements * { font-size: 16px; }
element, element Selects all <element> elements and all <element> elements h1, h2 { font-size: 24px; }
element.class Selects all <element> elements with class="class" p.error { color: red; }
element1 > element2 Selects all <element2> elements where the parent is a <element1> element ul > li { margin-left: 10px; }
:hover Selects an element that is being hovered over a:hover { text-decoration: underline; }
:first-child Selects the first child element of its parent p:first-child { font-weight: bold; }
:last-child Selects the last child element of its parent li:last-child { font-weight: bold; }

CSS Properties

Property Name Description Value Syntax
color Sets the text color RGB, HSL, HEX, color name
font-size Sets the size of the font px, em
background-color Sets the background color of an element RGB, HSL, HEX, color name
text-align Sets the horizontal alignment of text left, right, center, justify
font-family Sets the font family font family name, serif, sans-serif, monospace, cursive, fantasy
font-weight Sets the weight of the font normal, bold, bolder, lighter, weight number
line-height Sets the height of a line number, px, em, normal
padding Sets the padding (inner space) of an element px, em
margin Sets the margin (outer space) of an element px, em
border Sets the border of an element border width - border style - border color

CSS Layout

Layout Technique Description Example
Box Model Defines the layout of an element as a rectangular box .box { width: 100px; height: 100px; border: 1px solid black; padding: 10px; margin: 10px; }
Flexbox Defines a flexible container for layout elements .container { display: flex; flex-wrap: wrap; justify-content: center; }
Grid Defines a grid container for layout elements .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-gap: 10px; }
Positioning Defines the position of an element on a page .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Responsive Design Designs web pages that adapt to different screen sizes and orientations @media screen and (max-width: 768px) { body { font-size: 16px; } }
Floats Places an element to the left or right of its container .img { float: left; margin-right: 10px; }
Overflow Defines what happens when content overflows an element .container { overflow: auto; }
Columns Defines multiple columns within a page .container { columns: 2; column-gap: 20px; }
Table Uses a table layout for a webpage .container { display: table; }
Position Places an element at a specific position on a webpage .box { position: fixed; top: 0; right: 0; }