Web Page Design 2
Web Page Design 2
When designing a web page, CSS (Cascading Style Sheets) is used to define how HTML
elements appear on the screen. There are three main ways to apply styles to a web page:
External Style Sheets, Internal Style Sheets, and Inline Styles.
---
An external style sheet is a separate .css file linked to an HTML document. It is the best practice
for maintaining large websites, as it allows for consistent styling across multiple web pages.
Advantages:
Simplifies maintenance, as changes in one file reflect across all linked pages.
Disadvantages:
Requires an additional HTTP request to load the CSS file, which may affect performance.
Styles are not immediately visible unless the CSS file is properly linked.
Example:
HTML file (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
---
An internal style sheet is written within the <style> tag inside the <head> section of an HTML
document. This method is useful for styling a single page without affecting others.
Advantages:
Disadvantages:
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
h1 {
color: red;
font-size: 26px;
text-align: center;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
---
Inline styles are applied directly to an HTML element using the style attribute. This method is
useful for quick changes but is not recommended for larger projects due to poor maintainability.
Advantages:
Disadvantages:
Example:
---
selector {
property: value;
}
Example:
p{
color: blue;
font-size: 18px;
}
This rule applies a blue color and 18px font size to all <p> elements.
---
3. Types of Selectors
*{
margin: 0;
padding: 0;
}
h1 {
color: purple;
}
.highlight {
background-color: yellow;
}
HTML Example:
#main-title {
font-size: 30px;
color: darkblue;
}
HTML Example:
---
h1, h2, p {
font-family: Arial, sans-serif;
}
div > p {
color: green;
}
div p {
color: blue;
}
4. Attribute Selector ([attr]): Targets elements with specific attributes.
input[type="text"] {
border: 2px solid red;
}
---
body {
background-color: lightgray;
color: black;
}
2. Font Styling
p{
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
}
div {
width: 200px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
a:hover {
color: red;
}
a:active {
color: green;
}
---
Conclusion
CSS rules enhance the visual appeal and responsiveness of a web page.
By following best practices in CSS, web pages can be both aesthetically pleasing and easy to
maintain.
When designing a web page, CSS (Cascading Style Sheets) is used to define the layout,
appearance, and behavior of HTML elements. CSS separates content (HTML) from
presentation, making it easier to maintain and update web pages.
There are three main ways to apply CSS to an HTML document:
---
An external style sheet is a separate .css file that is linked to an HTML document using the
<link> tag inside the <head> section. This approach is best for maintaining a consistent look
across multiple pages.
✖ Requires an additional HTTP request to load the CSS file, which may affect page speed.
✖ If the CSS file fails to load, the web page may appear unstyled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This paragraph is styled using an external CSS file.</p>
</body>
</html>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: blue;
text-align: center;
}
p{
color: darkgray;
font-size: 16px;
}
---
An internal style sheet is defined within the <style> tag inside the <head> section of an HTML
document. It is useful for styling a single page without affecting other pages.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightblue;
}
h1 {
color: darkred;
text-align: center;
}
p{
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, Internal CSS</h1>
<p>This paragraph is styled using an internal CSS block.</p>
</body>
</html>
---
Inline styles are applied directly to an HTML element using the style attribute. This method is
useful for quick testing but is not recommended for large projects.
---
selector {
property: value;
}
p{
color: blue;
font-size: 18px;
text-align: justify;
}
---
*{
margin: 0;
padding: 0;
}
h1 {
color: purple;
}
.highlight {
background-color: yellow;
}
#main-title {
font-size: 30px;
}
---
1. Group Selector (A, B, C): Applies the same styles to multiple elements.
h1, h2, p {
font-family: Arial, sans-serif;
}
div > p {
color: green;
}
3. Descendant Selector (Whitespace ): Targets nested elements.
div p {
color: blue;
}
input[type="text"] {
border: 2px solid red;
}
---
div {
width: 300px;
padding: 10px;
border: 2px solid black;
margin: 20px;
}
---
6. Conclusion
By following best practices in CSS, web pages can be both visually appealing and easily
maintainable.