CSS Style Guide

Images w/ Caption

Image w/ Caption Floated Left
Photograph

Photo: Mary Kyle Cocoma

Left-aligned Photo w/ Caption. Below you'll see a larger photo w/ caption floated right. Lorem ipsum anim deserunt nulla velit velit labore occaecat proident et ut pariatur magna ullamco sit in deserunt veniam

Duis eu sed laboris dolore nulla eiusmod officia consectetur sed culpa eu sed consectetur commodo enim et reprehenderit culpa id Duis elit aute sint eiusmod elit mollit velit minim sed commodo ex exercitation mollit dolore dolore dolor aliquip dolore consequat elit esse Ut cupidatat dolor Ut commodo fugiat ut eiusmod exercitation incididunt incididunt ea Excepteur sint proident aute pariatur mollit deserunt sed velit veniam esse amet aliqua amet ut sed non id sint elit do aute reprehenderit commodo ullamco elit ea nostrud do elit Ut non laboris commodo ea elit est qui dolor quis pariatur ad velit ad labore nulla reprehenderit non culpa officia dolore nostrud sunt anim aliquip et nostrud Excepteur consectetur cupidatat nulla culpa culpa voluptate minim nostrud voluptate occaecat est in incididunt do pariatur quis nulla dolor exercitation Ut aliquip sit do labore eiusmod deserunt ullamco sed reprehenderit in dolore consequat ullamco aute aliqua nulla consectetur sit aliquip in pariatur officia.

Photograph

Photo: Some Guy

Duis eu sed laboris dolore nulla eiusmod officia consectetur sed culpa eu sed consectetur commodo enim et reprehenderit culpa id Duis elit aute sint eiusmod elit mollit velit minim sed commodo ex exercitation mollit dolore dolore dolor aliquip dolore consequat elit esse Ut cupidatat dolor Ut commodo fugiat ut eiusmod exercitation incididunt incididunt ea Excepteur sint proident aute pariatur mollit deserunt sed velit veniam esse amet aliqua amet ut sed non id sint elit do aute reprehenderit commodo ullamco elit ea nostrud do elit Ut non laboris commodo ea elit est qui dolor quis pariatur ad velit ad labore nulla reprehenderit non culpa officia dolore nostrud sunt anim aliquip et nostrud Excepteur consectetur cupidatat nulla culpa culpa voluptate minim nostrud voluptate occaecat est in incididunt do pariatur quis nulla dolor exercitation Ut aliquip sit do labore eiusmod deserunt ullamco sed reprehenderit in dolore consequat ullamco aute aliqua nulla consectetur sit aliquip in pariatur officia.

Duis eu sed laboris dolore nulla eiusmod officia consectetur sed culpa eu sed consectetur commodo enim et reprehenderit culpa id Duis elit aute sint eiusmod elit mollit velit minim sed commodo ex exercitation mollit dolore dolore dolor aliquip dolore consequat elit esse Ut cupidatat dolor Ut commodo fugiat ut eiusmod exercitation incididunt incididunt ea Excepteur sint proident aute pariatur mollit deserunt sed velit veniam esse amet aliqua amet ut sed non id sint elit do aute reprehenderit commodo ullamco elit ea nostrud do elit Ut non laboris commodo ea elit est qui dolor quis pariatur ad velit ad labore nulla reprehenderit non culpa officia dolore nostrud sunt anim aliquip et nostrud Excepteur consectetur cupidatat nulla culpa culpa voluptate minim nostrud voluptate occaecat est in incididunt do pariatur quis nulla dolor exercitation Ut aliquip sit do labore eiusmod deserunt ullamco sed reprehenderit in dolore consequat ullamco aute aliqua nulla consectetur sit aliquip in pariatur officia.

Image w/ Caption Centered
Photograph

Photo: Some Guy

Lorem ipsum aliqua dolore elit dolor Excepteur consequat aliqua pariatur veniam labore elit dolor quis enim Duis dolor laboris aliquip ea occaecat occaecat cillum ad occaecat laboris nostrud elit commodo est ad Excepteur reprehenderit commodo occaecat eu elit nostrud non est id aliquip nisi culpa culpa.

Full Width Image w/ Caption

Photograph

A GIANT Image

Duis eu sed laboris dolore nulla eiusmod officia consectetur sed culpa eu sed consectetur commodo enim et reprehenderit culpa id Duis elit aute sint eiusmod elit mollit velit minim sed commodo ex exercitation mollit dolore dolore dolor aliquip dolore consequat elit esse Ut cupidatat dolor Ut commodo fugiat ut eiusmod exercitation incididunt incididunt ea Excepteur sint proident aute pariatur mollit deserunt sed velit veniam esse amet aliqua amet ut sed non id sint elit do aute reprehenderit commodo ullamco elit ea nostrud do elit Ut non laboris commodo ea elit est qui dolor quis pariatur ad velit ad labore nulla reprehenderit non culpa officia dolore nostrud sunt anim aliquip et nostrud Excepteur consectetur cupidatat nulla culpa culpa voluptate minim nostrud voluptate occaecat est in incididunt do pariatur quis nulla dolor exercitation Ut aliquip sit do labore eiusmod deserunt ullamco sed reprehenderit in dolore consequat ullamco aute aliqua nulla consectetur sit aliquip in pariatur officia.

Video w/ Caption

Video: Max Richter - Fragment

Duis eu sed laboris dolore nulla eiusmod officia consectetur sed culpa eu sed consectetur commodo enim et reprehenderit culpa id Duis elit aute sint eiusmod elit mollit velit minim sed commodo ex exercitation mollit dolore dolore dolor aliquip dolore consequat elit esse Ut cupidatat dolor Ut commodo fugiat ut eiusmod exercitation incididunt incididunt ea Excepteur sint proident aute pariatur mollit deserunt sed velit veniam esse amet aliqua amet ut sed non id sint elit do aute reprehenderit commodo ullamco elit ea nostrud do elit Ut non laboris commodo ea elit est qui dolor quis pariatur ad velit ad labore nulla reprehenderit non culpa officia dolore nostrud sunt anim aliquip et nostrud Excepteur consectetur cupidatat nulla culpa culpa voluptate minim nostrud voluptate occaecat est in incididunt do pariatur quis nulla dolor exercitation Ut aliquip sit do labore eiusmod deserunt ullamco sed reprehenderit in dolore consequat ullamco aute aliqua nulla consectetur sit aliquip in pariatur officia.

Lorem ipsum eu ex incididunt laborum exercitation minim do nostrud reprehenderit sunt labore velit quis Excepteur elit fugiat mollit est culpa velit laboris cupidatat pariatur consequat culpa dolore anim deserunt tempor occaecat ut velit ut culpa incididunt veniam adipisicing deserunt cillum quis et in minim aliquip cupidatat voluptate velit in adipisicing laborum incididunt velit et aliquip ullamco proident aliqua sint in dolore ut consectetur laborum dolore tempor id dolore esse Excepteur exercitation ex do in minim laboris elit ut dolor reprehenderit elit non amet tempor qui ut mollit consectetur voluptate dolor irure mollit consectetur nostrud ullamco Duis nostrud culpa ea magna magna deserunt minim pariatur adipisicing dolor amet sit sint nulla eu cillum fugiat nulla in sit fugiat pariatur do dolore minim Ut voluptate aliqua adipisicing officia ut velit aliquip adipisicing pariatur magna commodo occaecat sed adipisicing deserunt nulla qui nulla ut in dolor nostrud officia labore pariatur tempor non nisi do enim reprehenderit eu fugiat reprehenderit adipisicing eiusmod anim non tempor est eiusmod dolor minim dolore incididunt et ad aliqua.


Headlines

Header One

This is a test paragraph. Lorem ipsum anim deserunt nulla velit velit labore occaecat proident et ut pariatur magna ullamco sit in deserunt veniam Duis eu sed laboris dolore nulla eiusmod officia

Header Two

This is a test paragraph. Lorem ipsum anim deserunt nulla velit velit labore occaecat proident et ut pariatur magna ullamco sit in deserunt veniam Duis eu sed laboris dolore nulla eiusmod officia

Header Three

This is a test paragraph. Lorem ipsum anim deserunt nulla velit velit labore occaecat proident et ut pariatur magna ullamco sit in deserunt veniam Duis eu sed laboris dolore nulla eiusmod officia

Header Four

This is a test paragraph. Lorem ipsum anim deserunt nulla velit velit labore occaecat proident et ut pariatur magna ullamco sit in deserunt veniam Duis eu sed laboris dolore nulla eiusmod officia

Header Five

This is a test paragraph. Lorem ipsum anim deserunt nulla velit velit labore occaecat proident et ut pariatur magna ullamco sit in deserunt veniam Duis eu sed laboris dolore nulla eiusmod officia

Header Six

This is a test paragraph. Lorem ipsum anim deserunt nulla velit velit labore occaecat proident et ut pariatur magna ullamco sit in deserunt veniam Duis eu sed laboris dolore nulla eiusmod officia


Paragraphs

This is a standard paragraph. Boeing 787 conversation exclusive, wardrobe sleepy Zürich Nordic Ginza emerging cosy Winkreative liveable. K-pop Baggu global handsome, bureaux punctual the best boulevard. Essential boutique cutting-edge sleepy Marylebone Helsinki. Smart Muji bulletin eclectic alluring the best Baggu.

This is an indented paragraph. The .indented class only works on <p> tags. Essential smart boutique izakaya K-pop soft power intricate international liveable alluring sharp. Scandinavian Ginza discerning Boeing 787 business class Marylebone. Joy hand-crafted delightful tote bag concierge Baggu soft power, bespoke Lufthansa Comme des Garçons impeccable. Extraordinary izakaya joy signature, the best concierge punctual carefully curated Singapore tote bag. Fast Lane pintxos discerning soft power boutique hub Tsutaya extraordinary Baggu tote bag eclectic exclusive perfect Singapore. Impeccable intricate wardrobe hub.


Lists

Ordered List
  1. One
  2. Two
    1. Two Point One
    2. Two Point Two
  3. Three
    • Unordered List
    • Inside of Ordered List
Unordered List
  • One
  • Two
    • Two Point One
    • Two Point Two
  • Three
    1. Ordered List
    2. Inside of Unordered List
Spaced Lists
  • Lorem ipsum consequat ut sit commodo voluptate labore aute pariatur quis nisi irure Excepteur magna irure dolor fugiat labore in dolore in aute pariatur eu ex officia commodo.
  • Lorem ipsum mollit minim veniam aliquip officia amet eiusmod enim exercitation in pariatur commodo esse aliqua cupidatat consectetur Excepteur consectetur voluptate aliqua est quis veniam quis in Duis laborum officia reprehenderit dolor anim laboris sint ullamco occaecat deserunt labore laboris.
    1. One
    2. Two
    3. Three
  • Lorem ipsum reprehenderit ut laborum eiusmod nulla sunt do commodo amet do fugiat deserunt enim non magna fugiat id nostrud dolor nostrud ullamco Excepteur aute.
  1. One
  2. Two
  3. Three
Definition List w/ Toggle

Definition list should only ever be used in a question and answer scenario (like an FAQ).

I am an international student. May I apply to the Summer Institute?

Yes! International students are welcome to apply to the Summer Institute. However, to be eligible for participation, you must be issued an F-1 or J-1 visa through the U.S. Department of State. In addition to the program costs, you will be required to pay additional University fees through Summer Sessions. These additional fees are required to qualify you as a full-time student to be issued a visa. The visa application process is outlined at the UC Berkeley Summer Sessions website for international students.

Are scholarships available?

CED offers a limited number of student scholarships for the Summer Institute, for the program fee only. The program seeks to increase the representation of candidates who have been educationally or socially disadvantaged or whose research or career direction focuses on problems related to disadvantaged segments of society. Scholarships are restricted to U.S. citizens and permanent residents.

How can I be considered for a scholarship?

The Summer Institute is offering limited scholarships in the form of fee program waivers (valued at $3,400 each) to help reduce program costs. Students receiving the scholarship will be responsible for any additional fees through Summer Sessions and housing costs. To be considered for the scholarship, we are asking students to submit a one-page statement that would outline how this financial support will help fulfill your academic objectives and goals. This statement will need to be submitted online along with your completed application materials (application, resume, transcripts and application fee). Scholarship assistance will not be considered for any incomplete applications. The Summer Institute program office will begin reviewing scholarship requests with their associated applications on April 1. This delay in the review of your application will in no way affect your admittance into the program should you be a qualified applicant. All students will be notified soon after April 1 of the status of their application and scholarship.

Definition List
I am an international student. May I apply to the Summer Institute?

Yes! International students are welcome to apply to the Summer Institute. However, to be eligible for participation, you must be issued an F-1 or J-1 visa through the U.S. Department of State. In addition to the program costs, you will be required to pay additional University fees through Summer Sessions. These additional fees are required to qualify you as a full-time student to be issued a visa. The visa application process is outlined at the UC Berkeley Summer Sessions website for international students.

Are scholarships available?

CED offers a limited number of student scholarships for the Summer Institute, for the program fee only. The program seeks to increase the representation of candidates who have been educationally or socially disadvantaged or whose research or career direction focuses on problems related to disadvantaged segments of society. Scholarships are restricted to U.S. citizens and permanent residents.

How can I be considered for a scholarship?

The Summer Institute is offering limited scholarships in the form of fee program waivers (valued at $3,400 each) to help reduce program costs. Students receiving the scholarship will be responsible for any additional fees through Summer Sessions and housing costs. To be considered for the scholarship, we are asking students to submit a one-page statement that would outline how this financial support will help fulfill your academic objectives and goals. This statement will need to be submitted online along with your completed application materials (application, resume, transcripts and application fee). Scholarship assistance will not be considered for any incomplete applications. The Summer Institute program office will begin reviewing scholarship requests with their associated applications on April 1. This delay in the review of your application will in no way affect your admittance into the program should you be a qualified applicant. All students will be notified soon after April 1 of the status of their application and scholarship.


Superscript & Subscript

The coordinate of the nth point is (xi, yi). For example, the 10th point has coordinate (x10, y10).

f(x, n) = log4xn


Blockquotes

Standard Blockquote

Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.

Winston Churchill, 11th November 1947
Blockquote with Photo
Photograph

A Berkeley education is more than just a classroom experience; it is the rich history of activism and diversity that empowers students to be mindful of and critically respond to issues at hand.

Paul Matevosyan, B.A. Architecture

Tables

Standard
Degree Program Application Deadline
Ph.D. Program December 5, 2012
M.L.A. Program December 17, 2012
Concurrent M.L.A./M.Arch. Program December 17, 2012
Concurrent M.L.A./M.C.P. Program December 17, 2012
Larger Table

There is no need to place the contents of table cells inside of <p></p> tags. We also shouldn't be adding static widths to the cells with the width="#" attribute (Example: <td width="38%">. Because the site is fluid this could break the layout.

Name Department Research Specialization
Teresa Caldeira City and Regional Planning Youth, Violence, and Poverty
Karen Chapple City and Regional Planning Jobs and Community Development
Jason Corburn City and Regional Planning Environmental Justice and Sustainable Cities

Table with Spanning Rows
  Monday Tuesday Wednesday Thursday Friday
11:00 Media Instruction Lecture Media Instruction Discussion  
12:00
1:00 Studio Studio Studio Studio Field Trips
2:00
3:00
4:00
5:00
6:00  
Plain
Ph.D. Program December 5, 2012
M.L.A. Program December 17, 2012
Concurrent M.L.A./M.Arch. Program December 17, 2012
Concurrent M.L.A./M.C.P. Program December 17, 2012