Reset

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
	margin: 0;
	min-height: 100vh;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

button, input, textarea, select {
	font: inherit;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

Description

  • box-sizing: border-box makes an element’s declared width include its padding and border. This makes sizes easier to predict.
  • The browser adds space around the body by default. Setting its margin to 0 removes that outer space.
  • The media rules prevent images, videos, and similar content from becoming wider than the space available.
  • Form controls inherit the page’s font so buttons, inputs, and other fields match the surrounding text.
  • The reset keeps useful browser defaults, including link underlines, list markers, keyboard focus outlines, and resizable text areas.

Formatting

body {
	background: #ffffff;
	color: #222222;
	font-family: Arial, sans-serif;
	font-size: 18px;
	line-height: 1.5;
}

.wrapper {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}

h1, h2, h3 {
	font-family: "Times New Roman", serif;
	line-height: 1.2;
}

h1 {
	font-size: 48px;
	margin: 0 0 48px;
}

h2 {
	font-size: 38px;
	margin: 48px 0 32px;
}

h3 {
	font-size: 26px;
	margin: 40px 0 24px;
}

p, ul, ol {
	margin: 0 0 24px;
}

a {
	color: #0057b8;
}

a:hover {
	color: #003f87;
}

img, picture, video, canvas, svg {
	margin-bottom: 32px;
}

table {
	width: 100%;
	margin-bottom: 32px;
}

th, td {
	padding: 16px;
	border-bottom: 1px solid #cccccc;
	text-align: left;
}

hr {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid #cccccc;
}

blockquote {
	margin: 32px 0;
	padding-left: 16px;
	border-left: 4px solid #cccccc;
}

Description

  • Styles placed on body create the starting appearance for most text on the page.
  • The .wrapper class keeps content from becoming wider than 1200px. The automatic left and right margins center it.
  • The wrapper’s left and right padding keeps content away from the edges of the browser window.
  • Heading sizes and margins create a clear visual order between the page title, section headings, and smaller headings.
  • Paragraphs and lists receive bottom margin so separate pieces of content do not run together.
  • Links keep their underline so visitors can recognize them. The color changes when the pointer is over a link.

Breakpoint

@media (max-width: 767px) {
	.wrapper {
		padding: 0 16px;
	}

	h1 {
		font-size: 36px;
		margin-bottom: 32px;
	}

	h2 {
		font-size: 30px;
		margin: 40px 0 24px;
	}

	h3 {
		font-size: 22px;
		margin: 32px 0 20px;
	}
}

Description

  • A media query applies its styles only when the browser window matches the condition inside the parentheses.
  • At widths of 767px or less, the wrapper uses less side padding so more room is available for the content.
  • The headings become smaller so they fit more comfortably on narrow screens.
  • A breakpoint should be added when the layout needs to change, not only because a particular device size is common.

AI Tutor