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.

Example:

 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

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

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.

firebug_CSS_colors

firebug_CSS_colors2

5. Creating a basic layout with CSS

PROPERTY

POSSIBLE VALUES

EXAMPLES

margin

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

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

Shorthand: declare all the margin properties at once.

margin: Topvalue Leftvalue BottomValue RightValue

margin: 10px 20px 5px 15px;

margin: 0px auto;

padding

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

body{ 
margin: 0px;
padding: 0px;
background-color:#cccccc
}

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”:

#wrapper{
width:960px;
margin: 0 auto;
height: auto; 
overflow:hidden
 }

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.

PROPERTY

POSSIBLE VALUES

EXAMPLES

display

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.
Note:
Absolutely positioned elements ignores the float property.

PROPERTY

POSSIBLE VALUES

EXAMPLES

float

left, right, nonediv { float:left; }

e. Clear Property

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

PROPERTY

POSSIBLE VALUES

EXAMPLES

clear

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

f. Overflow

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

PROPERTY

POSSIBLE VALUES

EXAMPLES

overflow

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.

PROPERTY

POSSIBLE VALUES

EXAMPLES

visibility

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-size:14px;
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 */
height:20px;
}

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
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... Read More »

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... Read More »
Orlando Web Design Company

How To Choose An Orlando Web Design Company

Orlando Web Design Company Choosing the best Orlando website design company for your businesses can be difficult. Shoul... Read More »