Welcome to the
Build It Yourself Website .com

CSS Breadcrumbs

The term "breadcrumbs" goes back to the story of "Hansel and Gretel". Hansel and Gretel were stranded in the woods after leaving a trail of bread crumbs to help them return home. In a website, breadcrumbs are a trail of links that go back to the home page in case a visitor gets lost. The good thing about the web version of breadcrumbs is these breadcrumbs can't get eaten by forest animals.

This section of the cascading style sheet (css) that defines how the breadcrumbs look on your website is considered a "class". A class is identified by the period before the title of the section.

Let's look at the breadcrumbs section.

Since this section is considered a class, it says that anything between "<div class="breadcrumbs">" and the </div> will follow these rules. These rules have to be made into a class because they are not regular elements like the body and h1 sections.

When creating a class, you can call it anything you like in the cascading style sheet (css). Then the rules can be applied in the website by using the <div class=""> and ending the rules with the </div> tag. Just put the name that you chose in the cascading style sheet between the quotes without the period that defined it as a class.

The rules that are currently listed like this. The font will be two times smaller than the font size that is defined in the body section of the cascading style sheet. The content will be on the left side of the section. The content will also be up at the very top of the section. The content must have exactly 2 pixels of spacing all the way around it to prevent it from running up against the objects around it. And the color of any text is to be black ( #000000).

Change the rules to how you want your breadcrumbs to look. Then save your changes and upload it to your web server.

<< Back    Next >>