CSS Playground

The Beauty of CSS Design

A bit about this page

My name is Brad Gizzi, and I am on the first year of a computer science degree

A demonstration of what I can accomplish using vanilla CSS based design. This is part of my second assignment in Web Development and Operating Systems

HTML and CSS

W3C definition of HTML and CSS is

"HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications." (W3C(2022))

What is CSS

CSS is for the styling of web content, such as colours and layout. It allows the look and feel of the web content to change when on different types of devices with different sized screens, such as computers and mobile phones

The separation of HTML from CSS makes it easier for the developer to maintain web applications as you can share style sheets across your pages, and style the pages differently in different situations. This is referred to as the separation of content from presentation.

CSS is made up of a number of different CSS specifications., which are in these different statuses

Steps to create a CSS rule:

  1. Choose the HTML element you want to style.
  2. Define the CSS property you want to change.
  3. Set the value for the CSS property.
  4. Apply the CSS rule to the HTML element.

Take a look at the CSS standards on the W3C site

Where did this idea come from?

Inspiration for the content on this page came from Dave Shea CSS Zen Garden and a modern take on this by Stephanie Eckles Style Stage. Do take a look at these to get inspiration on what CSS can do now.

Places to look for CSS tips and tricks include the following:

Some examples of modern CSS include: