Class Session: Monday Feb 04, 2019

CSS: The Presentation Layer of Web Design

Preparation for this Session

Learning Web Design

For the presentational layer class, glance at Learning web design : a beginner's guide to HTML, CSS, Javascript, and web graphics , 4th Edition.

Also Look over Chapter 11. Cascading Style Sheets Orientation

If you wish, you may also want to look over Chapter 12. Formatting Text: (Plus More selectors) through Chapter 18. CSS Techniques, but you are not required to read them prior to class. We will touch on some of the topics, but will spend more time on the Chapter 11 topics.

Mozilla Developer Network's Learn to style HTML using CSS page has tons of links on CSS that are more up to date, but everything in the Learning Web Design book is still relevant.

Glance at:

the W3C discussion of CSS

top/reload prep panel Web Dev Pages

Basic CSS: background color, alignment, font family, font color, font size, margin

Tutorial: How CSS Works

Take a look at this example on the codepen site.

edit on codepenTo edit the pen, look to the far right of the top gray bar and click the "edit on codepen" text. That will take you to the codepen site where you may edit the pen. Play around with the CSS. See if you can change the background color, font color, and text sizes. You are not changing the file. If you refresh the browser, it will revert back to how it was before you edited anything. If you are interested in creating your own codepen account, you will be able to "fork" (copy) the pen into your own account, but that is not required.

See the Pen CSS Introduction by Lawrence Jones (@lblakej) on CodePen.

Box Model Example

Introduction to the CSS box model

See the Pen Box model example by Lawrence Jones (@lblakej) on CodePen.

Here's a flipped out CSS example using CSS3, just to show you how complicated CSS can get. Example "C" will mess with your head the most, I think. You will not be required to code CSS beyond the basics.

Here's a "forked", easier, version of the flipped out CSS, with nothing flipped or rotated. When you fork something on codepen or github, you duplicate it so you can make changes and preserve the original.

To the left we have a screen shot of the firebug view of this page: . Click on the image and notice the <pre> tag.  It this session, we will take a look at the code of this page, and other and learn how you can check out code using dev tools.

Quick links

opal login: ssh
opal password: ONYEN password


Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Office hours by appointment.