HTML + CSS Page Header
The page header is usually uniform across the website and contains information such as your brand's logo and the main page heading. In our Twitch Website Builder the header looks like this:
Linux Open Source Twitch Streamer!
Main Page Heading
Although the appearence should look the same on each page, the main page heading should be unique. Google likes consistency within your page. What you name your HTML page (except for index.html), the page title, and the main page heading should all be consistant. They should also accreately describe the information on your page.
The main page heading goes in h1 heading tags and should be simular to your page title.
Traditional Title Format
Primary Keyword - Secondary Keyword | Brand Name
Traditional Main Heading Format
Primary Keyword - Secondary Keyword
h1 in index.html
<h1>Linux Open Source Twitch Streamer!</h1>h1 in style.css
h1 {
color: rgb(223,246,255);
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
font-family: 'Share Tech', sans-serif;
text-shadow: 4px 4px black;
font-size: 50px;
}➼ color - This defines the the color of h1 tags.
➼ text-align - We want to center the text in h1 tags.
➼ display - Display as block. A space will automatically insert after the element and the element will take the full width of the element that contains it.
➼ margin-left - The browser will automatically space the left margin.
➼ margin-right - The browser will automatically space the right margin.
➼ font-family - The font is a Google font called 'Share Tech'.
➼ text-shadow - We want a black text shadow on the font.
➼ font-size - The font size is 50 px (pixels).
For more information on colors: CSS colors
For more information on fonts: CSS Fonts
For more inforamtion on shadows: CSS Box Shadow
Brand Logo
You may also want to place your brand logo in the page header. If you do not have a brand logo, there are some quick easy ways to get one.
Fiverr
Fiverr is an online platform that allows
creators around the world to sell their work. You can buy anything from a website to a rap song. Because Fiverr gives you access to a global market, prices tend to be reasonable.
Fan Contest
A fun and free way is having a fan art content! Let your fans compete to make you a logo. You choose which logo you like best and link the creator on your website.
Open Source Software
If you don't mind rolling up your sleeves and doing the work yourself, there are tons of free open source software packages that can be utilized. I suggest taking a look at Krita.
Now let's look at the HTML code for our image (located in index.html).
<img class="logo" src="media/Daisy-Chain-Cosplay-Logo.png" alt="Daisy Chain Cosplay Twitch Channel"/>The image is placed in an image tag. Our logo is saved in the folder called "media".
The src attribute is equal to the location of the image file (media/Daisy-Chain-Cosplay-Logo.png).
The alt attribute is equal to the text that will display if the browser can not load the image.
Alt text is very important to accessiblity. If a person is visually impaired, the screen reader can read the alt text. Alt text is also important for SEO. This is the way search engines know what it is a picture of. The content on your page, including images, should be consistant with your main page heading and page title.
The class attribute is equal to the CSS class that defines how we want the image to appear.
style.css "logo" class:
Mouse Hover over the ➼ blue text in the description to highlight..logo {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;}➼ max-width - We want the logo to be no wider than the HTML element that holds it.
➼ display - Block display automatically puts a line break after the element and takes the entire width of the element that contains it.
➼ margin-left - Auto means the browser will calculate the space to left margin space.
➼ margin-right - Auto means the browser will calculate the space to right margin space.
For more information on alignment and position: Alignment and Position
For more information on margins: CSS Margins
Header Containers
Now let's look at the full header code.
header in index.html
<!-- Header Container -->
<div class="row header">
<div class="col-5">
<!-- Mobile Hamberger Menu Icon (Mobile Only) -->
<button onclick="mobileMenu" id="menu-link" class="mobile-menu"><i class="fas fa-bars"></i></button>
<!-- Mobile Menu Container -->
<div id="menu-display"></div>
<!-- Top Logo -->
<img class="logo" src="media/Daisy-Chain-Cosplay-Logo.png" alt="Daisy Chain Cosplay Twitch Channel"/>
</div>
<div class="col-5">
<!-- Main Page Heading -->
<h1>Linux Open Source Twitch Streamer! </h1>
</div>
</div>You may notice lots of div containers with class names starting with "col-" and containing "row". This has to do with our responsive CSS. For a full tutorial on the responsive CSS included in the template visit Responsive CSS Tutorial.
The page header also contains our mobile hamberger menu. We will go over that soon, but not on this page.
header in style.css
/* Header Container */
.header{
border-radius: 6px;
width: 97%;
margin: 20px;
box-shadow: 4px 4px 3.5px rgba(100,0,0,.5);
border-radius: 9px;
border-color: rbg(40,80,40);
border-width: 1px;
border-radius: 9px;
background: linear-gradient(to right, rgbargb(132,0,0), rgb(0,35,88));
background-color: darkred;
overflow: auto;
}For more information on border-radius: CSS Border-radius
For more information on borders: CSS Borders
For more information on backgrounds: CSS Backgrounds