Web 102 INtro to CSS
-
Upload
hawkman-academy -
Category
Software
-
view
179 -
download
1
Transcript of Web 102 INtro to CSS
![Page 1: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/1.jpg)
Web 102: Intro to CSS
![Page 2: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/2.jpg)
Outline
• Review of HTML Elements• What is CSS?• What can you do with CSS?• CSS Selectors• Cascading Selectors • Pseudo Classes • Linking your CSS file
![Page 3: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/3.jpg)
Learning Outcomes
• Basic understanding of web design with HTML & CSS
• Create a simple web page using HTML and CSS• Style images on a web page• Basic page layout techniques
![Page 4: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/4.jpg)
What is CSS?
• Cascading Style Sheets.• Used with HTML to style the page.• Defines the visual representation of the
content.• Example – colour, margins, borders, backgrounds, position in
the page.
![Page 5: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/5.jpg)
HTML Recap
• Hyper Text Markup Language• A markup language for describing web
documents (web pages).• HTML documents are described by HTML tags• Each HTML tag describes different document
content
![Page 6: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/6.jpg)
HTML Page Structure
![Page 7: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/7.jpg)
HTML Example<!DOCTYPE html><html>
<head><title>Page Title</title></head><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
![Page 8: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/8.jpg)
HTML Tags
• Keywords (tag names) surrounded by angle brackets:– <tagname>content</tagname>
• Usually come in pairs like <p> and </p>• The first tag in a pair is the start tag, the
second tag is the end tag• The end tag is written like the start tag, but
with a slash before the tag name
![Page 9: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/9.jpg)
What makes a website?
• HTML: structure of a website• CSS: presentation• CSS works in conjunction with HTML
![Page 10: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/10.jpg)
Anatomy of CSS
• Selector – identifies the element to be styled• Attribute – the attribute of the element to
change• Value – the value of the specified attribute
selector {attribute: value;
}
![Page 11: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/11.jpg)
CSS Example
• body – element to style• color– the attribute of the element• hotpink – the value of tbe color attribute
body {color: hotpink;font-size: 12px
}
![Page 12: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/12.jpg)
Exercise 1 : Document
• Download web102 project from github• https://github.com/hawkmanacademy/web10
2/archive/master.zip
• Add an empty script element to the <head> element in the index.html file
![Page 13: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/13.jpg)
Inline CSS
<head> <title>I love owls</title>
<style type="text/css">
</style> </head>
![Page 14: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/14.jpg)
CSS Selectors• Patterns used to select the element(s) to be styles• Selector Types– Element (e.g. body)– Class (e.g. .pictures)– Id (e.g. #id)– Wildcard (*)
• Reference– http://www.w3schools.com/cssref/css_selectors.asp
![Page 15: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/15.jpg)
Element Selector
body {font-family: Helvetica, Arial, sans-
serif; }
• Element: <body>
Apply specified font to all text on the page
![Page 16: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/16.jpg)
Element Selector
ul {list-style: none;
}
• Element: <ul>
Remove bullets from unordered list element
![Page 17: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/17.jpg)
Element Selector
a {color: #a369d5;test-decoration: none;border-bottom: 1px dotted
#a369d5;}
• Element: <a>
![Page 18: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/18.jpg)
Class Selectors
.pictures { margin: 10px auto; width: 900px;
}
• Class: <ul class=“pictures” >
margin-top: 10px;margin-bottom: 10px;margin-right: auto;margin-left: auto;
Valid options for margin property
![Page 19: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/19.jpg)
ID Selector
#logo { margin: 0 auto 30px; width: 200px;
}
• Id: <div id=“logo” >
There can only be one element with a particular id. If you define multiple elements, only the first one will be selected.
![Page 20: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/20.jpg)
Nested Elements
.pictures li { display: inline; margin: 3px;
}
Change inline to inline-block, and to block. Can you notice the difference?
![Page 21: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/21.jpg)
Cascading
img { margin: 0;
border: 0; }
.bigimg img { margin: 15px 2px; width: 439px; border: 2px solid #b9b1bf;
}
![Page 22: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/22.jpg)
CSS Properties
• Line height
body { font-family: Helvetica, Arial, sans-serif; line-height: 1.3;
}
![Page 23: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/23.jpg)
CSS Properties • Centering content
#main { width: 900px; margin: 0 auto 40px; padding: 0;
}
![Page 24: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/24.jpg)
CSS Properties • Floating Elements
.right-box { float: right;
}
![Page 25: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/25.jpg)
CSS Styling Tricks• Using Empty Elements
#top-line { width: 100%; height: 50px; background-color: #2d183d; border-bottom: 3px solid #eedffb; margin-bottom: 10px;
}
![Page 26: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/26.jpg)
CSS Styling Tricks• Using Empty Elements
#bottom-line { width: 100%; height: 75px; background-color: #2d183d; border-top: 3px solid #eedffb;
}
![Page 27: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/27.jpg)
CSS Styling Tricks• Restyling through element selectors
h1 { font-size: 39px;
color: #2d183d; text-align: center; border-bottom: 1px solid #f6f4f8;
border-top: 1px solid #f6f4f8; padding: 20px 0;}
![Page 28: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/28.jpg)
CSS Styling Tricks• Restyling through element selectors
h2 { font-size: 28px; margin: 15px 0; color: #663095; padding: 15px 0; font-weight: 400; text-align: center;
}
![Page 29: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/29.jpg)
CSS Styling Tricks• Restyling through element selectors
h4 { color: #6D6A6A; font-size: 19px; padding: 27px 25px 15px;
}
![Page 30: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/30.jpg)
CSS Styling Tricks• Restyling through element selectors
small { color: #6D6A6A; font-size: 15px; margin: 0 30px 10px; text-align: right;
}
![Page 31: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/31.jpg)
CSS Styling Tricks• Restyling through element selectors
ol { margin: 14px 0;
}
![Page 32: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/32.jpg)
CSS Styling Tricks• Restyling through element selectors
ol li { background-color: #F6F4F8; color: #663095; font-size: 16px; font-weight: 400; margin: 10px 30px 10px 40px; padding: 6px 20px; border-radius: 9px;
}
![Page 33: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/33.jpg)
More CSS Styling Tricks• Using id selectors
#the-quote{ border-bottom: 1px solid #f6f4f8; border-top: 1px solid #f6f4f8; margin: 40px auto; width: 90%;
}
![Page 34: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/34.jpg)
More CSS Styling Tricks• Using id selectors
#links { margin: 10px 15px 0 0;
}
#links li { margin: 0 7px; font-size: 18px; display: inline;
}
![Page 35: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/35.jpg)
More CSS Styling Tricks• Using id selectors
#text-block { height: 370px;
}
![Page 36: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/36.jpg)
More CSS Styling Tricks• Using class selectors
.pictures li img { border: 2px solid #b9b1bf;
}
.bigimg img { margin: 15px 2px; width: 439px; border: 2px solid #b9b1bf;
}
![Page 37: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/37.jpg)
More CSS Styling Tricks• Finishing touches
.bigimg{ display: inline;
}
![Page 38: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/38.jpg)
Questions?
![Page 39: Web 102 INtro to CSS](https://reader036.fdocuments.in/reader036/viewer/2022070513/58847d6a1a28ab5e248b771b/html5/thumbnails/39.jpg)
Further Reading• CSS Reference– https://developer.mozilla.org/en-US/docs/We
b/CSS/Reference?redirectlocale=en-US&redirectslug=CSS%2FCSS_Reference
• CSS Pseudo Classes– https://developer.mozilla.org/en-US/docs/We
b/CSS/Pseudo-classes
• CSS Zen Garden– http://www.csszengarden.com/
• W3Schools – http://www.w3schools.com/css/default.asp