Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ATEC 3361 | NTERNE| '
STUDIO

RIGHT-BRAIN WARM UP
CSS BASICS
1-,  
/  ./ ‘

QM ; )

BRAIN WARM U S
BRAIN WARM UPS

 

Viewing a situation in Ybis isn’t a trick,  but a Link all tbe dots in four
conventional terms can demo...
BRAIN WARM UPS

Viewing a situation in
conventional terms can

create problems tbat don't
actually exist. 

77.7is isn’t a...
BRAIN WARM UPS

 

Slice this object into four (4) identical sections.
BRAIN WARM UPS

 

Slice this object into four (4) identical sections.
LESSON IN A
TWEET

Fimli/ zg a/ is-wers
nzea/ is / oolcilzgfor
wlmtfs‘ not t/ Jere.  77.7e
arzs-wers are simple
— but simp...
Layout
flppearance
Layout selector { property name:  value;  }

Appearance t— declarafion —:
Layout selector { property name:  value;  }

Appearance t— declarafion —: 

p { color:  red;  }
lgymfl selector { property name:  value;  }

Appearance ; — declarafion —: 

p { color:  red;  }

p { color:  red;  font—siz...
lgymfl selector { property name:  value;  }

Appeaeaaee ; — declarafion —: 

p { color:  red;  }
p { color:  red;  font—size...
Layout
flppearaaee r. ’   "1

p { color:  red;  font—size:12px;  }

both are correct 
I‘ p { color:  red; 
font-size:  32px;
lflymfl selector { property name:  value;  }

Appearance };  _ 4 :5

p { color:  red;  }
p { color:  red;  font—size:12px;  ...
Lflymfl selector { property name:  value;  }

Appearaaee ; — declaration —: 

p { color:  red;  }
p { color:  red;  font-siz...
Layout
flppearance
Layout
flppearance

selector { property name:  value;  }

EXAMPLES

p { color:  red;  }

h1 { font-size:  12px;  }
Layout
Appearance

HTML CODE

<p>This is a paragraph. </p>
<p>This is a paragraph. </p>
<p>This is a paragraph. </p>
<p>Th...
HTML CODE

<p class= “blue">This is a paragraph. </p>
<p>This is a paragraph. </p>
<p>This is a paragraph. </p>
<p>This is...
HTML CODE

<p class= “blue">This is a paragraph. </p>
<p class= "yellow">This is a paragraph. </p>
<p>This is a paragraph....
HTML CODE

<p class= “blue">This is a paragraph. </p>
<p class= "yellow">This is a paragraph. </p>
<p class= "yellow">This...
HTML CODE

<p class= “blue">This is a paragraph. </p>
<p class= "yellow">This is a paragraph. </p>
<p class= "yellow">This...
HTML CODE

<p class= “blue">This is a paragraph. </p>

<p class= "yellow">This is a paragraph. </p>

<p class= "yellow" id...
HTML CODE

<p class= “blue">This is a paragraph. </p>

<p class= "yellow" id= "small">This is a paragraph. </p>
<p class= ...
HTML CODE

<p class= "blue" id= "small">This is a paragraph. </p>
<p class= "yellow">This is a paragraph. </p>

<p class= ...
HTML CODE

<p class= "blue" id= "small">This is a paragraph. </p>
<p class= "yellow">This is a paragraph. </p>

<p class= ...
HTML CODE

<p class= "blue" id= "small">This is a paragraph. </p>

<p class= "yellow">This is a paragraph. </p>
<p class= ...
Layout

Appearance

DESCEN DANT COM BINATIONS
HTML CODE

<h1>This is a heading with<em>italics</ em>. </h1>

Layout <p>This is a paragraph with<em>italics</ em>. </p>

...
HTML CODE

<h1>This is a heading with<em>italics</ em>. </h1>

lflymfl <p>This is a paragraph with<em>italics</ em>. </p>

A...
HTML CODE

<h1>This is a heading with<em>italics</ em>. </h1>

lflymfl <p>This is a paragraph with<em>italics</ em>. </p>

A...
HTML CODE

<h1>This is a heading with<em>italics</ em>. </h1>

lflymfl <p>This is a paragraph with<em>italics</ em>. </p>

A...
Layout
Appearance

HTML CODE

<h1>This is a heading. </h1>
<h2>This is a heading. </h2>
<h3>This is a heading. </h3>
<h4>T...
HTML CODE

<h1>This is a heading. </h1>
<h2>This is a heading. </h2>
<h3>This is a heading. </h3>
<h4>This is a heading. <...
Layout
Appearance

HTML CODE

<h1>This is a heading. </h1>
<h2>This is a heading. </h2>
<h3>This is a heading. </h3>
<h4>T...
HTML CODE

Ldwut
<html>
Appearance <head>
<meta charset= "utf-8">
<title>Your Page Title</ title

<style>
I / * add your C...
FINDING YOUR WAY

RELATIVE VS.  ABSOLUTE
PATH NAM ES
RELATIVE VS.  ABSOLUTE
PATH NAM ES

Absolute pathname
includes the full
address (http: //. ..) to
the site. 

Used to link...
RELATIVE VS.  ABSOLUTE
PATH NAM ES

Absolute pathname
includes the full
address (http: //. ..) to
the site. 

Used to link...
RELATIVE VS.  ABSOLUTE
PATHNAIVIES

_  I) I I}
A relative pathname

does not use the full - ~ - - - - - - - - - - - - - - ...
RELATIVE VS.  ABSOLUTE
PATH NAIVI ES

A relative pathname I 
does not use the full

address.  - - - - - - - -

Used to lin...
RELATIVE VS.  ABSOLUTE
PATH NAMES

Move up one folder in

your relative link by

putting two periods and - - - - - - - - -...
RELATIVE VS.  ABSOLUTE
PATH NAMES

Pathnames also  I 

work for CSS
stylesheets and
images. 

;  IMAGES
eeee A

<link href...
Week 3 Presentation: CSS and File Paths
Upcoming SlideShare
Loading in …5
×

Week 3 Presentation: CSS and File Paths

19,448 views

Published on

A look at CSS basics and relative vs. absolute path names.

Published in: Education
  • I’ve personally never heard of companies who can produce a paper for you until word got around among my college groupmates. My professor asked me to write a research paper based on a field I have no idea about. My research skills are also very poor. So, I thought I’d give it a try. I chose a writer who matched my writing style and fulfilled every requirement I proposed. I turned my paper in and I actually got a good grade. I highly recommend ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I have always found it hard to meet the requirements of being a student. Ever since my years of high school, I really have no idea what professors are looking for to give good grades. After some google searching, I found this service ⇒ www.WritePaper.info ⇐ who helped me write my research paper. The final result was amazing, and I highly recommend ⇒ www.WritePaper.info ⇐ to anyone in the same mindset as me.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi! Get Your Professional Job-Winning Resume Here! 👉 http://bit.ly/rexumtop
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Week 3 Presentation: CSS and File Paths

  1. 1. ATEC 3361 | NTERNE| ' STUDIO RIGHT-BRAIN WARM UP CSS BASICS
  2. 2. 1-, / ./ ‘ QM ; ) BRAIN WARM U S
  3. 3. BRAIN WARM UPS Viewing a situation in Ybis isn’t a trick, but a Link all tbe dots in four conventional terms can demonstration oftbe straigbt lines witbout create problems tbat don't buman tendency to make lifling your pen. fln gles actually exist. assumptions. are perm itted but not wobbles or bends.
  4. 4. BRAIN WARM UPS Viewing a situation in conventional terms can create problems tbat don't actually exist. 77.7is isn’t a trick, but a demonstration of tbe buman tendency to make assumptions. Link all tbe dots in four straigbt lines witbout lifting your pen. flngles are permitted but not wobbles or bends.
  5. 5. BRAIN WARM UPS Slice this object into four (4) identical sections.
  6. 6. BRAIN WARM UPS Slice this object into four (4) identical sections.
  7. 7. LESSON IN A TWEET Fimli/ zg a/ is-wers nzea/ is / oolcilzgfor wlmtfs‘ not t/ Jere. 77.7e arzs-wers are simple — but simple docs/1'2‘ 7728(1)? (715)).
  8. 8. Layout flppearance
  9. 9. Layout selector { property name: value; } Appearance t— declarafion —:
  10. 10. Layout selector { property name: value; } Appearance t— declarafion —: p { color: red; }
  11. 11. lgymfl selector { property name: value; } Appearance ; — declarafion —: p { color: red; } p { color: red; font—size:12px; }
  12. 12. lgymfl selector { property name: value; } Appeaeaaee ; — declarafion —: p { color: red; } p { color: red; font—size:12px; } p { color: red; font-size: 32px; }
  13. 13. Layout flppearaaee r. ’ "1 p { color: red; font—size:12px; } both are correct I‘ p { color: red; font-size: 32px;
  14. 14. lflymfl selector { property name: value; } Appearance }; _ 4 :5 p { color: red; } p { color: red; font—size:12px; } p { color: red; butthisis preferred font-size: 32px; ' }
  15. 15. Lflymfl selector { property name: value; } Appearaaee ; — declaration —: p { color: red; } p { color: red; font-size:12px; } p { color: red; font-size: 32px; } / * This is a comment */ p { color: red; font-size: 32px; }
  16. 16. Layout flppearance
  17. 17. Layout flppearance selector { property name: value; } EXAMPLES p { color: red; } h1 { font-size: 12px; }
  18. 18. Layout Appearance HTML CODE <p>This is a paragraph. </p> <p>This is a paragraph. </p> <p>This is a paragraph. </p> <p>This is a paragraph. </p> CSS p { color: red; font-size: 32px; }
  19. 19. HTML CODE <p class= “blue">This is a paragraph. </p> <p>This is a paragraph. </p> <p>This is a paragraph. </p> <p>This is a paragraph. </p> Layout Appearance CSS p { color: red; font-size: 32px; } . blue { color: blue; }
  20. 20. HTML CODE <p class= “blue">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p>This is a paragraph. </p> <p>This is a paragraph. </p> Layout Appearance CSS p { color: red; font-size: 32px; } . blue { color: blue; } . yellow { color: yellow }
  21. 21. HTML CODE <p class= “blue">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p>This is a paragraph. </p> Layout Appearance CSS p { color: red; font-size: 32px; } . blue { color: blue; } . yellow { color: yellow }
  22. 22. HTML CODE <p class= “blue">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p id= "small">This is a paragraph. </p> Layout Appearance CSS p { color: red; font-size: 32px; } . blue { color: blue; } . yellow { color: yellow } #small { font-size: 8px; }
  23. 23. HTML CODE <p class= “blue">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p class= "yellow" id= "small">This is a paragraph. </p> <p>This is a paragraph. </p> Layout Appearance CSS p { color: red; font-size: 32px; } . blue { color: blue; } . yellow { color: yellow } #small { font-size: 8px; }
  24. 24. HTML CODE <p class= “blue">This is a paragraph. </p> <p class= "yellow" id= "small">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p>This is a paragraph. </p> Layout Appearance CSS p { color: red; font-size: 32px; } . blue { color: blue; } . yellow { color: yellow } #small { font-size: 8px; }
  25. 25. HTML CODE <p class= "blue" id= "small">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p>This is a paragraph. </p> Layout Appearance CSS p { color: red; font-size: 32px; } . blue { color: blue; } . yellow { color: yellow } #small { font-size: 8px; }
  26. 26. HTML CODE <p class= "blue" id= "small">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p class= "yellow" id= "small">This is a paragraph. </p> <p>This is a paragraph. </p> Layout Appearance
  27. 27. HTML CODE <p class= "blue" id= "small">This is a paragraph. </p> <p class= "yellow">This is a paragraph. </p> <p class= "yellow" ‘JTd= '*smaJJ. ">This is a paragraph. </p> <p>This is a paragraph. </p> Layout Appearance
  28. 28. Layout Appearance DESCEN DANT COM BINATIONS
  29. 29. HTML CODE <h1>This is a heading with<em>italics</ em>. </h1> Layout <p>This is a paragraph with<em>italics</ em>. </p> Appearance
  30. 30. HTML CODE <h1>This is a heading with<em>italics</ em>. </h1> lflymfl <p>This is a paragraph with<em>italics</ em>. </p> Appearance CSS p { color: red; font-size: 32px; }
  31. 31. HTML CODE <h1>This is a heading with<em>italics</ em>. </h1> lflymfl <p>This is a paragraph with<em>italics</ em>. </p> Appearance CSS p em { color: red; font-size: 32px; }
  32. 32. HTML CODE <h1>This is a heading with<em>italics</ em>. </h1> lflymfl <p>This is a paragraph with<em>italics</ em>. </p> Appearance CSS h1 em { color: red; font-size: 32px; }
  33. 33. Layout Appearance HTML CODE <h1>This is a heading. </h1> <h2>This is a heading. </h2> <h3>This is a heading. </h3> <h4>This is a heading. </h4>
  34. 34. HTML CODE <h1>This is a heading. </h1> <h2>This is a heading. </h2> <h3>This is a heading. </h3> <h4>This is a heading. </h4> Layout Appearance CSS h1 { color: red; } h2 { color: red; } h3 { color: red; } h4 { color: red; }
  35. 35. Layout Appearance HTML CODE <h1>This is a heading. </h1> <h2>This is a heading. </h2> <h3>This is a heading. </h3> <h4>This is a heading. </h4> CSS h1, h2, h3, h4 { color: red; }
  36. 36. HTML CODE Ldwut <html> Appearance <head> <meta charset= "utf-8"> <title>Your Page Title</ title <style> I / * add your CSS here */ P { STYLE SHEEI-1 font-size : 12px; } </ E435!-Le) <body> </ body> </ html>
  37. 37. FINDING YOUR WAY RELATIVE VS. ABSOLUTE PATH NAM ES
  38. 38. RELATIVE VS. ABSOLUTE PATH NAM ES Absolute pathname includes the full address (http: //. ..) to the site. Used to link to an ° ° ' ' ' ° ' ' ' ° ' ' ' ' ' ° external site. <a h ref= “http : www. yahoo . com">yahoo . com</ a>
  39. 39. RELATIVE VS. ABSOLUTE PATH NAM ES Absolute pathname includes the full address (http: //. ..) to the site. Used to link to an ° ° ' ' ' ° ' ' ' ° ' ' ' ' ' ° external site. <a h ref= “hrgtpjgggggv4§yahooIs§qm">yahoo . com</ a> _ hr-2 -- -xv : — pathname —:
  40. 40. RELATIVE VS. ABSOLUTE PATHNAIVIES _ I) I I} A relative pathname does not use the full - ~ - - - - - - - - - - - - - - - - Pl"OdUCtS address. Used to link to a page in index your own site. : <a href= "products. html">Products</ a> <a href= "http: //www. website. com/ products. html">Products</ a>
  41. 41. RELATIVE VS. ABSOLUTE PATH NAIVI ES A relative pathname I does not use the full address. - - - - - - - - Used to link to a page in your own site. index <a href= "products/ corndogs. html">Corndogs</ a> Corndogs
  42. 42. RELATIVE VS. ABSOLUTE PATH NAMES Move up one folder in your relative link by putting two periods and - - - - - - - - - - - - - a slash (. .l) in front of the filename or path. _ Corndogs index <a href= “ . . / index. html">Corndogs</ a>
  43. 43. RELATIVE VS. ABSOLUTE PATH NAMES Pathnames also I work for CSS stylesheets and images. ; IMAGES eeee A <link href= "styles. css“ rel= "stylesheet"> <img src= "image. jpg" alt= "Image Name">

×