Guide to Basic CSS Styling for Recycle Information Website
This guide provides tips and examples for utilizing basic CSS styles to enhance the appearance of a website dedicated to recycle information. Topics covered include creating a top navigation bar, using external style sheets, setting margins, styling navigation elements, incorporating images, and organizing content with HTML tags. By following these suggestions and hints, you can effectively style your recycle information website to attract and engage visitors.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
LAB 3 Review, Suggestions and Hints Basic CSS v1.02
<nav class=topnavbar> No white space Two images and an <h1>
EXTERNAL STYLE SHEETS Please all of your styling in the file: recycle_style.css <head> <title>City Recycle Information</title> <link rel= stylesheet href= recycle_style.css > </head>
TOP MARGIN body { margin: 0; } * { margin: 0; } OR
/* recycle_style.css */ /* recycle_style.css */ nav { background: #fbefb3; height: 42px; width: 100%; } * { margin : 0; } .hcenter { width: 100%; text-align: center; } nav ul li { list-style: none; } nav ul li a { float: left; text-decoration: none; border: 2px solid gray; padding: 0 20px 0 20px; margin: 0 15px 0 15px; }
recycle_style.css index.html <nav> <a href="#">Recycle Centers</a> <a href="#">Resources</a> <a href="#">Composting</a> <a href="#contact">Contact Us</a> </nav>
recycle_style.css index.html <h1 id="title"> #title { text-align: center; } <img alt="Recycle Logo" src="images/recycle_logo.png > #title img { vertical-align: middle; } Recycle <img alt="Recycle Logo src="images/recycle_logo.png > </h1>
<div id="contents"> <ul> <li>Glass</li> <li>Paper</li> <li>Plastic</li> <li>Aluminum foil (clean)</li> <li>Cardboard (fold or break into small pieces)</li> </ul> </div> #contents { line-height: 3em; } #contents ul li { list-style-image: url( images/greenarrow.png ); }
