CSS exercise

A template you can use to start building out your own style guides with.

Interactive Elements

In-text link

As Canada's engaged university, SFU works with communities, organizations and partners to create, share and embrace knowledge that improves life and ...

Navigation Link

CSS selector:

.button-nav

Rendered element:

Default Button

Text Input Field with Label

Image as a Link

SFU Surrey Campus — Image source: https://unsplash.com/photos/a-building-with-a-red-sign-in-front-of-it-uIX4Tmfa7mA

Text Elements

Headings

I Love Coding

Paragraphs

SFU is more than a university. We are a research and learning community where excellence matters and everyone is welcome.

Numbered Lists

Combined Elements

Main Navigation

Product/Service Listing

Citations

Matteson, Steve. Designer. 2011. Open Sans [Font]. Retrieved from https://www.google.com/fonts#QuickUsePlace:quickUse/Family:Open+Sans
Aedrian Salazar. (2023). Unsplash [Image]. Retrieved from https://unsplash.com/photos/a-building-with-a-red-sign-in-front-of-it-uIX4Tmfa7mA.
SFU. (2024). Simon Fraser University [Text]. Retrieved from https://www.sfu.ca/.
GeeksforGeeks. (2024). GeeksforGeeks [Code]. Retrieved from https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/.