Cascading Style Sheets or CSS is a language style sheet in which defines how Html aspects should be shown. It was designed to split the content material from the design. This way, it enables you to modify the appearance and layout of one or more web pages on your site by modifying a particular file. In addition, it allows you to modify web site content without altering the layout, fonts and colors. It therefore offers more flexibility and control in content presentation and decreases repeating processes.
Besides being flexible, Cascading stylesheet helps position in search results. Robots can get directly to the content because it has been separated on the design. Web-sites with Css furthermore load quicker which enable it to be displayed on different media like the printer and PDA.
Simple Explanation:
1. Put in a class to every Body tag on each page you want to style the ‘current’ links for.
2. Add a class to the item list of which consist of your links on each and every web page you wish to style the current links.
3. There is no step c.
4. I forgot testing, test it.
5. Now, in case you are like me – fix and go back the typo’s which are messing everything up…
6. Test again
7. Okay, that’s 6 steps rather than 2. However, if you’re good, it needs to be two…
Exactly what we are properly undertaking here as 123 Web Design Bournemouth is developing an ‘AND’ logic gate in our CSS for each page. I think.
Sure, this means as many added lines of code in your css as you have pages. But do not be troubled, it is a copy/paste job, then change a little.
The logic, in case I have it right, is something like this:
When page Class = “current”, And list item Class = “current” Next
Set up style as bold, whitened, no underline
ELSE Do F.A.
ENDIF
Strategy: Put in a class to the Body tag of each and every page:
(tags removed – simply add in the relevant starting & closing tag brackets)
body class=”home”
body class=”about”
Then include a class to each li tag in your list menu:
div id=”links”
li class=”first” a href=”index.html” Home /a /li li
class=”second” a href=”about.html” Home /a /li
The Css goes like this:
body.home #links li.first {font-style:bold;colour:FFF;text-decoration:none}
Or whatever styling you would like for the current page.
The link on your home page should be white, with no underline, and bold.
Repeat all over again for your other webpages, ie:
body.about #links li.second{ font-style:bold;colour:FFF;text-decoration:none}
You are the man here, you tell the Cascading stylesheet which page’s (about, or home) body Class, and which Link’s Class need to receive the styling. Easy if you don’t have lots of Bud’s and it is 3am.
Obviously, you might choose to select jQuery or another client side scripting, server-side script, or Spry if you are using Dreamweaver.
That is your shout.
