Chapter 6 CSS (Cascading Style Sheet)
1. Static Web Page
• De nition: A static web page is a type of web page that displays the same content for
every visitor. The content of the web page does not change unless the page is
manually updated.
• Characteristics:
◦ Fixed content
◦ Simple and quick to create
◦ Does not require server-side scripting
◦ Suitable for small websites
2. Dynamic Web Page
• De nition: A dynamic web page is a web page that displays different content each
time it's viewed. The content is generated in real-time based on user interactions,
m
database data, or other factors.
o
• Characteristics:
.c
◦ Content changes dynamically
m
◦ Requires server-side scripting (e.g., PHP, ASP.NET)
o
◦ Useful for large websites (like e-commerce websites)
al
◦ User interactions can in uence the content displayed
3. What is DHTML?
a n
a s
h
• De nition: DHTML stands for Dynamic HTML. It is not a single technology but a
: //
combination of HTML, CSS, JavaScript, and sometimes DOM (Document Object
s
Model). DHTML allows the web page to change dynamically without requiring
p
reloading.
• Advantages:
◦
◦ h t t
Allows dynamic content changes on the y
Improved interactivity and user experience
◦ Faster loading time, as only parts of the page may be updated
4. Components of DHTML
• HTML (Hypertext Markup Language): The standard language for creating web
pages and web applications.
• CSS (Cascading Style Sheets): Used for designing the layout and look of web pages.
• JavaScript: A scripting language that allows interactive elements and dynamic
updates on a web page.
• DOM (Document Object Model): Represents the structure of HTML or XML
documents as a tree, allowing for manipulation of content via JavaScript.
1

fi
fi
fi
fl
fl
5. Cascading Style Sheets (CSS)
• De nition: CSS is a style sheet language used to describe the presentation of a
document written in HTML or XML. It allows developers to separate content
(HTML) from the design of the web page.
• Bene ts:
◦ Enhances the appearance of web pages
◦ Reduces the complexity of HTML code
◦ Enables responsive web designs for different devices
6. What Cascading Implies
• Cascading in CSS refers to the order of priority when different styles are applied to
an element. CSS styles "cascade" down, with the highest priority rule taking effect.
• Rules Priority:
1. Inline Styles: Directly written in the HTML tag.
2. Internal Styles: De ned within the <style> tag in the HTML le.
3. External Styles: Written in an external CSS le.
4. Browser Default Styles: Prede ned by the browser.
7. Basic Selectors in CSS
o m
•
.c
Element Selector: Targets all instances of a speci c HTML tag (e.g., h1, p).
m
o
• Class Selector: Targets elements based on their class attribute (e.g., .class-
al
name).
n
• ID Selector: Targets a single element with a speci c ID (e.g., #id-name).
•
s a
Universal Selector: Targets all elements on a page (e.g., *).
a
• Attribute Selector: Targets elements with speci c attributes (e.g.,
[type="text"]).
// h
8. Methods of Applying CSS
s :
t tp
h
• Inline CSS: Styles are applied directly to HTML elements using the style
attribute.
• Internal CSS: Styles are written within the <style> tag inside the <head>
section of the HTML le.
• External CSS: Styles are written in a separate CSS le and linked to the HTML
document using the <link> tag.
• Imported CSS: Styles are imported into another stylesheet using the @import rule.
9. Using Multiple Types of Style Sheets Together
• It's possible to combine inline, internal, and external CSS styles on the same web
page.
• Example:
2

fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
fi
◦ Inline CSS might override internal or external CSS, but external CSS is
preferred for easier maintenance.
◦ Always follow the cascade order for the style priority.
10. Font Properties
• Font Family: De nes the font type for the text (font-family: Arial,
sans-serif;).
• Font Size: Speci es the size of the text (font-size: 16px;).
• Font Style: Allows italicizing or normalizing text (font-style: italic;).
• Font Weight: De nes the boldness of the text (font-weight: bold;).
• Line Height: Sets the height between lines of text (line-height: 1.5;).
11. Text Properties
• Color: Sets the color of the text (color: blue;).
• Text Align: Aligns text (e.g., left, right, center) (text-align: center;).
• Text Decoration: Adds underline, overline, or strikethrough to text (text-
m
decoration: underline;).
o
• Text Transform: Converts text to uppercase, lowercase, or capitalize (text-
.c
transform: uppercase;).
o m
al
12. Background Properties
•
n
Background Color: Sets the background color of an element (background-
a
s
color: #ffffff;).
•
a
Background Image: Adds an image to the background (background-image:
h
//
url('image.jpg');).
•
:
Background Repeat: Controls repetition of background image (background-
s
p
repeat: no-repeat;).
•
t t
Background Position: Speci es the position of the background image
h
(background-position: center;).
13. Margin
• De nition: The margin is the space outside the border of an element. It clears an area
around the element, creating space between elements.
• Syntax: margin: 20px; (applies a margin of 20px to all sides).
14. Padding
• De nition: Padding is the space between the content of the element and its border. It
creates inner space within an element.
• Syntax: padding: 10px; (applies padding of 10px to all sides).
3

fi
fi
fi
fi
fi
fi
15. Border Properties
• Border Width: De nes the thickness of the border (border-width: 2px;).
• Border Style: Speci es the style of the border (e.g., solid, dashed) (border-
style: solid;).
• Border Color: Sets the color of the border (border-color: red;).
• Shorthand: border: 2px solid red; (combines width, style, and color).
16. Height and Width Property
• De nition: These properties de ne the height and width of an element.
• Syntax:
◦ height: 100px; (sets the height to 100px)
◦ width: 200px; (sets the width to 200px)
17. Float Property
• De nition: The oat property is used to position elements to the left or right of their
container, allowing text and inline elements to wrap around it.
o m
.c
• Syntax: float: left; (moves the element to the left side).
• Common Usage: Floating images with text wrapped around them.
o m
al
18. Outline Property
•
a n
De nition: The outline is a line drawn outside the border of an element. Unlike
s
borders, outlines do not take up space.
a
h
• Properties:
//
◦ Outline Width: De nes the width of the outline (outline-width:
2px;).
s :
◦
tp
Outline Color: Sets the color of the outline (outline-color:
blue;).
t
◦
h
Outline Style: Speci es the style (solid, dashed) (outline-style:
dashed;).
◦ Shorthand: outline: 2px dashed blue;
4

fi
fi
fi
fl
fi
fi
fi
fi
fi
