Dr. Mark Humphrys

School of Computing. Dublin City University.

Home      Blog      Teaching      Research      Contact

My big idea: Ancient Brain

Search:

CA114      CA170

CA668      CA669      Projects


CSS

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


  

CSS 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>
    
    

  

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


  

Error tolerance



ancientbrain.com      w2mind.org      humphrysfamilytree.com

On the Internet since 1987.

Wikipedia: Sometimes I link to Wikipedia. I have written something In defence of Wikipedia. It is often a useful starting point but you cannot trust it. Linking to it is like linking to a Google search. A starting point, not a destination. I automatically highlight in red all links to Wikipedia and Google search and other possibly-unreliable user-generated content.