CSS

For larger websites, need to organise common styling. With hundreds or more pages, you will want a common look and feel.

Cascading Style Sheets
CSS3
Like HTML, can "view source" to see CSS.

Reference

CSS reference

Where to put the CSS

CSS in external file:

<head>
<link rel=stylesheet type="text/css" href="file.css">
</head>

CSS defined inside web page:
```
<style>
... CSS code ...
</style>
```

CSS defined for elements of page:

<a href="file.pdf"><img  style="border:none"  src="Icons/pdf.gif"></A> 

<audio  style="width:80%"  controls>

The name "Cascading" Style Sheets refers to the CSS priority scheme defining which styling has priority.

Examples

See CSS for this site.

Set font for site:

 
body
{
 font-family:   Georgia, Verdana, "Times New Roman", Sans-serif; 
}

Set special links:

 
a.main-navigation 
{
  color: navy ;
  font-weight: bold ;
  text-decoration: none ;
}

a.main-navigation:hover    
{
  text-decoration: underline ;
}

Use these like:

 <a class='main-navigation' href=URL> TEXT </a>

and you get a link that is navy, bold, and underlined only if you hover on it.

Every image on the site is given a border:
```
 
img 
{
 border: 1px solid black ;
}
```

Rounded black button that changes color on hover:

 
button.normbutton 
{
 	padding: 3px 10px;    /* space around the text on the button */
	border-radius: 5px;   /* rounded corners */
     	color: white;
   	background-color: black;		 
}

button.normbutton:hover 
{
	color: white;		 
   	background-color: darkcyan;  	 
}

See CSS Selectors - the many different ways to select the item to apply the style to.

Browser caching

Two issues can make changing CSS tricky:

Cached CSS
- Browsers cache content to speed up browsing.
- This can be a problem when developing with multiple separate files (like HTML file plus CSS file).
- Reload HTML file may not reload the linked CSS file. It may use the cached CSS.
- See how to force reload the page and all associated files.
Distributed file system
- A further problem is the distributed file system at DCU. This allows you login on any machine in any room and edit your files.
- You edit a file on one machine. It takes a few seconds before the Web server picks up the new file through the distributed file system. Just have to wait.

Server caching

You cannot ask all your users to force reload.
One solution when making changes to CSS is to change the server so that CSS is never cached.

Error tolerance

Bad CSS:
- Like with bad HTML, browsers tolerate/workaround bad CSS.
- CSS spec even defines how clients should deal with bad CSS.
- See notes in CSS3.

Change the CSS of any page

Let's say you are browsing a page and do not like its styling. e.g. Links are hard to see.
You can change the styling of the page yourself in the browser.
Ways of doing this:

Development tools change CSS.
In the browser development tools section, you may be able to directly edit the CSS.
e.g. Chrome - Developer tools - Elements - directly edit the CSS of elements

JavaScript change CSS.
In the browser JavaScript console (found in development tools), JavaScript can change CSS and add/remove/hide HTML elements.
Type these JavaScript commands in console:

 
// change style of body
document.body.style.backgroundColor = "navy";

// change style of all links
var a = document.getElementsByTagName('a');                           // get array of links
for ( var i=0; i < a.length ; i++ )  { a[i].style.color = "red"; }    // go through array 

// you can also add a style element, containing normal CSS, to the page with JS

// you can also use jQuery library to easily modify CSS

Browser extension.
To avoid having to repeatedly do the above, you can use browser extensions to permanently change the look of other sites.
The browser extension adds CSS to override the CSS coming from the site.
Example: Using the Stylish browser extension to "fix" a site that has hard to read link colours.
Create new style, and add CSS to the editor.
Can make it apply to all sites or one site (either via a rule or in an editor dropdown).
In this example, I needed to see which links I had already visited, so I changed link style on the site to this:
```
 
a:link  
{
  color:            navy !important ;    /* !important means over-ride all other CSS */ 
  font-weight:      bold !important ;
  text-decoration:  none !important ;
}

a:visited
{
    color:  purple !important ;
}

a:hover   
{
  text-decoration: underline !important ;	  
}
```