2. Cascading Style Sheets (CSS)
CSS use to describes the appearance, layout,
and presentation of information on a web page
CSS Advantages:
2
•Separates structure from presentation
•Provides advanced control of presentation
•Easy maintenance of multiple pages
•Faster page loading
•Better accessibility for disabled users
•Easy to learn
3. Basic CSS rule syntax
A CSS file consists of one or more rules
Each rule starts with a selector
A selector specifies an HTML element(s) and then
applies style properties to them
3
SYNTAX to Write CSS=
selector {
property: value;
...
property: value;
} CSS
Example===
p {
font-family: sans-serif;
color: red;
}
4. Types of CSS or
Attaching a Style Sheet
Attach a style sheet to a page by adding the code to the
<head> section of the HTML page. There are 3 ways to attach
CSS to a page:
1. External Style Sheet: Best used to control styling on multiple
pages.
<link rel="stylesheet" type="text/css"
media="all" href="css/styles.css" />
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is
used directly within HTML tags.
<p style=“color: red”>Some Text</p>
5. Types of CSS- External CSS
A page can link to multiple style sheet file.
It uses Two fils-1 .CSS and 2. .HTML
5
P{color:red;} style.CSS
<head>
<link href="style.css" rel="stylesheet" /></head>
<body><p>This is External CSS</p>
.HTML
CS380
6. Internal CSS:
It apply on Single Page.
It uses <style> Tag in <head> and </head>.
6
<head>
<style>
p { font-family: arial;
color: red; }
h2 { background-color: yellow; }
</style>
</head> <body><h1>Internal CSS</h1>
<p>This is Internal CSS</p></body>
HTML
CS380
7. Inline styles: the style attribute
It apply on single line of HTML code.
It uses style as attribute.
Higher precedence than internal or external CSS styles
7
<p style="font-family: chiller; color: red;">
This is a paragraph</p>
HTML
CS380
8. CSS properties for colors
8
p {
color: red;
background-color: yellow;
}
CSS
CS380
This paragraph uses the style above output
property description
color color of the element's text
background-color
color that will appear behind the
element
9. CSS comments /*…*/
9
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
CSS (like HTML) is usually not commented as rigorously
as programming languages such as Java
The // single-line comment style is NOT supported in
CSS
The <!-- ... --> HTML comment style is also NOT
supported in CSS
CS380
10. CSS properties for fonts
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
CS380
10
<html>
<head><style>
p {
font-family :chiller;
font-size :20px;
font-style :italic;
font-weight :bold
} </style></head><body>
<p> This text formatted with font properties</p></body></html
Example:
11. CSS properties for text
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
word-spacing,
letter-spacing
gaps between the various portions
of the text
text-indent
indents the first letter of each
paragraph
CS380
11
13. CSS properties for backgrounds
property description
background-color color to fill background
background-image image to place in background
background-position
placement of bg image within
element
background-repeat
whether/how bg image should be
repeated
CS380
13
15. CSS Box Model Properties:
CS380
15
property description
height To Change height of Section.
width To Change width of Section.
margin
Use to define margin space along
with four side
Padding
Use to define space along with
four side between border and
content.
Border
Use to define border around
content