CSS with...

26 April 2009

CSS stands for Cascading Style Sheet - and is the area where we style the rest of the website by tag, class or id.

On a HTML document it will link to the CSS with a link tag at the top:
<link rel="stylesheet" href="/style_sheet_path/style_sheet_file.css" type="text/css" />

This tag will load the CSS with the styling for all the page elements by tag, class or id.

If you're writing a website in PHP then the styling can be added by CSS with the same code as above, however if it's within the PHP area then the line will need to be echoed like:
echo "<link rel="stylesheet" href="/style_sheet_path/style_sheet_file.css" type="text/css" />";

Editing CSS with JavaScript is also common on websites, like having an area of text held in a <div> being hidden, but then showing the <div> area when a link is clicked.

Another common use of CSS with websites is when using sub navigation on drop downs. The way this will work is to use <ul> tags for the navigation and then embedding <ul> tags within the first <ul> for the sub navigation and setting the second <ul> to "display:none" until the hover or focus on the <li> tag within the first <ul> area will show the second <ul> area.

If you can't use CSS with a website then you may need to keep the CSS within the same HTML document by using the <style> tag at the top of the page and declaring the element's styles here.

It is always better to define your CSS with an external file though as this will mean only editting one file and it will effect every page linked to the CSS file.


Please leave a comment using the form provided.