web workshop: css
DESCRIPTION
Web Workshop: CSS. Web Workshop: CSS. Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage. What is CSS? (1). What is CSS?. CSS stands for “Cascading Style Sheets” - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/1.jpg)
Web Workshop: CSSWeb Workshop: CSS
Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage
![Page 2: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/2.jpg)
What is CSS? (1)What is CSS?
CSS stands for “Cascading Style Sheets”
Cascading: refers to the procedure that determines which style will apply to a certain section, if you have more than one style rule.
![Page 3: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/3.jpg)
What is CSS? (2)What is CSS?
CSS stands for “Cascading Style Sheets”
Style: how you want a certain part of your page to look. You can set things like color, margins, font, etc for things like tables, paragraphs, and headings.
![Page 4: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/4.jpg)
What is CSS? (3)What is CSS?
CSS stands for “Cascading Style Sheets”
Sheets: the “sheets” are like templates, or a set of rules, for determining how the webpage will look.
![Page 5: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/5.jpg)
What is CSS? (4) What is CSS?
So, CSS (all together) is a styling language – a set of rules to tell browsers how your webpage should look.
![Page 6: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/6.jpg)
What is “Style”?What is “Style”
“Style” is a command that you set to tell the browser how a certain section of your webpage should look.
You can use style on many HTML “elements”(like <p> <h1> <table> etc)
![Page 7: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/7.jpg)
How to write style rules (1)How to write style rules
Two parts: (1) selector and (2) declaration.
Selector: the HTML element you want to add style to.
<p> <h1> <table> etc
Declaration: the statement of style for that element. Made up of property and value.
![Page 8: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/8.jpg)
How to write style rules (2)How to write style rules
Selector {declaration;}Declaration = {property: value;}
Property: what aspect you want to changeex: color, font, margins, etc.
Value: the exact setting for that aspect.ex: red, italic, 40px, etc.
![Page 9: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/9.jpg)
How to write style rules (2)How to write style rules
selector {property: value;}
Essentially means:
The thing I want to change {the aspect of that thing I want to change:
what I want it to be;}
![Page 10: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/10.jpg)
How to write style rules (3)How to write style rules
Selector {property: value;}
h1 {color: red;}
Means: I want the text color of my heading1 to be red.
![Page 11: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/11.jpg)
How to write style rules (3)How to write style rules
Selector {property: value;}
I want the color of the text in my paragraph to be yellow.
p {color: yellow;}
This is the text in this paragraph.
![Page 12: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/12.jpg)
How to write style rules (4)How to write style rules
Selector {property: value;}
h1 {color: blue;background-color: green;}
Means: I want the text color of my heading1 to be
blue and the background color to be green.
![Page 13: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/13.jpg)
How to write style rules (4)How to write style rulesSelector {property: value;}
I want the text color of my link to be red and the background color to be yellow.
a {color: red;background-color: yellow;}
This is my link
![Page 14: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/14.jpg)
Three types of styleWhere do I put my style rules?
There are three types of style-rule-places that we will cover:
- Inlined - Internal Style Sheet - External Style Sheet
![Page 15: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/15.jpg)
<html><head><title>My Wonderful Example</title></head><body>
<p>What was I thinking?</p> </body></html>
a) Inlined example-1
Original html code
![Page 16: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/16.jpg)
a) Inlined example-2
<body> <p style=“text-align: center; font-weight: bold; color: yellow;”>What was I thinking?</p>
</body>
What was I thinking?
![Page 17: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/17.jpg)
<head><title>My Wonderful Example</title> <style type=“text/css”> body {
text-align: left;font-family: trebuchet, verdana;}
</style></head>
b) Internal-1
![Page 18: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/18.jpg)
b) Internal-2
<head><title>My Wonderful Example</title> <style type=“text/css”> body
{text-align: left; font-family: Trebuchet, verdana;}
</style></head>
![Page 19: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/19.jpg)
Internal: Statement of style
<style type=“text/css”>…</style>
this is a style sheet (style type) written (text) in
css (CSS) language
![Page 20: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/20.jpg)
Internal: Brackets & Declaration
<style type=“text/css”>body
{text-align: left;font-family: trebuchet, verdana;}
</style>
I want the “align text” property to be given the value of
“left”
![Page 21: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/21.jpg)
c) External
<html><head><title>My Way</title>
<link rel="stylesheet" href="http://www2.hawaii.edu/~myway.
css" type="text/css“></head><body> </body></html> Link to a
separate css page
![Page 22: Web Workshop: CSS](https://reader035.vdocuments.net/reader035/viewer/2022081512/56815b62550346895dc94e71/html5/thumbnails/22.jpg)
The end of Basic CSS
On to the exercises!