View
28.873
Download
1
Category
Preview:
DESCRIPTION
Part 1 can be found here: http://www.slideshare.net/ecobold/learn-css-from-scratch
Citation preview
Welcome!Welcome!
Learning CSS From Scratch – Part 2Learning CSS From Scratch – Part 2
@steffbold@steffbold
Let’s do something from scratch
1. Create a new folder called EAD on your workspace
2. Download the image on this file: http://tinyurl.com/btoxujl(make sure it goes inside a folder called images)
3. Download the index.html file (or copy and paste the codeon 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
5. 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
<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>
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
2. On HTML file: add “page-wrap” On CSS file: style #page-wrap
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
4. On HTML file: add class=“copyright”On CSS file: style .copyright
5. On HTML file: add a link to h2On CSS file: style h2 a
style h2 a:hover
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 side5. Download SDK for Python
6. Sign up: https://developers.google.com/appengine/7. Create your domain name:
8. Go to your dashboard
9. Double click on the App Engine on your Desktop:
10. File / New Application11.Name your application12.Click “Run”13. On your browser go to http://localhost:8080/
14. It should say “Hello world!”
8080 is the port that’s under
Now let’s change that file to say “Hello CSS Group”
14.Go to the location where you created the file Mine is under this path:
Users/steffany/learncssyou
15.Open main.py with your text editor16.Find “Hello World” and change it to “Hello CSS
Group”17.Save it18.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!
19.Go to GoogleAppEngineLauncher on your Desktop20.Click Deploy
19.When it’s done, go to http://learncssyou.appspot.com/
The name of the app you created goes here
if: if:
You’re free to go! Raise your hand
Free CS101 online class: https://www.coursera.org/course/cs101Free CS253 online class: http://www.udacity.com/overview/Course/cs253/CourseRev/apr2012
Additional Learning Resources
for any tags you can make a classclass can be repeated<p class=“copyright”>the most specific rule overulescss should be.copyright
id is for one specific element, it is unique and cannot be repeated<div id=“banner”>css should be#banner
<div class="photo"><img src="holidays.jpg"alt="Penguins getting frisky"/><p>Mom, dad and me on our yearly trip to Antarctica.</p></div>
what would CSS look like for this class?
Demo with validator.w3.org the difference between id and class
Class and ID
Recommended