Scribd
Upload
9 views

Chapter 6 Css

The detail notes for the chapter CSS

Uploaded by

dulusaloi.99
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Chapter 6 Css

The detail notes for the chapter CSS

Uploaded by

dulusaloi.99
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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

You might also like