Orlando Web Design: HTML5 for Beginners Lesson 4

html 5 lesson4 - Creating a simple layout with css

Orlando Web Design & Development

1. Styling Links

Links must be style with the “LOVE HATE RULE”

  • a:link is used to indicate that the link has been unvisited.
  • a:visited is used to indicate that the link has been visited.
  • a:hover indicates that a cursor is pointing at the link
  • a:active pseudo-class indicates that the links are active.


 a:link {color: #FF0000} 
 a:visited {color: #00FF00}
 a:hover {color: #FF00FF} 
 a:active {color: #0000FF}

Common styles:

  • text-decoration: none or underline
  • color: red
  • background-color: red

2. Adding Google Fonts

a. Go to https://fonts.google.com/

b. Search and find a font you like

c. Once you find a font, click on the top right “+” to select the font

select google font

d. After the font is selected, click on the black bar with the title “family selected”, at the bottom of the page.

google font family


e. To embed the font into your web page, copy the code and add it in-between the <head> tags

fonts css

<link href="https://fonts.googleapis.com/css?family=Montserrat+Alternates" rel="stylesheet">

f. Add the font name to your CSS styles

googel fonts css


h1{font-family: 'Montserrat Alternates', sans-serif;, Arial, serif; font-weight: 400; }

g. Preview the webpage in the browser to see the Google font

3. The box model

In CSS, the term “box model” is used when talking about design and layout:

CSS box-model

  • Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
  • Border – A border that goes around the padding and content. The border is affected by the background color of the box
  • Padding – Clears an area around the content. The padding is affected by the background color of the box
  • Content – The content of the box, where text and images appear

Width and Height:

To know the full size of the element, you must also add the padding, border and margin.

css box-model width & height

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

4. Inspecting with Browser Tools

Most browsers offer web development tools where you can edit, debug, monitor  and monitor CSS, HTML, and JavaScript live in any web page.



5. Creating a basic layout with CSS





Lengths, percentages, and the predefined value auto.margin-top:100px;




Shorthand: declare all the margin properties at once.

margin: Topvalue Leftvalue BottomValue RightValue

margin: 10px 20px 5px 15px;

margin: 0px auto;


Lengths, percentages, and the predefined value auto.padding-top:100px;
padding -bottom:100px;
padding -right:50px;
padding -left:50px;
Shorthand: declare all the margin properties at once.

padding: Topvalue Leftvalue BottomValue RightValue

padding: 10px 20px 5px 15px;

padding: 10px 20px;

a. <body> Tag

margin: 0px;
padding: 0px;

b.<div> tags

The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS.

Centering a <div> tag

A <div> tag can be used as a wrapper to contain a webpage. To center a <div> tag use left and right margin “auto”:

margin: 0 auto;
height: auto; 

c. Display Property

The display property defines how a certain HTML element should be displayed.
Please note: Elements using the property display “none” will not take up space on the page.





none, block, inline, inline-blockdiv { display:none; }

div { display:inline; }

d. Float Property

The float property specifies whether or not a box (an element) should float.
Absolutely positioned elements ignores the float property.





left, right, nonediv { float:left; }

e. Clear Property

The clear property specifies which sides of an element where other floating elements are not allowed.





left, right, none, both, inheritdiv { clear:left; }

f. Overflow

The overflow property specifies what happens if content overflows an element’s box.





visible, hidden, scroll, auto, inheritdiv {overflow:scroll;}

g. Visibility Property

The visibility property specifies whether or not an element is visible.
Please note: Invisible elements take up space on the page.





visible, hidden, inheritdiv { visibility:hidden; }

h. Styling a Horizontal Menu

To style a horizontal <ul > menu located in the <nav> tag add the following styles:

nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;

nav li{
display: inline;
margin: 0px;
color: white;/*Color of the text*/
font-weight: bold;
font-family: Verdana, Helvetica, sans-serif ;

nav li a:link{
float: left;
display: block;
text-decoration: none;
margin: 0px;
padding: 15px;/*padding inside each tab*/
border-right: 2px solid white; /* line divider between tabs*/
color: white;/*color of the link*/
background-color: black; /*background of the tabs */

nav li a:visited{
color: #eeeeee;
display: block;
border-right: 2px solid white; /* line divider between tabs*/

nav li a:hover{
background-color: gray; /*background of tabs for hover state*/
display: block;
border-right: 2px solid white; /* line divider between tabs*/

nav li a:active{
color: white;
display: block;
border-right: 2px solid white; /* line divider between tabs*/
Category: Orlando Web Design Tags: , , No Comments


M5 Design Studio

We are a small, but creative and passionate team of designers and developers specializing in web design, graphic design, branding & digital marketing.

Google Chrome Is Getting Rid Of Cookies

Google Chrome is getting rid of cookies: The Future of Digital Marketing in a Cookieless World

Digital Marketing Agency The digital marketing landscape is undergoing a major transformation with the impending dep
Orlando WordPress Developers

WordPress Plugin ACF 5.0. is now Compatible with Gutenberg!

Orlando WordPress Developer With Gutenberg's release just around the corner, we all want to make sure our WordPress web

WordPress Coding Standards 1.1.0 are Now Available

Orlando WordPress Developer If you are a WordPress Developer, one of the major challenges in today’s development univ

Comments are closed.