Select Lesson
Float
Property
5 min
Webpage structure tags —header
, footer
2 min
Additional structural tags nav
, aside
, section
, article
, figure
3 min
Header styles
5 min
Social Buttons
5 min
Lesson 20. Style header
, footer
& section
15 min
Section Styles Quiz
5 min
Image Manipulation
20 min
web7
Section Styles HTML/CSS
Level OneFloat
Property
5 min
Webpage structure tags —header
, footer
2 min
Additional structural tags nav
, aside
, section
, article
, figure
3 min
Header styles
5 min
Social Buttons
5 min
Lesson 20. Style header
, footer
& section
15 min
Section Styles Quiz
5 min
Image Manipulation
20 min
web7
60 min
Section styles (optional)
This part explains how to style sections and some extra CSS properties, like float.
Concepts
Float
Property
Float is a CSS positioning property. It takes an element from the normal flow and positions it along the left or right side of its container. The text and other inline
elements will then wrap around it.
Before float: Take a look inside the section of the web page. This is the normal flow of text and image elements, before float has been applied.
After float: The image and figure is pushed to the left and right and the text wraps nicely in between.
See float
:
You may also use this for whole sections like in the example below, by either setting the <section>
to float:left
or the <aside>
element to float:right
.
Concepts
Webpage structure tags —header
, footer
The <header>
appears at the top of a website's page and usually contains the site's logo and navigation links.
The <footer>
appears at the bottom of the page and normally contains information about the author, copyright data or links to related documents.
Using CSS we are able to customize our header and footer to control the overall appearance for easy of navigation and visual appeal.
Concepts
Additional structural tags nav
, aside
, section
, article
, figure
There are many tags in HTML5 that are frequently used to help give structure to the content on a page. They also are convenient when we are formatting the content using CSS.
- The
<nav>
element, is used to contain primary navigation links. - The
<section>
element, contains a grouping of related content in a document, such as chapters, headers, footers, or any other sections of the document. - The
<article>
element, not pictured, is used to contain stand-alone information such as blogs, new articles, encyclopedia entries. - The
<figure>
element, is used for illustrative figures, such as images or charts, as well as the caption. - The
<aside>
element, can be used to contain added information, likefigures
and can be used as a side panel.
Concepts
Header styles
There are many different ways to customize the header of a page.
We will try using the skills we have learned so far during this course as we add CSS to customize this simple HTML code and create a nice header design.
Add HTML code:
h1
is used for the title of our website. Underneath we have a navigation tag, grouping all the menu links that we wish to include in the heading.
Adding CSS —h1{}
Now lets see what happens when we add a few styles to our <h1>
element.
CSS code:
What does it mean?
We only want to target the heading
in the header
section.
We do that by specifying that we want the header h1{}
.
Here we have added a single image to the background of the heading 1.
We have styled the font, adjusted margin and padding and aligned the text.
Adding CSS —header
Now lets see what happens when we add a few styles to our header section.
What does it mean?
Here we have added a image from our folder to the background of the header and it is automatically repeated. We have set a color for all of the text within the header as well as the font weight and family. We have decreased letter spacing for all text inside of the header and We have set the height of the header as well as the padding. The position has been fixed and the width set to 100%. All text within the header are transformed to lowercase.
Adding CSS —nav
, :hover
, a
, ul
, li
Now lets see what happens when we add a few styles to our header section.
What does it mean?
We first set the height of our navigation bar <nav>
.
We then set margin, padding and list style for all unordered lists within the navigation.
The links float to the left and the margin and padding is set. Text decoration is removed and the alignment is to the left.
Font size and color is set.
Finally css has been added to add a hover
effect when users use the links. Color of text and background will change when hover occurs.
Adding CSS —<body>
Do you notice the little white gap around the left and top of our header. The body of a browser has padding and margins auto added sometimes. To remove it you specify 0 for these properties.
Footer Styles
Now is time to customize our <footer>
. The following is the HTML code for our basic footer.
HTML code:
Here we have within our footer tags, the text created by Code Avengers and a copyright symbol and date. Code Avengers is linked to the website.
Adding CSS —footer
Now lets see what happens when we add a few styles to our footer
CSS Code:
What does it mean?
In this CSS code we have added a image from our folder to the background of the footer and it is automatically repeated. There has been a border added, color added to the text and a font size added. Margin and padding have been set, the text is aligned and the width has been set.
A color has been set for links inside of the footer and a hover effect has also been set.
All the code
- <style>
- footer{
- background: seaGreen url(/images/textures/light1a.png);
- border: inset 1px;
- color: #FFFFFF;
- font-size: smaller;
- margin:0;
- padding: 10px;
- text-align: center;
- width: 100%;
- }
-
- footer a {
- color: #FFFFFF;
- }
-
- footer a:hover {
- color: #999999;
- }
- body {
- margin:0;
- padding:0px;
- }
- nav {
- height: 70px;
- }
- nav ul {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- nav a {
- float: left;
- margin: 5px 15px 5px 5px ;
- padding: 5px 2px 10px 0px;
- text-decoration: none;
- text-align: left;
- font-size: 20px;
- color: #5cb48c;
- }
- nav a:hover {
- color: #1A1A1A;
- background: rgb(255, 255, 255);
- }
- header {
- background: seaGreen url(/images/textures/light1a.png);
- color: #999999;
- font: normal small Georgia, "Times New Roman", Times, serif;
- height: 70px;
- letter-spacing: -2px;
- padding: 10px 0px 30px 20px;
- text-transform: lowercase;
- width: 100%;
- }
- header h1 {
- background: url(/images/banner-logo-html-css-01-01.png) no-repeat center;
- background-size: 60px;
- font-size: 30px;
- font-weight: normal;
- margin: 0;
- padding: 30px 0px 0 10px;
- text-align: left;
- }
-
- </style>
-
- <header>
- <h1>Focus Studio Photography</h1>
- <nav>
- <ul>
- <li><a href="index.html">Home</a>
- <li><a href="photos.html">My Photos</a>
- <li><a href="contact-us.html">Book us</a>
- <li><a href="shop.html">Our shop</a>
- </ul>
- </nav>
- </header>
- <h1>Welcome</h1>
- <footer>
- Created by<a href="http://codeavengers.com">Code Avengers </a> © 2017<br>
- </footer>
HTML/CSS 1 Lesson
Lesson 20. Style header
, footer
& section
Code Avengers Quiz
Section Styles Quiz
Extension: Concepts
Image Manipulation
These are some cool free sites that you can manipulate images on.
If you want a hardcore program that can do a lot of things but has a lot of learning.
We would recommend GIMP (free) or Photoshop (professional)
Extension:
web7
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F
Concepts
Social Buttons
Facebook
Note: The Facebook button won't appear on the phone unless you refresh the Code Avengers web page, but it will appear if you click the link at the top of the phone.
Paste the following code into the footer of your page:
<div class="fb-like" data-href="https://codeavengers.com/c/codename/business.html"
data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div>
Then paste the following code at the end of your page:
<div id="fb-root"></div>
<script src="/js/facebook.js"></script>
Then change the href attribute to the address of your business profile page, shown in the results box
Twitter
Paste the following code into the footer of your page:
<a href="https://twitter.com/share" class="twitter-share-button" data-via="CodeAvengers"
data-url="https://codeavengers.com/c/codename/business.html">Tweet</a>
<script src="/js/twitter.js"></script>
Then change the data-url attribute to the address of your business profile page, shown in the results box.