CSS: Cascading Style Sheets

Adding Style to a Web Page


More on Web Design

Here's another web design project we did following our games website, which was to create a James Bond website complete with cars, girls, villains and even two of Bond's favourite vices: cigars and liquor. (Click the image to follow the link):

Bond screen snip

Figure 8: James Bond Website.

CSS: Notes

Behold a personal project of my own, which also utilises basic CSS styling to give it more visual appeal. (Click the image to follow the link):

Frey's lovesickness

Figure 9: The Journey of the Lay of Skirnir (An old Norse poem).

CSS Selectors

Quotes are mainly from Andrew R. (2009). The CSS Anthology: 101 Essential Tips, Tricks and Hacks, Third Edition, SitePoint.

Tag selectors:

Pseudo-class selectors:

Class selectors:

Contextual selectors:

ID selectors:

CSS Properties

Please refer to http://www.w3schools.com/cssref/ for the specifics of these properties, and note that different versions of CSS specify (or, "define") different properties. For now, here is just a (more or less) complete list for CSS 3, the current version of CSS:

Excursus: More Advanced Material

If you were perceptive, you would have noticed that there was a search bar at the top right corner of every page of the Bond website except the home page; one that did nothing when you tried to use it. Shortly we will be doing some very interesting things with that little search bar, i.e. linking it to a database via PHP. Here's the code:

<form action ="../BOND_TESTBED/search.php" method ="post" target="_blank">
<input type="hidden" name="txt_database" value="BondDB">
<input type="hidden" name="txt_sql" value="SELECT * FROM tblGirl WHERE (fldFirstName LIKE ?) or (fldLastName LIKE ?);">
<input type="text" name="txt_search">
<input type="submit" value = "Search">

Once we get it up and running, then, dear reader, we will be sailing the high seas of web interactivity!

Back to CSS, you may find these links useful for study and practical applications:

  1. http://www.w3schools.com/css/default.asp
  2. https://jigsaw.w3.org/css-validator/
(Use this second one whenever possible and you'll get either a cool icon to put on your web page, or a... series or errors and warnings that you'll need to fix.)

This page is CSS compliant! =)

Valid CSS!

© 2016-2020 Leo Coroneos
Certificate IV in Information Technology
South Regional TAFE, Albany WA Australia