Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

Online coding site: Ancient Brain

coders   JavaScript worlds

Search:

CA170      CA318      CA686      CA686I

Online AI coding exercises

Project ideas


CSS

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

  


Reference

  


Where to put the CSS

  1. CSS in external file:
    <head>
    <link rel=stylesheet type="text/css" href="file.css">
    </head>
    

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

  3. 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.


  1. Set font for site:
     
    body
    {
     font-family:   Georgia, Verdana, "Times New Roman", Sans-serif; 
    }
    


  2. 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.


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


  4. 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;  	 
    }
    

  

  

Browser caching

Two issues can make changing CSS tricky:
  1. 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.

  2. 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




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:


  1. 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


  2. 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  
    


  3. 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 ;	  
    }
    
  

ancientbrain.com      w2mind.org      humphrysfamilytree.com

On the Internet since 1987.      New 200 G VPS server.

Note: Links on this site to user-generated content like Wikipedia are highlighted in red as possibly unreliable. My view is that such links are highly useful but flawed.