Learn CSS From Scratch

Welcome!
Learning CSS From Scratch

@steffbold

CSS Basics

Before CSS, if programmers wanted to change the logo or the
color of the footer for example, they had to change the code on
every single page of a website.

With CSS, you change one file, the .css file, and the changes
take place on all of the pages of your website that has the logo
or footer.

HTML

HTML 1999
XHTML 2002
HTML 5
For every new standard you get more features and you lose some

<!DOCTYPE HTML>
<html>
Indent with 2 spaces (not tab)
<head>
<title>Here’s a title<//title>
</head>
<body>
</body>
</html>

CSS
body {
background-image: url(images/background.jpg);
background-repeat: no-repeat;
watch for semi-colon
background-position: center top;
margin: 0 auto;
padding: 30px;
}

h1 {
color: gray;
font-size: 25px;
font-family: "century gothic";
border-bottom: 2px white solid;
}

p { color: gray; font-size: 13px; font-family: "century gothic"; }
watch for uppercase
#home #homeLink {
color: black;

You can either drag and drop that file to your browser or
R click on it / Open With / Firefox (or fav browser) or
On Aptana, click on:
to view there to view in your browser

As you change your project and want to see the changes on the
Browser, just refresh the browser (after saving it, of course) or click
Shift + Command + R

To validate that your page doesn’t have any bugs always go to:
http://validator.w3.org/ (demo)
You can validate a link, or upload a file

Create new folder
New index.html doc
New style.css doc

To point HTML to CSS:
<link href="style.css" rel="stylesheet" type="text/css" />

Add images you’ll want to use in a folder called images inside that folder

Internal vs External Style Sheet
Internal
<style type="text/css">
h1 {
color: #FF7643;
font-family: Arial;
}
When you insert the internal style sheet, make sure to place it in the
page’s head section, between the link tag and the closing </head> tag

External
HTML:
<link rel="stylesheet" type="text/css" href="css/global.css”>

XHTML:
<link rel="stylesheet" type="text/css" href="css/global.css" />

External helps page load faster

Order matters

This link example must be in this order:
a:link { color: #F60; }
a:visited { color: #900; }
a:hover { color: #F33; }
a:active { color: #B2F511; }

ps- a:active covers the brief nanosecond
when someone’s pressing the mouse
button, before releasing it.

Tutorial Ch 2

Page 39 (or page 11 if you downloaded the book)

Download tutorials here: www.sawmac.com/css2e/

<div> and <span>
The <div> tag and the <span> tag are like empty vessels that you fill with
content. A div is a block/box meaning it has a line break before it and after
it, while a span appears inline, as part of a paragraph

<div> = division (box where you can put stuff)
<div id=“page wrap”>
Tag with # on CSS
#page wrap {
}

<span> lets you apply a class or ID style to just part of a tag. You can place
<span> tags around individual words and phrases within paragraphs to
format them independently. Here, a class called .companyName styles the
inline elements “CosmoFarmer.com,” “Disney,” and “ESPN”:

<p>Welcome to <span class="companyName">
CosmoFarmer.com</span>, the parent
company of such well-known corporations
as <span class="companyName">Disney
</span> and <span class="companyName">
ESPN</span>...well, not really.</p>

Class and ID
for any tags you can make a class
class can be repeated
<p class=“copyright”>
the most specific rule overules
css should be
.copyright

id is for one specific element, it is unique and cannot be repeated
<div id=“banner”>
css should be
#banner
what would CSS look like for this class?
<div class="photo">
<img src="holidays.jpg"
alt="Penguins getting frisky"/>
<p>Mom, dad and me on our yearly trip to Antarctica.</p>
</div>

Demo with validator.w3.org the difference between id and class

Tutorial Ch 3

Page 70 (or page 24 if you downloaded the book)

Cool stuff

1. Open up Chrome
2. Go to ecobold.com
3. Right click and select “Inspect Element”
4. Right click “Sell” on the top of the page select “Inspect Element”
5. On the bottom R side, double click on the color green #87B503
6. Type “pink”

If you want to copy the site for testing: copy the HTML, CSS and Images

Cool stuff

http://csszengarden.com

Samples of only using CSS to change the look and feel of
a page

Download the sample html file and css file to try yourself!

• Go to aws.amazon.com
• Login/Sign up
• Insert credit card info (or insert credit under payments)
• Click EC2 at the top of the page
• Click Launch Instance / Continue /
• Select Amazon Linux AMI 2012.03 it should look like this:

1. Select Availability Zone: us-east-1a (or whatever you prefer)

1. Click Continue / Continue / Continue

• Under Create new key pair enter a name for your key pair
• Click Create and download your key pair (remember name)
• As it downloads go back to AWS click Choose one or more of
your existing security group
• Select Default
• Click Launch / Close
• You should be taken to the Amazon EC2 Console Dashboard
On the R side click Running Instance

1. When it launches the State should turn green
2. Select the one that’s launched

1. Copy the public DNS number at the bottom of the page

18. Open your terminal on your desktop, type: cd Desktop (enter)
• Type ssh –i RockNRoll.pem ec22-user@(paste) (enter)

RockNRoll.pem should be substituted by the
file name you created

Type sudo yum install tomcat7*
Type Y (enter)
Type sudo /etc/rc.d/init.d/tomcat7 start (enter)
Go back to AWS, click Security Groups under NETWORK & SECURITY on the L si
Select “default” click inbound
Under “Port Range” type 8080
Click Add Rule
Click Apply Rule Changes
Go back to AWS and copy the Public DNS Number again
Paste into a browser and add :8080 to the end of the link (enter)

Go back to your terminal type cd /var/lib/tomcat7/webapps/ROOT (enter)
Type sudo nano index.html (enter)
Create an html document
Click “control x” on your keyboard
Type Y (enter) (enter)
Go back to your browser that you typed :8080 and type /index.xtml at the
end of the link

It’s live!

Ps- it’s likely that you missed a step, now is the time to buy a friend
drinks and ask where you messed up.

What’s next?

- Finish book
- Wordpress
- http://twitter.github.com/bootstrap/examples/fluid.html
- Javascript
-?

Thank you!!!
Questions? Suggestions?

@steffbold

Misc
<ol> ordered list
<ul> unordered list (bulleted, non-numbered)
list-style: none (removes bullets on any list)

<blockquote> for quotes
If you want to include a quotation like a snippet of text from another website, a movie review, or just some wise saying,
try:
<q> for one-liners
<cite> for referencing a book title, newspaper article, or website
<address> identify and supply contact information for the author of a page (great for a copyright notice)

for IE 8 to behave properly: <meta http-equiv="X-UA-Compatible" content="IE=edge" /> (put in ,head> below <title>
(must put on every page)

a:hover to change color when hovering over a link
a:visited
a:link

must be in this order:
a:link { color: #F60; }
a:visited { color: #900; }
a:hover { color: #F33; }
a:active {color: #B2F511; }

a:active covers the brief nanosecond when someone’s pressing the mouse button, before releasing it.

Misc
border: 1px solid
z-index: for images to overlap
padding: starts on top, then right

for email to popup (as contact form)
<a href="mailto:s@eadfilms.com" title="contact us”

text-decoration: none; for underline to disappear on a text

Including !important after a property value means that specific property always wins
.
Make sure you attach the external style sheet before the internal style sheet in the <head> section of the HTML.
This ensures that the styles from the internal style sheet win.

fonts easy on the eye (easy to read): Times, Times New Roman, Georgia
if you buy a font type, the person who opens your browser must have also installed that font, otherwise a standard
font will show

The normal line-height setting for a browser is 120 percent
The last two properties must be font-size followed by font-family
content -> padding -> border -> margin

for image to stay on the page as they scroll down (like Pinterest’s ”Request an invite” button), use this:
body {
background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-attachment: fixed;

Misc
css intro: http://www.w3schools.com/css/css_intro.asp

free photos:
http://www.morguefile.com/
http://www.sxc.hu/
http://openphoto.net/gallery/browse.html
http://search.creativecommons.org/
http://www.somerandomdude.com/work/sanscons/

drop shadow:
www.alistapart.com/articles/cssdrop2
www.ploughdeep.com/onionskin

Learn CSS From Scratch

Recommended

More Related Content

What's hot (19)

Similar to Learn CSS From Scratch (20)

More from ecobold (9)

Recently uploaded (20)

Learn CSS From Scratch

Editor's Notes