Syllabus+Info | Assignments | Resources | Sample HTML Page | Sample CSS Page | Sample Bootstrap Page | Sample JS Page

Sample CSS Page

The main purpose of this page is to give you examples of how to use different ways to edit the presentation of a page and its text through the use of Cascading Style Sheets (CSS). In this doc are all the basic ways to specify different styles to different elements on the page. This page does not have any Javascript code, only HTML and CSS.

I started by duplicating the Sample HTML Page and editing it, so some of the text is the same, but I did attempt to write informative text that describes what's happening to it. Focus on how the text is displayed, and check out the source code to see how it's done.

We'll start with setting up the main body of the page in sort of a meta fashion. I threw in some code that makes the main text not quite black, put in a dark brown background color to mimic a desk, and set the default font and weight of the font. Usually when text is displayed on a non-white background, I like to make the weight just a tad heavier than normal to make it easier to read. A lot of how the text shows up is dependent on the browser, though, and some browsers don't have that much granularity to font size or weights.

Heading 1 (<h1>): The main title for the page, usually.

Above is a heading and the stylesheet specifies that h1, h2, and h3 tags will be right adjusted and italicized.

There's also a specification to treat the first paragraph following a heading differently than normal paragraphs (right now set to make the font weight heavier).

And a way to make the first line of a paragraph render a different color than the rest of the paragraph.

Heading 2: Use headings to denote importance and sections

Heading 3: They're hierarchical

Headings are treated very similarly to how they're treated in Google Docs. Like... really, very, exactly similarly... :P

Basic text manipulation

I decided to replace the horizontal rule tags in the initial sample page with sections in boxes instead. Most text elements can be thought of as existing in their own boxes. It's just that we don't see the boxes since they default to having no borders, etc. I set this document up so that some elements are given a class name and then set those elements to throw in a black border and color their interiors with a different background color than the main body of the page.

So that's why you see these light gray boxes that hold the text, initially trying to mimic sheets of paper on the brown desk. But as I coded examples, in I threw in scrolling boxes (since removed) and gave them rounded corners, so they don't really look like paper anymore.

Within a block of text, if you want to tell the web browser that a specific section of text should be treated differently, like say you want to style it a particular way, you can use the <span> tag and then give that tag an id or a class name and set the style for that element id or class.

Lists and text styles

Below is an unordered list that shows off how to mark specific words or phrases for emphasis or highlighting in a document. Technically, you could use <span> for all of the different styles you want to apply, but this is a quick way to marking different text as different categories of content.

1. <strong> lets you mark text as important (usually bolded).
2. <em> lets you mark text that needs emphasis (usually italicized).
3. You could do the same as the above with <b> bold and <i> italics tags, but those are discouraged now since they mark particular styles.
4. I changed how strong and em are treated with the stylesheet, btw.
5. There's a bunch of more ways to markup text (just consult one of the references). Bolding and italicizing are the main ones people find they need to use.

I set the list above to use roman numerals instead of our normal arabic ones. As with almost everything else, there's a ton more you can do to a particular element on a page with stylesheets. Just look them up in one of the reference docs found on the general portal homepage.

Tables and links

Ok. This is where it gets complicated quick: TABLES!

This is a table	Huzzah!
This table is styled completely with CSS instead of HTML. For example, I set the border width to 2px, gave the header a bottom and top border of different weights, and made the text ALL CAPS. Most of the attributes for the table element have been deprecated with HTML5. In fact, most ways of styling text using HTML have been deprecated in favor of stylesheets, but modern browsers tend to be backwards compatible...
The regular text within the cells are right adjusted, too. Again, there's quite a bit to CSS that you can do, so start looking at examples online for inspiration and then look at their source code or consult a good reference! With CSS, there's so much more flexibility to how things look than with just HTML. (Once we start Javascript stuff, you'll then start changing how things behave, too.)

Here's some text that uses an <a> anchor tag to link to a site.. um... How about Snopes. That way you can debunk some fake news that permeates Facebook.

There's a lot to the anchor tag that's used for hyperlinks, like linking to local pages (index.html) vs linking to an outside website (markdangerchen.net), so consult the references for proper syntax.

You can also reference other sorts of resources (URIs) in anchor tags, not just hyperlinks (URLs). For example, you could reference an email address (markchen@uw.edu).

Notice how the anchor texts turns red when you move your mouse over them? That's done with the stylesheet. You may also notice that the anchors appear differently than the ones at the very top of this page. That's an example of specifying a treatment to anchor descendents of a paragraph. In other words, anchor tags within paragraph tags are treated differently than ones outside of paragraphs.

Images

And here's an image:

I'm playing around with putting the image to the left or right of text... This starts getting into various ways to align or position elements. Remember, each tag is an element that can be positioned, but what's confusing is that there's different ways to align different elements. For text, for example, you could use a style that uses "text-align: center;", but for an image, the best way to do it I found was to set the image as a block and then set margins to the left and right to be automatically adjusted: "display: block; margin-left: auto; margin-right: auto;" The fact that different elements are treated differently is a little confusing, huh? For best practice, I tend to consult w3schools.

Images in a grid

Gonna play around with a grid of images with various effects now... Most of this is taken from the examples on w3schools.

Buttons

Okay, let's play around with creating custom button-like things that just use color and borders around text... You can see, I set it so that it has different "hover" (when your mouse is over it) and "activated" (when you click on it) states. For touchscreen devices, often buttons will execute immediately onnce depressed, so the activated state isn't noticed all the time, but on a computer with a mouse, the execution doesn't happen until after you release the mouse button, so if you hold the button down, you'll see the activated state.