Site header image

Simple Selectors

First heading: I am a light gray <h3> heading

Second heading: I am also a light gray <h3> heading

Conditional At-rule

This sentence will only style red if the browser viewport width is at least 100px wide. This sentence will only style red if the browser viewport width is at least 5,000px wide

Class Selectors

I am a paragraph. I have two class names; "heavy" and "shocking." One selector made me bold by referencing "heavy." Another selector made me red by referencing "shocking."

ID Selectors

My unique ID is "y-paragraph." An ID selector made me yellow by calling this ID.

Presence, Value, & Substring Value Selectors

Here are some books on my bookshelf. These books have attributes: book-type (fiction, non-fiction, or textbook), cover-color (ex. hard-blue, soft-brown), and title-start, which is the first two words of the title. All books in the list are tagged with the media="book" attribute value.

Fiction books have red font, non-fiction yellow, & textbooks green. Hardcover books have a black background & soft-cover purple backgrounds. Books with brown covers are in bold. Books with the media="book" attr/value are italicized. Any book with "The" or "the" in the first two words is underlined.

Pseudo-classes

Hover over this link to get SPOOKED!!
This link turns red after being clicked (unless you have history disabled)

Pseudo Elements

Note that this paragraph has some fancy styling.

This is thanks to pseudo elements. I can even use ::after to add this clonepa after this paragraph:

Table Text Styled w/ Combinators

Title Cover Type Cover Color Type Year
The Photographer's Eye hard brown textbook 2007
Automate the Boring Stuff with Python soft yellow textbook 2015
The Earth Abides soft brown fiction 1941
Hacker, Hoaxer, Whistle-blower, Spy: The Many Faces of Anonymous soft pink non-fiction 2015
Num books 4

Video sized relative to viewport size

em vs rem Sizing

rem practice image
The above image, which is contained within a figure element, will resize as the figure's font size changes as the image dimensions are set with em values. Here is the size with figure font set to 19px.

em practice image
This image has the same numeric size values as the above image, but set in rem instead of em. Note that it is smaller. This is because it is basing its size on the root html element's 16px font size, instead of the 19px font size of its figure parent.

Images & Text Sized by Percent

fixed width img
This image is fixed width. Try viewing it on your laptop or desktop, then your cellphone. Notice how it stays the same size & is not very responsive.
percent sized img
Here the same image resizes based on the size of client viewport size. Try the above comparison across multiple devices again. This image is much more responsive.

The <div> element containing these two paragraphs is set to 20px font. This fixed font paragraph is also set to 20px font. The size of this paragraph will always be 20px, unless changed in the stylesheet.

This paragraph, however, is set to a percent value of 120%. That makes it current size 24px (20 x 1.2 = 24). If the <div> font size was increased to 24px, this paragraph would auto-increase its size to 29px.

Colors in Various Specification Types

Here is the same color displayed by a variety of color specifications: Keyword Hexadecimal RGB HSL. And the same color, but only with partial transparency: RGBA HSLA Opacity

Setting Inheritance on Properties

The Box Model

box example image box example image box example image

The foundation of web layout revolves around the box model, where each element can be seen as a box, with an inner content layer, then a layer of padding, then a border, and then a margin which provides open space between elements. Think of a picture in a frame, where the picture is smaller than the frame, and has white space in between it and the frame. Then hang this frame on the wall near other frames in a planned layout. That's essentially the box model.

Box Overflow Handling

Box with overflowing content overflowing outside of box. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula.

Box where overflowing content can be scrolled through. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula.

Box hiding overlowing content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempus turpis id ante mollis dignissim. Nam sed dolor non tortor lacinia lobortis id dapibus nunc. Praesent iaculis tincidunt augue. Integer efficitur sem eget risus cursus, ornare venenatis augue hendrerit. Praesent non elit metus. Morbi vel sodales ligula.

Background Clips of Various Span in Boxes

Types of Boxes

Here are some block boxes: The first box Note how the block box has a line break before and after it And the second box

And here are some inline boxes: Here is the first inline box It flows smoothly with the text Margin works fine with inline textBut doesn't work well with this block box, which ignores the inline margin

And lastly, How about an inline-block box? Note how the block box respects the inline-block box margins Inline-block boxes can have dimension values set on them, unlike inline boxes

Text Styling

Here is a styled sentence in Helvetica. And here is one in Times New Roman.