Embedded Files
CSS Overview & Anatomy of a Style
What is CSS?
CSS is used to control the look and feel of our sites and the location of our content.
- Different 'language' than HTML
- Indenting still important
CSS Zen Garden - CSS design examples
Why Use CSS?
What if we had to change the heading size on all the pages of this site?
In class we'll look at numbers 1 & 2 taken from this web design class.
1. Fun with CSS colors
To choose colors with CSS, you can either use color names, RGB (red, green, blue) values, or hex color codes- check this out for examples.
Hex value examples:
Test your new color knowledge with this fun game!2. Let’s practice some CSSWe’ll use this fun tutorial to:
- Change the page background color
- Change the font family, font size, and font color
- Style the links
Anatomy of a Style - In class we'll cover the info on this site introducing the parts of a style. Note that we are using internal style to start with.
3 Parts To A Style:
1. Selector (element) = where are we making changes or selecting where to make changes
2. Property = what are we changing
3. Value = how much is it changing
CSS Font - Breaks down serif vs sans-serif
Web Safe Fonts - Two sites with font lists
Your Mission ...
- Follow the directions on this site to add style to your tutorial home (index) page. This is how it will look when you are done.
CSS Basics
- #ffffff (white) (full color)
- #000000 (black) (no color)
- #ff0000 (red)
- #00ff00 (green)
- #0000ff (blue)
One color picker site to try, more to come: http://materialuicolors.co/
In class we'll add Google Fonts and a background image using the info from this web design class.
- Google Fonts– you are going to learn today how to grab free code from Google to use for a font for your webpage.
- Go to http://www.google.com/fonts
- Click the arrow next to All Categories at the top left and un-check serif.
- Choose a font! Once you choose a font, click the middle box with the arrow pointing to the right (quick use).
- Choose the style and character set you want (the default will already be checked)
- Skip to #3 and copy and paste the link ref code into your section (head). This will link the font you want to your webpage.
- Finally, copy and paste the font family into the appropriate places on your style sheet (body, paragraph, headline)
- Body background image
- body { background-color: orange; font-size: 13px; font-family: Consolas; color: green; /* background-image: url('http://www.mhswebdesign.com/wp-content/uploads/2012/10/halloween-pug1.gif'); background-position: center; /* left or right also work */ background-repeat: repeat; /* no-repeat or repeat-y or repeat-x */ */ }
- Begin by removing the comment code around lines 22-25 (delete /* and */). What do you see now?
- Try changing center to left or right.
- Try changing repeat to no-repeat, repeat-y, and repeat-x.
- Finally, find another background image to use. Try Bing.com (do image search, then search for free to share and use under License). Make sure you download and save this image in the correct location (same as your webpage). You might have to re-size your image in pixlr.com.
- To add your background image, remove my image of the pug and add yours. It will just be the image name and not a link like mine. Example: url(‘pumpkin.jpg’);. There is no space between url and the parenthesis, those are single quotes around the image name, and there is a semi-colon at the very end.
Applying Styles
Learning Goals:
- Students will be able to apply CSS to a variety of HTML elements
CSS Zen Garden - Where CSS can take us. Will we get that far?
Types of CSS - In-Line vs Internal vs External
Remember the relationship between HTML elements & CSS selectors
.. CSS Parts
Applying Styles - In class we'll cover the info on this page.
Web Safe Fonts - Two sites with font lists
Your Mission ...
- Follow the directions on this site to add style to your tutorial home (index) page. This is how it might look when you are done.
Linking to an External Style Sheet
The rules on how CSS is applied can be complicated. In this class we won't get into the details, but know there are rules and they impact whether your CSS will work. We will look at this link that gives an overview of CSS Specificity.
Linking to an External Style Sheet - We'll cover the info from this link in class.
*Remember to clean up (remove) your internal style info from your pages
Your Mission ...
- Follow the directions on this link to create an external style sheet for your tutorial site and link it to all your pages. This is how it might look when you are done.
Understanding Color in CSS
We talked about color earlier this semester and saw how it's important to think about for accessibility. CSS controls the look and feel of our sites and a big part of that is color. The colors you use for a site should match the purpose, audience, and needs of the client.
Psychology of Color - We'll read this article in class and do a partner activity.
- What color 'identifies' you? Try to guess what color 'identifies' your partner? Were you right?
Color Tools
Understanding Color in CSS - We'll cover the info from this link in class.
- Use Padlet to add one site that uses color well and one site that does not.
.. We'll discuss your choices as a class.
- Pick a client from the list in the link above.
.. Use the information you learned and color tools to create a document/presentation that includes:
--> the colors you chose
--> what the different colors will be used for (Background color, Heading Color, Text Color, Highlight or alternate text color)
--> an explanation of why it's right for your client
.. You will give a very brief presentation
Applying Color in CSS
Now we will apply color schemes to our tutorial site.
Colors by Name - List of that are recognized by their name (eg. blue)
CSS Legal Color Values - Types of color values
Applying Color in CSS - We'll cover the info from this link in class.
Your Mission ...
- Follow the directions on this link to apply a color scheme to your tutorial site. Make sure to include what you will be using the colors for (eg. background, heading, text, alternate, etc.) This is how your tutorial site might look.
Understanding Typography
Stanford University commencement speech
Guide to Web Typography - Create mind map using Google Drawing
Typography - Create mind map using Google Drawing
Understanding Typography in CSS - We'll cover this info in class
Kinetic Typography
Kinetic Typography Examples - 1, 8, 14, 18, 23, 31, 32,
Creating Kinetic Typography Videos
What about Google Slides?
Your Mission ...
- Use this rubric to create a kinetic typography project
Hall of Fame:
- Dr. Who
Applying Typography
Applying Typography in CSS - We'll cover the info from this link in class.
Read and complete the interactive guide linked on this page. Pay attention to their disclaimer.
Choose a partner/group. You will use the information we covered together and from the interactive guide to argue which site from this link (or another good example) has the best typography. You will argue head to head against another group, bracket style, until we have an ultimate winner. The class will vote and judge each argument.
Here are some links on the possible future of web typography.
Your Mission ...
- Follow the directions (8-13) on this link to apply typography to your tutorial site. This is how it might look when you are done.
The Box Model
In class, we will watch an overview video about the box model. This page gives a good visual & definition of the Box Model. We will also check out this interactive demo of the Box Model.
We'll practice together using the info from this web design class. Here is the practice code from the link.
Understanding the Box Model in CSS - We'll cover the info from this link in class.
- Most HTML elements have layers
- Create a Google drawing the illustrates the box model
- We'll make a copy of our index page to practice some examples
Applying the Box Model in CSS - We'll cover the info from this link in class.
Your Mission ...
- Follow the directions on this link to apply The Box Model to your tutorial site. This is how your tutorial site might look.
CSS Image Opacity / Transparency
We can use CSS to add effects to our sites. Use this link to add an image to your tutorial site home page with transparency and a hover effect.
Understanding ID & Class in CSS
What problems have you noticed so far when trying to style our home page?
Understanding ID & Class in CSS - We'll cover the info from this link in class.
- One group will learn ID & one group will learn class
Class & ID - Another definition and example of class and ID in CSS
Your Mission ...
- Follow the directions on this link to ID & Class attributes to your tutorial site (home page and other pages). This is how your tutorial site might look.
Applying ID & Class in CSS - We'll cover the info from this link in class.
Your Mission ...
- Follow the directions on this link to style the new ID & Class attributes we added on your tutorial site. This is how your tutorial site might look.
Pseudo-class Selectors in CSS - We'll cover the info from this link in class.
- Go to CNN.com
- What happens when you have your mouse over pictures or links?
Your Mission ...
- Follow the directions on this link to pseudo-class selectors to your tutorial site. This is how your tutorial site might look.
Page Layout Techniques
Read and complete lessons 13 - 20 from Codecademy using this link. Take a screen shot when you are finished.
With a partner, read Page Layout: Overall Design Strategies and complete the reading guide below (you each need to complete one).
Read and annotate this article on CSS Positioning 101 with a partner. Use http://www.bounceapp.com/ to annotate (notes, thoughts, questions, etc.) the article. Make sure to look at the examples.
- Send me your annotated article.
- Use Google Drawing or another tool to illustrate each of the five position properities (skip inherit)
On Schoology send me:
- Codecademy screenshots
- Overall Design Strategies Reading Guide
- CSS Positioning 101 annotated article
- CSS Positioning Google Drawing
Page Layout with CSS - We'll cover the info from this link in class.
Your Mission ...
- Use the CSS positioning info you've learned and apply it to your tutorial site layout. You could use the directions on this link as a guide.
Stylizing a Navigation Menu with CSS - We'll cover the info from this link in class.
Your Mission ...
- Follow the directions on this link to stylize your navigation menu with CSS. This is how your tutorial site style sheet might look.
CSS Polaroid Photo Gallery
Follow the directions from this link to add three polaroid photo gallery images to your Tutorial site index page. We'll talk about the CSS z-index property and CSS transform property in class.
CSS Image Effects
In class we'll look at how to add image effects using this CSS library and CSS filters.
First let's add Instagram-like image effects to our images. Use the CSS library and choose a filter to apply. Grab a new image to add to your site (https://www.pexels.com/ or https://unsplash.com/). Use the first set of directions and examples on that page to add the effects to your site. Here is a link to info on the <figure> element, which we haven't seen before.
We can also add effects using CSS filters. Use this link to create a filter you like. Grab a new image to add to your site (https://www.pexels.com/ or https://unsplash.com/). Once you've create the filter, copy and paste the CSS property into your image's CSS selector (CSS info for that image). Make sure to add one line that includes the -webkit- and one line that starts with filter. Here is an example:
img {
-webkit-filter: brightness(1.9) grayscale(0.3) hue-rotate(60deg) invert(0.5) sepia(0.4);
filter: brightness(1.9) grayscale(0.3) hue-rotate(60deg) invert(0.5) sepia(0.4);
}
Here is an example using both types of effect.
More info on CSS images, properties, and effects. Info on responsive CSS images.
Page updated
Report abuse