Back to www.houstontx.gov > Breadcrumb Link > Style Guide

Dept Name -- h2 class="deptTitle"

Page Name -- h3 class="pageTitle"


Go to our Test Page to see all the editable areas on each page of this template.

City Hall

For the graphic above, make sure you use <span class="image full">, so that the image works properly on tablet and mobile device screens.  The preferred maximum width of this graphic is 800 pixels.  Also remember to remove the height and width of the graphic in the source coding.

Responsive YouTube Coding

To make YouTube videos responsive to other screen sizes, add this coding below to the area under </title> in your source coding:

<style> .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style>

Then add this coding in front of the <iframe> of the YouTube embed coding and close the <div> after the </iframe>:

<div class="video-container">

 

"gray12option" Text, width is 75% and underlined

There is also "gray14option" Text, width is 75% and underlined

This is contBold

This is bold12black

This is contItalic

This is contBoldItalic

Press Release Title Text

Press Release Subtitle Text

Red Bold Text

Caption Text

  • Bullet Points are <ul class="bullets">

ADA Friendliness

Use ALT Tags for graphics -- The basic reason for ALT Tags is to describe a graphic for webpage visitors who are blind or have a significant visual impairment. When someone utilizes a reading device such as JAWS, we want them to be able to identify graphics on our pages.

Do not use CLICK HERE for text links -- Use descriptive wording, as "click here" is ADA-unfriendly. The basic reason that “click here” should not be used is that when someone utilizes a reading device such as JAWS because they are blind or have a significant visual impairment, they will simply hear the words “CLICK HERE” instead of being directed to the reference page. So what most experts recommend is that the full text citation be listed instead of listing “click here” ... "We need to always use meaningful link text."

Color Contrasting -- Using Web Content Accessibility Guidelines (WCAG) 2.0, though AA contrasts are preferred, we are using AAA contrast ratios of 7:1 for normal text and 4.5:1 for large(r) text. Brand-compliant and AAA-compliant color contrasts are featured below.

Run your pages through the Web Accessibility Evaluation Tool at
https://wave.webaim.org/

ADA-compliant color contrasts below via
https://webaim.org/resources/contrastchecker/

Our website is required to be in compliance with
Section 508 of the Rehabilitation Act

BLUE

(main color)

#34587F

SUB.BLUE

(decorate)

#4846AA

GRAY

(main text)

#595959

GOLD

(hover / line)

#74522F

GREEN

(border)

#415E26

RED

(attention)

#B30000

MAGENTA

(decorate)

#8A3860

Text for use on white #FFFFFF backgrounds. Primary BLUE is #4676AA

Text for use on gray #F3F3F3 backgrounds. Primary BLUE is #416F9F

BLUE

(main color)

#2F5074

SUB.BLUE

(decorate)

#43419F

GRAY

(main text)

#525252

GOLD

(hover / line)

#694A2B

GREEN

(border)

#3A5322

RED

(attention)

#A30000

MAGENTA

(decorate)

#7F3458

 

 

For the Font Awesome icons to appear properly in https, please add <script src="https://kit.fontawesome.com/ae714e4324.js" crossorigin="anonymous"></script> between <head> and </head>.