CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use...
-
Upload
gilbert-stansbery -
Category
Documents
-
view
228 -
download
0
Transcript of CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use...
![Page 1: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/1.jpg)
CSSCascading Style Sheets
![Page 2: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/2.jpg)
Contents{
1. What is CSS? 1. A Brief History of CSS2. Why to use Styles?
2. Syntax 3. Cascading Order4. Examples of Properties5. Limitations6. CSS variations
![Page 3: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/3.jpg)
{What is CSS? CSS stands for Cascading Style Sheets Styles define how to display (X)HTML elements Styles are normally stored in Style Sheets Multiple style definitions will cascade into one
![Page 4: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/4.jpg)
{A Brief History of CSS
Style sheets have existed since the beginnings of SGML in the 1970s
As HTML grew, it came to encompass a wider variety of stylistic capabilities
Nine different style sheet languages were proposed to the W3C
Two were chosen as the foundation for CSS: CHSS and Stream-based Style Sheet Proposal
CSS level 1 – 1996; CSS level 2 – 1997 Difficulties with adoption
![Page 5: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/5.jpg)
{Why to use Styles? Documents written with CSS are
more flexible short clear
Basic formating tool Easy multiple document managment Save time by using selector classes New opportunities in formating
![Page 6: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/6.jpg)
Syntax
CSS
![Page 7: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/7.jpg)
{ Basic Syntax Made up of three parts:selector {property: value}
The selector is normally the HTML element/tag you wish to define
The property is the attribute you wish to change Every property has the value
![Page 8: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/8.jpg)
{ Syntax If the value is multiple words, put quotes around the
valuep {font-family: "sans serif"}
To make the style definitions more readable, you can describe one property on each line
p { text-align: center; color: black; font-family: arial }
![Page 9: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/9.jpg)
{ Grouping
h1,h2,h3,h4,h5,h6 { color: green }
All header elements will be displayed in green text color
This is header h1This is header h2This is header h3This is header h4
![Page 10: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/10.jpg)
{ The class Selector
With the class selector you can define different styles for the same type of HTML element.p.right {text-align: right} p.center {text-align: center}
Using the class argument in (X)HTML:<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
![Page 11: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/11.jpg)
{ Text color
<html><head>
<style type="text/css">
h1 {color: green}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
This is header 1This is header 2This is a paragraph
![Page 12: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/12.jpg)
Inserting of style sheet
CSS
![Page 13: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/13.jpg)
{Cascading order
1. Browser default2. External style sheet
inside external *.css file
3. Internal style sheet inside the <head> tag
4. Inline style inside an HTML element
![Page 14: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/14.jpg)
{External Style Sheet Each webpage must link
to the style sheet using the <link> tag
Browser reads styles definitions from mystyle.css file
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
![Page 15: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/15.jpg)
{ Internal Style Sheet Should be used when a
single document has a unique style
Defined in the head section by using the <style> tag
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
![Page 16: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/16.jpg)
{ Multiple Style Sheets An internal style sheet has
following properties for the h3 selector:h3 { text-align: right;
font-size: 20pt } External style sheet has
these:h3 { color: red; text-align: left; font-size: 8pt }
Your Web Browser has default formatting:h3 { color: black; font size: 10pt }
What will be the format of <h3> tag?
o color: red;o text-align: right; o font-size: 20pt
![Page 17: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/17.jpg)
Examples
CSS Properties & values
![Page 18: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/18.jpg)
{ Background: Control over the
background color of an element
set an image as the background,
repeat a background image
background-color color-rgbcolor-hexcolor-name
background-image url(URL)none
background-repeat repeatrepeat-xrepeat-yno-repeat
![Page 19: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/19.jpg)
![Page 20: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/20.jpg)
{Text: color direction
ltrrtl
word spacing normallength
text-decoration noneunderlineoverlineline-throughblink
text-align leftrightcenterjustify
![Page 21: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/21.jpg)
![Page 22: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/22.jpg)
{Font: font-family• family-namegeneric-family
font-size xx-smallx-smallsmall
/etc./
font-weigh normalboldbolderlighter100
![Page 23: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/23.jpg)
{Dimension
![Page 24: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/24.jpg)
{List:<head><style type="text/css">ul {list-style-image: url('arrow.gif')
}</style></head>
<body><ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul>
</body>
![Page 25: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/25.jpg)
CSS
Variations, Limitations
![Page 26: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/26.jpg)
{CSS Limitations Some noted disadvantages of using "pure" CSS include
Inconsistent browser support Absence of expressions Lack of Variables Lack of multiple backgrounds per element Control of Element Shapes
![Page 27: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/27.jpg)
CSS level 1 The first CSS specification to become an official W3C
Recommendation is CSS level 1, published in December 1996. Among its capabilities are support for: Font properties such as typeface and emphasis Color of text, backgrounds, and other elements Text attributes such as spacing between words, letters, and
lines of text Alignment of text, images, tables and other elements Margin, border, padding, and positioning for most elements Unique identification and generic classification of groups of
attributes The W3C maintains the CSS1 Recommendation.
![Page 28: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/28.jpg)
CSS level 2 published as a Recommendation in May 1998. includes a number of new capabilities
absolute, relative, and fixed positioning of elements the concept of media types bidirectional text new font properties such as shadows
The W3C maintains the CSS2 Recommendation. CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2
returned to Candidate Recommendation status on 19 July 2007
![Page 29: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/29.jpg)
Useful links http://www.w3schools.com/css/
Learn CSS http://validator.w3.org/
Check Your CSS syntax http://www.csszengarden.com/
The beauty of CSS Design One HTML file 210 CSS
![Page 30: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/30.jpg)
http://www.csszengarden.com/
![Page 31: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/31.jpg)
http://www.csszengarden.com/?cssfile=/209/209.css
![Page 32: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/32.jpg)
http://www.csszengarden.com/?cssfile=/207/207.css
![Page 33: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/33.jpg)
http://www.csszengarden.com/?cssfile=192/192.css
![Page 34: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/34.jpg)
Zen Garden without formatting
![Page 35: CSS Cascading Style Sheets. Contents{ 1. What is CSS? 1. A Brief History of CSS 2. Why to use Styles? 2. Syntax 3. Cascading Order 4. Examples of Properties.](https://reader030.fdocuments.in/reader030/viewer/2022033105/56649d835503460f94a68f89/html5/thumbnails/35.jpg)
Thank You for Your Attention
CSS