Security Portal | A-Z Index | Skip to Main Content   
Massachusetts Department of Elementary and Secondary Education
Go to Selected Program Area
Massachusetts State Seal
Students & Families Educators & Administrators Teaching, Learning & Testing Data & Accountability Finance & Funding About the Department Education Board  
>  WebTeam Home
>  Accessibility Support
>  Programming Standards
>  Conventions
>  DESE Logos

WebTeam Resources

Style Sheet: Visual Representation

Body
BODY { background-color : #FFFFFF; margin : 0 0 0 0; margin-bottom : 0; margin-left : 0; margin-right : 0; margin-top : 0;}BODY
BODY.margins { margin-left : 20px; margin-top : 20px;}BODY.margins
Headings
h1{ font-family:"verdana","arial","helvetica",sans-serif; font-size:18px; color:#000000; }

Heading 1

h2{ font-family:"verdana","arial","helvetica",sans-serif; font-size:16px; color:#000000; }

Heading 2

h3{ font-family:"verdana","arial","helvetica",sans-serif; font-size:14px; color:#000000; }

Heading 3

h4{ font-family:"verdana","arial","helvetica",sans-serif; font-size:13px; color:#000000; }

Heading 4

h5{ font-family:"verdana","arial","helvetica",sans-serif; font-size:12px; color:#000000; }
Heading 5
h6{ font-family:"verdana","arial","helvetica",sans-serif; font-size:11px; color:#000000; }
Heading 6
Horizontal Rule
HR{ color:#004386; }
Tables
CAPTION{ font-family:"verdana","arial","helvetica",sans-serif; font-size:14px; font-weight:bold;}
Caption Text
TH{ font-family:"verdana","arial","helvetica",sans-serif; font-size:11px; color:000; background:#cccccc; border-spacing: 0px }Table Header
TD{ font-family:"georgia","palatino","times","times new roman",serif; font-size: x-small; vertical-align: top; border-spacing: 0px}Table Data
TR{ text-align: left; vertical-align: top; }Table Row
.border004386{ border: thin solid #004386}
blue border
.border91A8CE{ border: thin solid #91A8CE }
light blue border
.borderccc{ border: thin solid #ccc }
gray border
.bordereee{ border: thin solid #eee }
light gray border
.border000{ border: thin solid #000 }
black border
.borderl{ border-left-style : solid; border-left-width : thin;}
left border
.borderr{ border-right-style : solid; border-right-width : thin;}
right border
.bordert{ border-top-style : solid; border-top-width : thin;}
top border
.borderb{ border-bottom-style : solid; border-bottom-width : thin;}
bottom border
.nowrap{ white-space: nowrap;}
text with class = nowrap

wrapped text
Alignment
.center{ text-align: center;}
horizontally centered text
.left{ text-align: left;}
left aligned text
.right{ text-align: right;}
right aligned text
.middle{ vertical-align: middle;}
vertically centered text
.bottom{ vertical-align: bottom;}
bottom aligned text
Forms
FIELDSET{padding-bottom: 6px; padding-left: 6px; padding-right: 6px; padding-top: 6px;}
legend
INPUT{ BORDER-RIGHT: #003366 1px solid; BORDER-TOP: #003366 1px solid; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: #000000; font-family:"verdana","arial","helvetica",sans-serif; BACKGROUND-COLOR: #ffffff}
SELECT{ BORDER-RIGHT: #003366 1px solid; BORDER-TOP: #003366 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; font-family:"verdana","arial","helvetica",sans-serif; BACKGROUND-COLOR: #ffffff}

SELECT.ten{ BORDER-RIGHT: #003366 1px solid; BORDER-TOP: #003366 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #000000; font-family:"verdana","arial","helvetica",sans-serif; BACKGROUND-COLOR: #ffffff}

Lists
UL{ list-style-type: disc;}
  • bulleted list item
  • bulleted list item
OL (default style)
  1. numbered
  2. numbered
OL.ii { list-style-type: upper-roman; }
  1. UPPERCASE ROMAN
  2. UPPERCASE ROMAN
OL.i { list-style-type: lower-roman; }
  1. lowerecase roman
  2. lowerecase roman
OL.aa { list-style-type: upper-alpha; }
  1. UPPERCASE ALPHA
  2. UPPERCASE ALPHA
OL.a { list-style-type: lower-alpha; }
  1. lowerecase alpha
  2. lowerecase alpha
Anchors
.noline{ text-decoration:none;}remove underline from link
A.noline:hover{ text-decoration:underline;}show underline on hover
A.nav:link{ text-decoration:none;}nav Link
A.nav:hover{ text-decoration:underline;}nav Link
A.nav:visited{ text-decoration:none;}nav Link
A.blk:link{ color:#000; text-decoration:none;}black link w/ light blue hover
A.blk:visited{ color:#000; text-decoration:none;}black link w/ light blue hover
A.blk:active{ color:#9CF; text-decoration:underline; }black link w/ light blue hover
A.blk:hover{ color:#9CF; text-decoration:underline;}black link w/ light blue hover
A.wht:link{ color:#FFF; text-decoration:none;}white link w/ light blue hover
A.wht:visited{ color:#FFF; text-decoration:none;}white link w/ light blue hover
A.wht:active{ color:#9CF; text-decoration:underline; }white link w/ light blue hover
A.wht:hover{ color:#9CF; text-decoration:underline;}white link w/ light blue hover
A.blu:active{ color:#004386; text-decoration:underline; }blue link w/orange hover
A.blu:visited{ color:#004386; text-decoration:none; }blue link w/orange hover
A.blu:link{ color:#004386; text-decoration:none; }blue link w/orange hover
A.blu:hover{ color:#E28521; text-decoration:underline; }blue link w/orange hover
A.bluw:active{ color:#004386; text-decoration:underline; }blue link w/white hover
A.bluw:visited{ color:#004386; text-decoration:none; }blue link w/white hover
A.bluw:link{ color:#004386; text-decoration:none; }blue link w/white hover
A.bluw:hover{ color:#FFFFFF; text-decoration:underline; }blue link w/white hover
A.orn:active{ color:#E28521; text-decoration:underline; }orange link w/blue hover
A.orn:visited{ color:#E28521; text-decoration:none; }orange link w/blue hover
A.orn:link{ color:#E28521; text-decoration:none; }orange link w/blue hover
A.orn:hover{ color:#004386; text-decoration:underline; }orange link w/blue hover
Text Sizes, Styles & Weight
P { font-family:"georgia","palatino","times","times new roman",serif; font-size:x-small;}

paragraph text

.nav{ font-family:"verdana","arial","helvetica",sans-serif; font-size:10px; font-weight:normal; }nav text
.headlist{ font-family:"verdana","arial","helvetica",sans-serif; font-size:14px; font-weight:bold;}headlist
.lg{ font-family:"verdana","arial","helvetica",sans-serif; font-size:12px; font-weight:bold;}large text
.footer{ font-family:"verdana","arial","helvetica",sans-serif; font-size:9px;}footer
.med{ font-family:"verdana","arial","helvetica",sans-serif; font-size:11px;}meduim text
.head{ font-family:"georgia","palatino","times","times new roman",serif; font-size:15px;}head
.list{ font-family:"georgia","palatino","times","times new roman",serif; font-size:12px;} list
.p{ font-family:"georgia","palatino","times","times new roman",serif; font-size:x-small;}.p
.quote{ font-family:"georgia","palatino","times","times new roman",serif; color:white;}quote
.small{ font-family:"georgia","palatino","times","times new roman",serif; font-size:9px;}small
.linethru { text-decoration: line-through; }linethru
.bold{ font-weight:bold;}bold
.italic{ font-style:italic;}italicized text
.em{ font-style:italic;}italicized text
.norm{ font-style:normal;}norm
.section{ font-family:"verdana","arial","helvetica","sans-serif"; font-size:13px; font-weight:bold; color:#004386;}section
.note{ font-family:"georgia","palatino","times","times new roman","serif"; font-size:10px; font-weight:italic;}note
Colors
.blk{ color:#000;}black text
.blu2{ color:#91A8CE;}middle blue text
.blu{ color:#004386;}blue text
.wht{ color:#FFF;}white text
.orn{ color:#E28521;}orange text
.ltbl{ color:#99CCFF;}light blue text
.medbl{ color:#9999CC;} medium blue text
.gry{ color:#CCCCCC}gray text
.red{ color:red;}red text
.grn { color:#33CC66;}green text
.dkgrn { color:#006600;}dark green text
Background Colors
.eee { background-color: #EEEEEE;}
light gray background
.e7e7 { background-color: #F7F7F7;}
medium gray background
.ccc { background-color: #CCCCCC;}
dark gray background
.fff { background-color: #FFFFFF;}
white background
.bg000 { background-color: #000000;}
black background
.bg004386 background-color: #004386;}
darkest blue background
.bg506EAC {background-color: #506EAC; }
dark blue background
.bg91A8CE { background-color: #91A8CE;}
medium blue background
.bgB4C4DE {background-color: #B4C4DE; }
light blue background
.bge2eaf6 { background-color: #E2EAF6; }
lightest blue background
.bge9bb80 {background-color: #E9BB80;}
orange background
.bgFBD9B5 {background-color: #FBD9B5;}
light orange background
Positioning
#edName { position: absolute; left: 125px;top: 450px; width: 150px; font-size: 11px } Ed bios positioning


Last Updated: November 3, 2009
Print View     
Massachusetts Department of Elementary and Secondary Education Search · A-Z Site Index · Policies · Contact DESE