h1 - Tutorial Step 3: Use CSS formating Headlines, Hyperlinks and References

Box 1: We need this box to place h1 and the internal links skip to content (internal reference to anchor in box 3) and skip to navigation (internal reference to anchor in box3) for screenreaders.

h2 - Box 2

Box 2 will later hold my navigation.

back to tutorial

h3 - Box 3

What is new in step 3?

HTML & Content
  1. Additonal text.
  2. That was it for the HTML and content.
Caption - Stylesheet complete for Step 3
th - The Stylesheet 
body {
	color:           #000000;
	font-size:        1em;
	font-family:      sans-serif, Arial;
	font-weight:      normal;
	text-decoration:  none;
	background-color: #ffffff }

#box1 {
	padding: 2%;
	border:   dashed 2px #c03 }

h1 {
	font-size:    2em;
	font-weight:   bold;
	margin-bottom: 2%;
	border:        dotted 2px #000 }

#box2 {
	margin-top: 10%;
	padding:     2%;
	width:       15%;
	float:       left;
	border:      dashed 2px #c03 }

h2 {
	font-size:    1.5em;
	font-weight:   bold;
	text-align:    left;
	margin-bottom: 2%;
	border:        dotted 2px #000 }

#box3 {
	margin-top: 10%;
	margin-left: 20%;
	padding:     2%;
	width:       auto;
	border:      dashed 2px #c03 }

h3 {
	font-size:    1.5em;
	font-weight:   bold;
	text-align:    left;
	margin-bottom: 2%;
	border:        dotted 2px #000 }

p {
	margin-bottom: 2%;
	padding:        1%;
	border:         dotted 1px #036 }

ol {
	list-style:   upper-roman;
	margin-top:    2%;
	margin-bottom: 2%;
	margin-left:   2%;
	padding:       1%;
	border:        dotted 1px #036 }

li {
	display:      list-item;
	margin-bottom: 2%;
	border:        dotted 1px #06c }

table {
	margin-bottom: 2%;
	padding:        2%;
	width:          100%;
	border:         dotted 1px #000 }

caption {
	font-size:      1.2em;
	font-weight:     bold;
	text-decoration: underline;
	text-align:      left;
	margin:          1%;
	border:          dotted 2px #06c }

th {
	font-size:  1.1em;
	font-weight: bold;
	text-align:  left;
	margin:      1%;
	padding:     2%;
	border:      dotted 1px #06c }

td {
	margin:        1%;
	padding:        2%;
	vertical-align: top;
	border:         dotted 1px #06c }

.classheadline {
	font-size:      1.2em;
	font-weight:     bold;
	text-decoration: underline;
	text-align:      left;
	margin-bottom:   2%;
	border:          dotted 2px #06c }

a:link {
	color:          blue;
	font-weight:     bold;
	text-decoration: none }

a:visited {
	color:          purple;
	font-weight:     bold;
	text-decoration: none }

a:hover {
	color:          purple;
	font-weight:     bold;
	text-decoration: none }

a:active {
	color:          red;
	font-weight:     bold;
	text-decoration: none }
body:
  1. font-family: sans-serif, Arial; Specify the font family for your page. Fonts sans-serif look generally better on screens. Use a serif font for your print layout.
h1, h2, h3, caption und .classheadline:
  1. Padding is removed, all headlines are set in bold.
  2. Font-weight: bold
h1:
  1. font-size: 1.5em. This is the main healine and should have the largest font on this page.
  2. h2, h3, caption und .classheadline:
  3. text-align: left
  4. font-size: 1.2em; all the other headlines get the same font-size and are aligned left.
caption und .classheadline:
  1. text-decoration: underline; all headlines within box 3 are aligned on the left and underlined
Table element th:
  1. font-size: 1.1em
Hyperlinks and external references
  1. a.link, a:visited, a:focus, a:hover, a:active:
  2. font-weight: bold, text-decoration:none
That is it.
back to top (internal reference to anchor in box3)