Learn CSS in One Day and Learn It Well: CSS for Beginners with Hands-on Project
Learn CSS From Scratch
-
Upload
ecobold -
Category
Technology
-
view
2.325 -
download
1
description
Transcript of Learn CSS From Scratch
Welcome!Welcome!
Learning CSS From ScratchLearning CSS From Scratch
@steffbold@steffbold
Me = You
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 onevery single page of a website.
With CSS, you change one file, the .css file, and the changestake place on all of the pages of your website that has the logoor footer.
HTML
Indent with 2 spaces (not tab)
<!DOCTYPE HTML><html> <head> <title>Here’s a title<//title> </head><body></body></html>
HTML 1999XHTML 2002HTML 5For every new standard you get more features and you lose some
HTML family tree (DOM)
CSSbody {
background-image: url(images/background.jpg);background-repeat: no-repeat;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"; }
#home #homeLink {color: black;
watch for semi-colon
watch for uppercase
You can either drag and drop that file to your browser or R click on it / Open With / Firefox (or fav browser) orOn Aptana, click on:
As you change your project and want to see the changes on theBrowser, just refresh the browser (after saving it, of course) or clickShift + 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
to view there to view in your browser
Create new folderNew index.html docNew 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<style type="text/css">h1 { color: #FF7643; font-family: Arial;}
Internal vs External Style Sheet
ExternalHTML:<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
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
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.
Order matters
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 parentcompany of such well-known corporationsas <span class="companyName">Disney</span> and <span class="companyName">ESPN</span>...well, not really.</p>
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
Tutorial Ch 3
Page 70 (or page 24 if you downloaded the book)
1. Open up Chrome 2. Go to ecobold.com3. 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 #87B5036. 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!
Cool stuff
Create a servlet
1. Go to aws.amazon.com 2. Login/Sign up3. Insert credit card info (or insert credit under payments)4. Click EC2 at the top of the page5. Click Launch Instance / Continue / 6. Select Amazon Linux AMI 2012.03 it should look like this:
7. Select Availability Zone: us-east-1a (or whatever you prefer)
8. Click Continue / Continue / Continue
9. Under Create new key pair enter a name for your key pair10.Click Create and download your key pair (remember name)11.As it downloads go back to AWS click Choose one or more of your existing security group12.Select Default13.Click Launch / Close14.You should be taken to the Amazon EC2 Console Dashboard On the R side click Running Instance
15.When it launches the State should turn green16.Select the one that’s launched
18. Open your terminal on your desktop, type: cd Desktop (enter)19. Type ssh –i RockNRoll.pem ec22-user@(paste) (enter)
RockNRoll.pem should be substituted by the file name you created
17. Copy the public DNS number at the bottom of the page
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 sideSelect “default” click inboundUnder “Port Range” type 8080Click Add RuleClick Apply Rule ChangesGo back to AWS and copy the Public DNS Number againPaste 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 documentClick “control x” on your keyboardType 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 frienddrinks and ask where you messed up.
What’s next?
- Finish book - Wordpress- http://twitter.github.com/bootstrap/examples/fluid.html- Javascript- ?
Thank you!!!Thank you!!!
@steffbold@steffbold
Questions? Suggestions?Questions? Suggestions?
<ol> ordered list<ul> unordered list (bulleted, non-numbered)list-style: none (removes bullets on any list)
<blockquote> for quotesIf 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 linka:visiteda: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 solidz-index: for images to overlappadding: starts on top, then right
for email to popup (as contact form)<a href="mailto:[email protected]" 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, Georgiaif 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 percentThe last two properties must be font-size followed by font-familycontent -> 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
Misc