Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in...
Transcript of Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in...
![Page 1: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/1.jpg)
Intro to CSS
![Page 2: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/2.jpg)
ObjectivesDefine CSS and the role that it plays in WebDevView websites before and after CSS has been addedUnderstand the "general rule" for CSS syntax
![Page 3: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/3.jpg)
Cascading Style SheetsThe "adjectives"
![Page 4: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/4.jpg)
selector { property: value; anotherProperty: value;}
The General Rule
![Page 5: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/5.jpg)
/*Make All h1's purple and 56px font*/h1 { color: purple; font-size: 56px;}
/*Give All img's a 3px red border*/
img { border-color: red; border-width: 3px;}
Examples
![Page 7: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/7.jpg)
<html><head> <title>About Rusty</title> <style type="text/css"> li { color: red; } </style></head>
<h3 style="color: pink;">blah blah blah </h3><h3 style="color: pink;">knock knock </h3>
<p style="color: yellow;">blah blah blah </p>
Style Tag
Inline
Where do we write our styles?
![Page 8: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/8.jpg)
<html><head> <title>About Rusty</title> <style type="text/css"> li { color: red; } </style></head>
<h3 style="color: pink;">blah blah blah </h3><h3 style="color: pink;">knock knock </h3>
<p style="color: yellow;">blah blah blah </p>
Style Tag
Inline
Bad Idea!
![Page 9: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/9.jpg)
<!DOCTYPE html><html><head> <title>Demo Page</title> <link rel="stylesheet" type="text/css" href="app.css"></head><body> </body></html>
Write our CSS in a separate CSS file
h1 { color: purple;}
h3 { color: pink;}
In our app.css file: The Result
Using the <link> tag
![Page 11: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/11.jpg)
Closing Tags
<h1>I need a closing tag </h1>
<p>Me too!</p>
Self-Closing Tags
<!-- No closing tag or inner text needed -->
<img src="corgi.png">
<link href="style.css">
<!-- Don't worry about what these tags do yet -->
![Page 12: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/12.jpg)
Adding Additional Information To Tags
<img src="corgi.png">
<p class="selected">woof woof</p>
<a href="www.google.com">Click me to go to Google</a>
<link rel="stylesheet" type="text/css" href="style.css">
<tag name="value"></tag>
Attributes
![Page 14: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/14.jpg)
Images<img src="corgi.png">
![Page 15: Intro to CSS - fall14se.files.wordpress.com · Objectives Define CSS and the role that it plays in WebDev View websites before and after CSS has been added Understand the "general](https://reader036.fdocuments.us/reader036/viewer/2022081612/5f6f24b27673576dfa5d773e/html5/thumbnails/15.jpg)
Links
<a href="www.google.com">Click me to go to Google</a>
<a href="www.reddit.com">Click me to go to Reddit</a>
<a href="url">Link Text</a>