ryansmithart.com/courses/2014/365
For home work, you were supposed to create a .css page for your index.html page.
Upload it, if you haven't already.
Email the url to : ryansmithstudent@aol.com
Today: More CSS
· Div Tags
· IDs & Classes
What we did last class:
Hexadecimal System (RGB)
.gif vs. .jpg
CSS
Syntax
In the head of your html code, put a link to a separate .css file:
<link href="365.css" rel="stylesheet" type="text/css" />
This is an example of an
External Style Sheet
CSS
<link href="365.css" rel="stylesheet" type="text/css" />
using an
external style sheet
an
example of a CSS page
ID vs. Classes
Google fonts
More with CSS:
<!-- comments --> and /* comments */
changing the
background with CSS
CSS styles can be applied to general page elements, CSS Classes, and specific items:
img { border: 0px; }
this applies to every image tag in the HTML document
.classy { color: red; }
this applies to a CSS class called classy.
<span class="classy" > Example of classy red text </span>
#about { background-color: #ccc; }
This rule applies to just the specific element that has an ID value of about:
<div id="about"> About stuff goes here </div>
http://www.csszengarden.com/
Example of
good CSS positioning
Here's the
CSS code
by
Larry Ullman
More CSS Positioning & other fun stuff
by rS
Open Dreamweaver
- rollover images
Photoshop:
File > Automate > Batch...
Let's make something that looks like this:
http://ryansmithart.com/courses/388/week4/
Here's some CSS:
http://ryansmithart.com/courses/388/week4/fun.css
Project A Examples:
- Beatriz Martin Vidal
- Jenny Saville
- William Belt
div tags:
<div id="title"> week 3 </div>
<div id="other"> most of stuff </div>
<div id="scroller">--scrolling div section-----------</div>
CSS:
#title{
background-color:#000;
color:#FFF;
top:0px;
height:50px;
left:0px;
width:100%;
}
#other{
top:70px;
background-color:#FFF;
color:#999;
width:500px;
}
#scroller{
padding-left:10px;
background-color:#000;
color:#FFF;
width:100px;
height:50px;
overflow:scroll;
}
HOME WORK (due at the beginning of class, Friday)
Get started on "Project A"
- familiarize yourself with HTML & start planning the website
- pick an artist
- do some research
- get (or make) digital images of artwork
* complete 2 webpages with at least 1 image and a working link
Ira Glass on Storytelling on Vimeo.