Class Session: Monday Feb 04, 2019
CSS: The Presentation Layer of Web Design
Preparation for this Session
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:
Basic CSS: background color, alignment, font family, font color, font size, margin
Take a look at this example on the codepen site.
To 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.
