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
