Scribd
Upload
4 views

Introduction to External CSS Styling

The document provides a guide on how to use external CSS for styling HTML documents. It covers linking a CSS file, setting background colors, styling headings and paragraphs, customizing list items, adjusting images, adding hover effects to links, and styling footers. Each section includes specific CSS rules to achieve the desired styling effects.

Uploaded by

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

Introduction to External CSS Styling

The document provides a guide on how to use external CSS for styling HTML documents. It covers linking a CSS file, setting background colors, styling headings and paragraphs, customizing list items, adjusting images, adding hover effects to links, and styling footers. Each section includes specific CSS rules to achieve the desired styling effects.

Uploaded by

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

Introduction to External CSS Styling

1. Linking an External CSS File

To use an external CSS file, we need to create a .css file and link it to our HTML document
using the following code inside the <head> section:

<link rel="stylesheet" href="styles.css">

This tells the browser to use the styles.css file for styling the webpage.

2. Setting a Background Color

To change the webpage background color, add this rule in styles.css:

body {
background-color: lightblue;
}

This will apply a light blue background to the entire page.

3. Styling the Heading

We can customize headings using a unique font, color, and size:

h1 {
font-family: 'Arial', sans-serif;
color: darkblue;
font-size: 32px;
}
4. Styling Paragraph Text

To make text bold or italic, use the following styles:

p{
font-weight: bold; /* Makes text bold */
font-style: italic; /* Makes text italic */
}

5. Customizing List Items

You can use custom bullets or add a border to list items:

ul {
list-style-type: square; /* Custom bullet shape */
}

li {
border: 1px solid black; /* Adds a border around each item */
padding: 5px;
}

6. Styling an Image

To adjust an image's width and add a small border:

img {
width: 300px; /* Adjusts the width */
border: 2px solid black; /* Adds a small border */
}

7. Adding a Hover Effect to Links

We can change the link color when hovered over:

a:hover {
color: red;
}

This changes the link color to red when the mouse is over it.
8. Styling the Footer

To center-align the footer and change its text color:

footer {
text-align: center; /* Centers text */
color: gray; /* Changes text color */
}

You might also like