2. Let’s do something from scratch
• Create a new folder called EAD on your workspace
• Download the image on this file: http://tinyurl.com/btoxujl
(make sure it goes inside a folder called images)
• Download the index.html file (or copy and paste the code
on a new index.html file you create)
4. Create an external css file (called style.css) on your editor
(mine is Aptana) save them under EAD folder
• By now you should have inside your EAD folder:
- index.html (with some code on it)
- style.css (without any code on it)
- images folder with 1 image
3. <html>
<head>
<title>Engagement and Wedding Films in California Silicon Valley by EAD Productions</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1>Engagement Films & Wedding Films</h1>
<h2>Interview Style Love Story</h2>
<p>Below is a sample of a Hollywood interview style video, for the couple who'd love to keep verbal memories</p>
<h2>Music Video Style Love Story</h2>
<p>Below is a sample of a Music Video style, for the couple who wants a more romantic video</p>
</div>
<div>
<ul>
<li><a href="http://eadfilms.com/aboutus.html" title="about us">about us</a></li>
<li><a href="http://eadfilms.com/services.html" title="services">services</a></li>
<li><a href="http://eadfilms.com/prices.html" title="prices">prices</a></li>
<li><a href="http://eadfilms.com/links.html" title="links">links</a></li>
<li><a href="mailto:s@eadfilms.com" title="contact us">contact us</a></li>
</ul>
</div>
<p>Copyright 2012 EAD Films. All Rights Reserved.</p>
</body>
</html>
4. Point your index.html file to your style.css file:
<link href="style.css" rel="stylesheet" type="text/css" />
between </title> and </head>
1. On CSS file: add image to the <body> & style it
style h1
style h2
style p
• On HTML file: add “page-wrap”
On CSS file: style #page-wrap
5. 3. On HTML file: add “footer”
On CSS file: style #footer
style #footer ul
style #footer li
style #footer li a
style #footer li a:hover
• On HTML file: add class=“copyright”
On CSS file: style .copyright
• On HTML file: add a link to h2
On CSS file: style h2 a
style h2 a:hover
6. Start a free server on Google App Engine
1. Go to http://python.org/download/
2. Download python for your computer
(Mac, Windows – check which version you have!)
3. Go here: https://developers.google.com/appengine/
4. Click “Downloads” on the L side
5. Download SDK for Python
7. 6. Sign up: https://developers.google.com/appengine/
7. Create your domain name:
8. Go to your dashboard
8. 9. Double click on the App Engine on your Desktop:
10. File / New Application
• Name your application 8080 is the port that’s under
• Click “Run”
13. On your browser go to http://localhost:8080/
14. It should say “Hello world!”
9. Now let’s change that file to say “Hello CSS Group”
3. Go to the location where you created the file
Mine is under this path: Users/steffany/learncssyou
10. 1. Open main.py with your text editor
2. Find “Hello World” and change it to “Hello CSS Group”
3. Save it
4. Go back to localhost:8080 on your browser and refresh the
page, you should see the changes there
Now let’s deploy it to go live!
8. Go to GoogleAppEngineLauncher on your Desktop
9. Click Deploy
The name of the app you created goes here
14. When it’s done, go to http://learncssyou.appspot.com/
13. 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
Notas del editor
We are following the book “CSS: The Missing Manual” by David Sawyer McFarland Buy the print version here: http://www.amazon.com/CSS-Missing-David-Sawyer-McFarland/dp/0596802447 Buy and download the ebook version here: http://www.ebooks.com/536649/css-the-missing-manual/mcfarland-david/ Before starting, watch this great CSS Beginners tutorial: http://css-tricks.com/video-screencasts/58-html-css-the-very-basics/ This presentation is targeted towards chapter 4-6 which you should’ve read and done the tutorial by now You should also download http://aptana.com/ to work on your files and the tutorials
For more read: http://www.impressivewebs.com/difference-class-id-css/
