Scribd
Upload
10 views

1css Intro

CSS is a style sheet language used for describing the presentation of structured documents written in HTML and XML. CSS allows for separation of document content from document presentation including elements like font, colors, layout, and formatting. CSS properties include color, font-size, background-color and more.

Uploaded by

life seconds
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
10 views

1css Intro

CSS is a style sheet language used for describing the presentation of structured documents written in HTML and XML. CSS allows for separation of document content from document presentation including elements like font, colors, layout, and formatting. CSS properties include color, font-size, background-color and more.

Uploaded by

life seconds
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 20

 A set of rules for displaying markup content

 A set of rules for displaying markup content


 Cascading:
 Display rules “cascade” down
 The most specific rule is used
 A set of rules for displaying markup content
 Cascading:
 Display rules “cascade” down
 The most specific rule is used
 Styles Sheet:
 Rules are created as styles
 Fixing disabilities in HTML
 Fixing badly assemble code in HTML
 Separation of content and display
 Fixing kludges in HTML
 Separation of content and display
 More options for displaying content
 Fixing kludges in HTML
 Separation of content and display
 More options for displaying content
 Efficiency
 CSS level 1 - CSS1 is the first official release of the style recommendations set
forth in 1996.

 CSS level 2 - CSS2 is the 1998 release of recommended specifications to CSS.

 CSS level 2 revision 1 - CSS2.1 is a revision that replaces the mechanics of CSS2
that lead to problems. Recommended as specification June 2011 by W3C.

 CSS level 3 - Drafts to CSS3 started appearing in 1999. CSS3 is made more
modular and extensible for browser software vendors than previous levels of
CSS.
 CSS level 4 - Drafts of CSS4 began September 2009. None of its modules are
supported yet by browser software.
<h1><font color=‘red’ face=“Georgia, Times New Roman, Times, serif”>
This will be a heading 1 in red Georgia font</font></h1>

<h1><font color=‘red’ face=“Georgia, Times New Roman, Times, serif”>


Every time I want my text to look the same,
I have to retype or cut and paste all of this markup</font></h1>
 CSS style rules look like this:

Selector {
property0:value0;
property1:value1;
propertyZ:valueZ
}
 http://www.w3schools.com/css/css_reference.asp
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>My CSS experiment</title> </head>
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid
black;">Hello World!</h1>
<p style="color:red;">This is my first CSS example</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 { color: blue; background-color: yellow; border: 1px solid black; }
p { color: red; }
</style>
</head>
<body>
<h1>Hello World!</h1> <p>This is my first CSS example</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
h1.redH1 {
color:red;
font-family: Georgia, Times New Roman, Times, serif
}
body {
background-color: #333333;
}
.blueback {
background-color: blue;
color: white
}
p{
font-size: 12px;
text-align: center;
}
 When using multiple styles that conflict,
which will be displayed?
 When using multiple styles that conflict,
which will be displayed?
 Order:
1. Inline style sheet
2. Embedded style sheet
3. External style sheet
4. Browser default
 Colors:
 Names for some:
▪ blue, red, green, pink
 Hexadecimal
▪ #0000FF, #FF0000, #00FF00, #FF3399
 RGB
▪ rgb(0,0,255), rgb(255,0,0), rgb(0,255,0)
 Font size:
 px for pixels (a dot on the screen)
▪ font-size: 12px
 pt for point (1/72 of an inch)
▪ font-size: 12pt
 pc for pica (12 points)
▪ font-size: 2pc

You might also like