Lab Styling Tabs with CSS Scott Lydiard www
Lab Styling Tabs with CSS Scott Lydiard www. scottsdevelopers. com Version 5. 0
Lab Styling Tabs with CSS Goal: Create "Tabs" website demonstrating site navigation tabs created with CSS Prerequisites: Knowledge of basic HTML and CSS
Lab Styling Tabs with CSS Requirements • PC (not Mac or i. Pad) • Microsoft Power. Point (at least version 2010) • Programming (text) editor: Sublime Text, Notepad++, or even Notepad. Whatever you are used to.
Lab Goal: Styling Tabs with CSS Website with Four Webpages index. htm. . . <h 2>Home</h 2>. . . <h 2>Tuition</h 2>. . . tuition. htm . . . <h 2>Location</h 2>. . . <h 2>Contact Us</h 2>. . . location. htm contactus. htm
Lab Styling Tabs with CSS Techniques • Build tabs step-by-step by editing <li> CSS styling in tabs. css • Changing. html or. css file then refreshing browser with F 5 to see results • Switching Power. Point between "Presentation" (Esc) and "Normal" (Shift-F 5) view.
Lab Styling Tabs with CSS Screen Scraping Power. Point • 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)
Lab Styling Tabs with CSS Suggested • make Chrome default browser • keep 3 windows open simultaneously: editor, Power. Point and Chrome • switch between windows with alt-tab
Lab Styling Tabs with CSS 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>
Lab Styling Tabs with CSS Step 2: Update Template • Change title to “Tabs” • Replace "Your Message Here" with <h 1> Tabs </h 1> <h 2> Home </h 2> • Save on Desktop as index. html
Lab Styling Tabs with CSS Test with Chrome site name from <title> element site name from <h 1> element page name from <h 2> element
Lab Styling Tabs with CSS 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> <h 1> Tabs </h 1> <h 2> Home </h 2> <ul> <li> </ul> </body> </html> Home Tuition Location Contact Us </li>
Lab Styling Tabs with CSS Step 4: Add Links to Site Pages <ul> <li><a </ul> href="index. html"> href="tuition. html"> href="location. html"> href="contactus. html"> Home Tuition Location Contact Us </a></li>
Lab Styling Tabs with CSS Step 5: Link to site CSS file Add a <link> element index. html: <head> <meta charset="utf-8"> <title>Tabs</title> <link href="tabs. css" rel="stylesheet"> </head>
Lab Styling Tabs with CSS 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: li { list-style-type: none; }
Lab Styling Tabs with CSS Step 7: Eliminate Link Underlining • Style the <a> elements with CSS to have no text decoration. tabs. css li { list-style-type: none; } a { text-decoration: none; } browser screen:
Lab Styling Tabs with CSS 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; display: inline-block; } a { text-decoration: none; }
Lab Check with Chrome Styling Tabs with CSS
Lab Styling Tabs with CSS 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: 24 px; } :
Lab Styling Tabs with CSS Step 10: Style Tabs li {. . . width: 200 px; background-color: thistle; }
Lab Styling Tabs with CSS Step 11: Center and Add Padding } li {. . . text-align: center; padding: 7 px;
Lab Styling Tabs with CSS Step 12: Add Rounded Corners & Margins around Tabs } li {. . . border-radius: 10 px 0 0; margin: 10 px;
Lab Styling Tabs with CSS Step 13: Add bisque color hovering li {. . . } li: hover { background-color: bisque; }
Lab Styling Tabs with CSS Step 14: Make all Link Text Black, except Mouse-Down Text Red a: visited, a: hover, a: link { color: black; } a: active { color: red; }
Lab Styling Tabs with CSS Step 15: Center Everything on Page h 1, h 2, ul { text-align: center; }
Lab Styling Tabs with CSS Step 16: Create Site Web Pages • Make 3 copies of the site Home page (index. html) on the Desktop named as below: index. html tuition. html location. html contactus. html • Change the <h 2> in each new file: Example: <h 2>Tuition</h 2>
Lab Styling Tabs with CSS Step 17: Test Like CRAZY!!! • Verify the tab navigation works among the four pages: index. html tuition. html location. html contactus. html
Lab Styling Tabs with CSS 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 id="selected" Home </li> <a href="tuition. htm"> Tuition </a></li> <a href="location. htm"> Location </a></li> <a href="contactus. htm"> Contact Us </a></li> </ul>
Lab Styling Tabs with CSS Step 18: Modify Menu for Selected Page Example for page tuition. html: <ul> <li><a href="index. html"> Home <li id="selected"> Tuition </a></li> <li><a href="location. html"> Location </a></li> <li><a href="contactus. html"> Contact Us </a></li> </ul>
Lab Styling Tabs with CSS Step 19: Style Selected Page li#selected { background-color: brown; color: white; }
Lab Styling Tabs with CSS Step 20: Test Like CRAZY!!! • Verify the tab navigation works among the four pages: index. html tuition. html location. html contactus. html
Lab Styling Tabs with CSS
- Slides: 31
