CSS Project 2 – Styling our website header

CSS

0 Comments

Amy, who has read our previous tutorials, was trying to practice her HTML and CSS by recreating the delidded.com header, which appears at the top of all of our pages. However, she didn't know enough CSS at this point to finish it.

Let's learn the necessary CSS to help her finish it.

Here's what the header should look like:

What she has so far

Here's what the page looks like at this point:

Current HTML code (with comments)

<!-- This is a comment in HTML -->

<div id="header">
    <a id="logo" href="/">
        <img src="https://www.delidded.com/logo.png" alt="Delidded.com Logo" height="36">
    </a>

    <!-- Using ul tag to hold menu links, which makes them easier to style. -->
    <ul id="menu">
        <li><a href="/html/">HTML</a></li>
        <li><a href="/css/">CSS</a></li>
        <li><a href="/javascript/">JavaScript</a></li>
    </ul>

    <!-- 2nd menu that will be on the right side of the header -->
    <ul id="menu-right">
        <li><a href="/login/">Login</a></li>
    </ul>
</div>

<div id="main">
    <h2>Delidded Web Design</h2>

    <p>Welcome to <span class="domain">delidded.com</span>.</p>
</div>
HTML comments (Line 1)
Like CSS, HTML also allows you to put comments in your HTML code. Comments are not displayed on the page and are strictly to help the developer understand their code better.
Even though comments are not displayed in the browser, they are still sent to each person that views your page (they are visible in the source code, which can be seen by right clicking any web page). So, I usually remove comments from the production version of a page to keep page sizes as low as possible.

Current CSS (with comments)

/*
The body tag has some margin by default on most browsers,
which will make our blue header have some white space around the edges,
so we're removing the margin.
*/
body {
    margin: 0;
}

/* Make the background light blue for our div with id="header" */
#header {
    background-color: #2DAACD;
}

/* Add some space on each side of the logo */
#logo {
    margin-right: 20px;
    margin-left: 10px;
}

/* Remove default border around images on some browsers */
#logo img {
    border: none;
}

/* Remove default margin and padding from both menu ul tags */
#menu,
#menu-right {
    margin: 0;
    padding: 0;
}

/* Stop menu links from touching */
#header ul li {
    margin-right: 20px;
}

/* Make all header links white */
#header a {
    color: white;
}

/* Give our main section some space between the text and the browser edges. */
#main {
    padding: 10px;
}

.domain {
    color: green;
    font-weight: bold;
}
Styling multiple selectors the same (Line 27)
You can style multiple selectors the same way by separating them with commas.
This code styles both #menu and #menu-right.
#header ul li selector (Line 34)
This selector styles all li tags that are inside a ul that is also inside a div with id="header".

The first thing we should probably fix is the menu (right now all the links are on top of each other). We'll need a new CSS property called display, so let's go over that now.

Leave a Comment