Scribd
Upload
3 views

5 Lab 27,28 CSS Basics

The document discusses Cascading Style Sheets (CSS) and its role in web development, highlighting its importance in styling HTML content, maintaining consistency, and enhancing user experience. It explains different types of CSS: inline, internal, and external, along with their advantages and disadvantages. Additionally, it covers CSS selectors and various properties that can be applied to style web pages effectively.

Uploaded by

yahyakhan.superiorpeshawar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

5 Lab 27,28 CSS Basics

The document discusses Cascading Style Sheets (CSS) and its role in web development, highlighting its importance in styling HTML content, maintaining consistency, and enhancing user experience. It explains different types of CSS: inline, internal, and external, along with their advantages and disadvantages. Additionally, it covers CSS selectors and various properties that can be applied to style web pages effectively.

Uploaded by

yahyakhan.superiorpeshawar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

Applications of Information &

Communication Technology
Mr. Ali Hassan
Institute Of Management Sciences
Cascading Style Sheets
• CSS (Cascading Style Sheets) is a stylesheet language
used to describe the visual presentation of a web page. It
controls how HTML elements are displayed on the
screen, paper, or other media.

• Key Roles in Web Development:


• Styling HTML Content: CSS defines the layout, colors,
fonts, and overall appearance of web pages.
• Separation of Concerns: CSS allows developers to separate the
content (HTML) from the design (CSS). This makes the code easier to
read, maintain, and update.

• Consistency: By using external CSS files, developers can apply the


same style to multiple web pages, ensuring a consistent look and feel
across a website.

• Responsive Design: CSS enables websites to adapt to different


devices and screen sizes, ensuring usability across desktops, tablets,
and mobile devices.
• Enhanced User Experience (UX): A well-styled website is visually
appealing and easier to navigate, improving user satisfaction.
HTML VS CSS
STYLE RULES
• A CSS rule contains two parts
▫ Selector
▫ Declaration

Selector

h1,p {
font-family : Verdana; }
Property Value

Declaration
Types of CSS
• Inline CSS:
• CSS written directly within an HTML element's style
attribute.
• <p style="color: blue; font-size: 20px;">This text is
styled using Inline CSS.</p>
Inline CSS
• Key Features:
• Scope: Affects only the specific element where it is applied.
• Use Case: Quick styling for a single element, often for testing or
overriding styles temporarily.
• Advantages:
• Easy to use for small, one-off styles.
• Overrides styles from internal and external stylesheets due to higher
specificity.
• Disadvantages:
• Makes the HTML file messy and harder to maintain.
• Not reusable, leading to code duplication.
• Poor separation of content and design.
Internal CSS
• CSS written inside the <style> tag in the <head> section of the
HTML document.
• Key Features:
• Scope: Affects only the HTML document where it is written.
• Useful for small projects or when styles are specific to a single page.
• Advantages:
• Keeps styles centralized for a single page.
• No need to manage external files.
• Easy to implement and debug in smaller projects.
• Disadvantages:
• Styles are not reusable across multiple pages.
• Can make the HTML document bulky and less readable for large
projects.
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <style>
• p{
• color: green;
• font-size: 18px;
• }
• </style>
• </head>
• <body>
• <p>This text is styled using Internal CSS.</p>
• </body>
• </html>
External CSS
• CSS written in a separate .css file and linked to the HTML document
using the <link> tag.
• Key Features:
• Scope: Can be applied to multiple HTML documents by linking the
same stylesheet.
• Ideal for large projects requiring consistent styles across pages.
• Advantages:
• Promotes reusability and maintainability of styles.
• Clean and organized HTML documents.
• Faster loading for multiple pages as the browser can cache the CSS
file.
• Disadvantages:
• Requires an additional file to manage.
• Styles won’t apply if the CSS file is missing or not properly linked.
• Slightly slower initial load due to the external request for the CSS file.
• HTML File:
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <link rel="stylesheet" href="styles.css">
• </head>
• <body>
• <p>This text is styled using External CSS.</p>
• </body> </html>

• CSS File (styles.css):


•p {
• color: red;
• font-size: 16px;
CSS Selector
• Basic Selectors
• Universal Selector
• Type Selector (Element)
• Class Selector (dot Class)
• ID Selector (Hash ID)
• Grouping & Combinators
• Attribute Selectors
• Pseudo-Elements & Pseudo-Classes
CSS Properties-Value
1. color
2. background-color
3. font-size (in px)
4. font-family
5. font-weight
6. margin
7. padding
8. border: 2px solid black
9. text-align
10. line-height
11. width
12. height
13. display
14. position
15. background-color
16. background-image
17. background-attachment
18. background-size
19. font-style
20. line-spacing
21. word-spacing
22. text-decoration
23. text-transform
24. text-shadow
25. direction
26. white-space
27. text-indent
28. background-repeat
29. background-position
30. background

You might also like