learn css from scratch

32
Welcome! Welcome! Learning CSS From Scratch Learning CSS From Scratch @steffbold @steffbold

Upload: ecobold

Post on 17-Nov-2014

2.324 views

Category:

Technology


1 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Learn CSS From Scratch

Welcome!Welcome!

Learning CSS From ScratchLearning CSS From Scratch

@steffbold@steffbold

Page 2: Learn CSS From Scratch

Me = You

Page 3: Learn CSS From Scratch

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.

Page 4: Learn CSS From Scratch

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

Page 5: Learn CSS From Scratch

HTML family tree (DOM)

Page 6: Learn CSS From Scratch

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

Page 7: Learn CSS From Scratch

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

Page 8: Learn CSS From Scratch

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

Page 9: Learn CSS From Scratch
Page 10: Learn CSS From Scratch

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

Page 11: Learn CSS From Scratch

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

Page 12: Learn CSS From Scratch

Tutorial Ch 2

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

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

Page 13: Learn CSS From Scratch

<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>

Page 14: Learn CSS From Scratch

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

Page 15: Learn CSS From Scratch
Page 16: Learn CSS From Scratch

Tutorial Ch 3

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

Page 17: Learn CSS From Scratch

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

Page 18: Learn CSS From Scratch

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

Page 19: Learn CSS From Scratch
Page 20: Learn CSS From Scratch

Create a servlet

Page 21: Learn CSS From Scratch

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:

Page 22: Learn CSS From Scratch

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

8. Click Continue / Continue / Continue

Page 23: Learn CSS From Scratch

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

Page 24: Learn CSS From Scratch

15.When it launches the State should turn green16.Select the one that’s launched

Page 25: Learn CSS From Scratch

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

Page 26: Learn CSS From Scratch

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

Page 27: Learn CSS From Scratch

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.

Page 28: Learn CSS From Scratch

What’s next?

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

Page 29: Learn CSS From Scratch

Thank you!!!Thank you!!!

@steffbold@steffbold

Questions? Suggestions?Questions? Suggestions?

Page 30: Learn CSS From Scratch

<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

Page 31: Learn CSS From Scratch

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

Page 32: Learn CSS From Scratch

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