Lab Styling Tabs with CSS Scott Lydiard www.scottsdevelopers.com Version 5.0
Goal: Create "Tabs" website demonstrating site navigation tabs created with CSS Prerequisites: Knowledge of basic HTML and CSS
Requirements PC (not Mac or iPad) Microsoft PowerPoint (at least version 2010) Programming (text) editor: Sublime Text, Notepad++, or even Notepad. Whatever you are used to.
Goal: Website with Four Webpages index.htm . . . <h2>Home</h2> Good programming style: 1. All file names lower case 2. No spaces in file names 3. Filenames the same as page names, except the "Home" page, which must be index.html . . . <h2>Tuition</h2> . . . <h2>Location</h2> . . . <h2>Contact Us</h2> tuition.htm location.htm contactus.htm
Techniques Build tabs step-by-step by editing <li> CSS styling in tabs.css Changing .html or .css file then refreshing browser with F5 to see results Switching PowerPoint between "Presentation" (Esc) and "Normal" (Shift-F5) view.
Screen Scraping PowerPoint click in yellow text box (the code) ctrl-a (select all) ctrl-c (copy text to Windows clipboard) alt-tab (switch focus to editor) ctrl-v (copy code into .html or .css file)
Suggested make Chrome default browser keep 3 windows open simultaneously: editor, PowerPoint and Chrome switch between windows with alt-tab
Step 1: Start with HTML Template Screen scrape (or type) this into editor: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Your Title Here</title> </head> <body> Your Message Here! </body> </html> Note: This html template file is available on www.scottsdevelopers.com Navigate to HTML | HTML Templates | HTML Simple To screen scrape, 1. Click anywhere in yellow text box in Powerpoint 2. ctrl-a (select all) 3. ctrl-c (copy text to Windows clipboard) 4. alt-tab (switch focus to editor) 5. ctrl-v (copy code into .html or .css file)
Replace "Your Message Here" with Step 2: Update Template Change title to “Tabs” Replace "Your Message Here" with Save on Desktop as index.html <title> is browser window name - appears on browser tabs. <h1> is website name - appears at the top of every web page <h2> is the webpage name - different for each web page <h1> Tabs </h1> <h2> Home </h2>
Test with Chrome site name from <title> element To test with chrome, double-click index.html on the desktop. site name from <h1> element page name from <h2> element
Step 3: Create Site Navigation To index.html add a bulleted menu consisting of four pages: Home, Tuition, Location and Contact Us. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Tabs</title> </head> <body> <h1> Tabs </h1> <h2> Home </h2> </body> </html> As before, screen scrape and paster into editor. Test. <ul> <li> Home </li> <li> Tuition </li> <li> Location </li> <li> Contact Us </li> </ul>
Step 4: Add Links to Site Pages <ul> <li><a href="index.html"> Home </a></li> <li><a href="tuition.html"> Tuition </a></li> <li><a href="location.html"> Location </a></li> <li><a href="contactus.html"> Contact Us </a></li> </ul> Easiest way is to delete current <ul>…</ul> element, replace with screen-scrapped yellow above.
Step 5: Link to site CSS file Add a <link> element index.html: <head> <meta charset="utf-8"> <title>Tabs</title> </head> <link href="tabs.css" rel="stylesheet">
Step 6: Eliminate bullets with CSS Save and close index.html In editor, create new external CSS file for the webpage. Save to desktop as tabs.css. In this CCS file, style the <li> elements to have no list style type: tabs.css: We want to have two files, index.html and tabs.css in two separate windows. If using a programming editor like Notepad++ or Sublime, open up a new file. If using Notepad (which doesn't support two open files in the same session), start another instance of Notepad. li { list-style-type: none; }
Step 7: Eliminate Link Underlining Style the <a> elements with CSS to have no text decoration. tabs.css browser screen: li { list-style-type: none; } a { text-decoration: none; }
Step 8: Display Links Horizontally Add a styling to <li> in tabs.css to change the display styling to inline-block. tabs.css: : li { list-style-type: none; } a { text-decoration: none; display:inline-block;
Check with Chrome
Step 9: Change Web Page Font Add a styling to <body> in tabs.css to change the web page default font properties: tabs.css : body { font-family: Arial, sans-serif; font-weight:bold; font-size:24px; }
Step 10: Style Tabs li { . . . width:200px; } background-color:thistle;
Step 11: Center and Add Padding li { . . . } text-align:center; padding:7px;
Step 12: Add Rounded Corners & Margins around Tabs li { . . . } border-radius: 10px 10px 0 0; margin:10px;
Step 13: Add bisque color hovering li { . . . } li:hover { background-color:bisque; }
Step 14: Make all Link Text Black, except Mouse-Down Text Red a:visited, a:hover, a:link { color:black; } a:active { color:red;
Step 15: Center Everything on Page h1, h2, ul { text-align: center; }
Step 16: Create Site Web Pages Make 3 copies of the site Home page (index.html) on the Desktop named as below: Change the <h2> in each new file: Example: index.html tuition.html location.html contactus.html <h2>Tuition</h2>
Step 17: Test Like CRAZY!!! Verify the tab navigation works among the four pages: index.html tuition.html location.html contactus.html
Step 18: Modify Menu for Selected Page Edit each of the four files, changing the menu item for the current page by: Deleting the <a> link (so page doesn't link to itself) Add an id="selected" to the <li> element. Example for the home page index.html: <ul> <li> <a href="tuition.htm"> Tuition </a></li> <li> <a href="location.htm"> Location </a></li> <li> <a href="contactus.htm"> Contact Us </a></li> </ul> <li id="selected" Home </li>
Step 18: Modify Menu for Selected Page Example for page tuition.html: <ul> <li><a href="index.html"> Home </a></li> <li id="selected"> Tuition </li> <li><a href="location.html"> Location </a></li> <li><a href="contactus.html"> Contact Us </a></li> </ul>
Step 19: Style Selected Page li#selected { background-color:brown; color:white; }
Step 20: Test Like CRAZY!!! Verify the tab navigation works among the four pages: index.html tuition.html location.html contactus.html