5 Lab 27,28 CSS Basics
5 Lab 27,28 CSS Basics
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.
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>