tags: CSS

More styling with CSS

Adding classes to HTML

So you have your html doc and you reuse tags. Like say you have 2 div elements on your page. But you don't want them to both look the same. When you go to style you don't want to use inline incase you like the styling and may want to use it later so lets add a class to our div.

<div class='about'>
    <h2>All about me</h2>
    <img src='images/melissa.jpg' alt='Photo of Melissa' />
</div>
<div>
    <p>Melissa is an instructor at Coding Dojo, as well as a Wife, Mother, and US Navy Veteran,</p>
    <p id='hobbies'>Hobbies that I love to do are Crocheting, and Gardening. I love to build websites when I can or just redo old ones to make them look better.</p>
</div>

div {
    background-color: black;
    width: 400px;
    color: white;
}
p {
    text-align: center;
}
.about {
    background-color: blue;
    color: black;
}
#hobbies {
    font-style: italic;
}

Looking at the above 2 sections of code lets break it down.

1. 1st we have 2 div sections.
   1. #1 as an h2 and and img inside it and was given a class of about.
   2. #2 has 2 p tags but 1 was given the id of hobbies
2. In our CSS we gave all divs a background color of black, width of 400px and a font color of white.
   1. But with that about class we said no we want this to have a background color of blue and font colro of black. However since we didn't change the width when we added attributes to the about class the width will still be what all divs are.
3. We gave all p tags the text align center attribute so that all text contained will be centered.
   1. Then we have that id of hobbies. Here we said we wanted the font to be italicized. However since we dind't change at anything else it too will still have the attributes of text align center as well.

Notice how we listed them in the CSS code.

• All root elements are called just by their tag
  • p, div, nav, header, footer, h1, etc
• Classes however can't be listed the same way they need a . infront
  • .about .container things like that
• Id's also can't be listed the same they use the #
  • #hobbies, #special

Ok wait a minute …

In html we use the id and # but it wasn't for styling

ID should only be used for styling if it is a 1 shot deal. As you can only use id once per page. Typically you will use id for JavaScript (to call a function), or as a way to create a link on your page. Say you have a really long page any you want the user to beable to click a link that takes them to a section that is further down on the page. You can use id. Lets add some navigation to our code from above.

<header>
    <h1>About Melissa</h1>
    <nav>
        <a href='index.html'>Home</a>
        <a href='#projects'>Projects</a>
    </nav>
</header>
<div class='about'>
    <h2>All about me</h2>
    <img src='images/melissa.jpg' alt='Photo of Melissa' />
</div>
<div>
    <p>Melissa is an instructor at Coding Dojo, as well as a Wife, Mother, and US Navy Veteran,</p>
    <p id='hobbies'>Hobbies that I love to do are Crocheting, and Gardening. I love to build websites when I can or just redo old ones to make them look better.</p>
</div>
<section id='projects'>
    <h3>Here you will find a list of projects that I have done</h3>
</section>

Here you can see in the nav section 1 we have 2 links

• index.html
  • This is a typical link to another html document in the root folder, in this case if this was about.html it would take us back to the home landing page which is always index.html
• #projects
  • This means that the link is not going to another doucment but someplace else on this about.html document.

Later on in the document you can see there is a section element with an id of projects. So when that nav link is clicked this is where the link will take them.

*** Side note. Be careful using these internal links with out a back to top link or folks can get frustrated that they can click down to a section but not back to the main navigatin menu.