DRAFT: This module has unpublished changes.
DRAFT: This module has unpublished changes.
DRAFT: This module has unpublished changes.

Designing an ePortfolio offers you a wonderful chance to learn basic CSS.  CSS stands for Cascading Style Sheets.  It is essentially a language that determines how to display the HTML elements of your website.

 

HTML basically defines the content of a document: <h1>This is a heading</h1>. When websites became larger and larger, adding these tags to every page became quite a chore so the World Wide Web Consortium (W3C) created CSS.  Now we can change the appearance and layout of all pages on a web site at once, not by editing each and every single file!  That is what you will be doing with your ePort: changing your CSS file so that your ePort looks and does what you want it to do across the experience of the entire website.  In this way, each and every ePort should speak to its designer and creator.  To borrow from Mary J. Blige on this page's soundtrack: CSS lets you get your website CRUNK! No two ePorts should look/be alike.

 

Here is what the default code looks like:

 

body {
background:#EEEEEE;
color: #222222;
}
#site_topnav ul li a {
color:#000000;
}
#header_container {
padding-bottom:0.5em;
padding-top:10px;
}
#header_container, #main_container {
background-color:#FFFFFF;
border-color:#FFFFFF;
border-style:solid;
border-width:0 10px;
position:relative;
}
#header_container .title {
border-bottom:2px solid #CCCCCC !important;
padding:15px;
}

 

#module_topnav{
border: 1px solid #ccc
}
.navigation_topnav {
background-color:#f7f7f7;
}
.navigation_topnav a {
color:#222222;
font-family: Verdana,Helvetica,Arial,sans-serif;

 

}
#footer_container {
background:none;
border-top:1px solid #AAAAAA;
}
.title{
display:block;
}
#footer {
background:none;
}

 

Any and all design changes happen by changing this code!  That is the subject of this session!

 

Image Credit: http://web.ztrela.com/css.htm

 

 

DRAFT: This module has unpublished changes.