Lesson Outcomes
After completing this lesson, learners will be able to:
- Explain the purpose of styling in web development.
- Describe how CSS is used with HTML.
- Identify different ways to apply CSS to HTML.
- Understand basic styling properties.
- Apply simple styles to HTML elements.
Overview
HTML provides the structure of a webpage, while CSS (Cascading Style Sheets) is used to control the appearance and layout.
Styling is important because it makes web pages:
- Visually appealing
- Easier to read
- More user-friendly
- Consistent in design
This lesson introduces learners to how CSS is used to style HTML5 pages.
1. What is CSS?
CSS stands for Cascading Style Sheets.
It is used to control how HTML elements are displayed on a webpage.
CSS is used to style:
- Colours
- Fonts
- Layout
- Spacing
- Backgrounds
2. Purpose of Styling
Styling improves the overall quality of a website.
Benefits of Styling
- Enhances visual appearance
- Improves readability
- Creates consistency
- Improves user experience
Without CSS, web pages would look plain and unstructured.
3. Ways to Apply CSS
There are three main ways to apply CSS to HTML.
3.1 Inline CSS
- Applied directly inside an HTML tag
- Uses the
styleattribute
Example:
<p style="color: blue;">This is blue text</p>3.2 Internal CSS
- Written inside a
<style>tag - Placed in the
<head>section
Example:
<head>
<style>
p {
color: blue;
}
</style>
</head>3.3 External CSS
- Written in a separate
.cssfile - Linked to the HTML file
Example:
<link rel="stylesheet" href="style.css">Key Points
- External CSS is the most recommended method
- It keeps code clean and organised
4. Basic CSS Syntax
CSS follows a specific structure.
Syntax:
selector {
property: value;
}Example:
p {
color: red;
}Explanation:
p→ selectorcolor→ propertyred→ value
5. Common CSS Properties
CSS includes many properties used to style elements.
5.1 Colour
- Changes text colour
Example:
color: blue;5.2 Background Colour
- Changes background colour
Example:
background-color: yellow;5.3 Font Size
- Changes text size
Example:
font-size: 16px;5.4 Text Alignment
- Aligns text
Example:
text-align: center;5.5 Margin and Padding
- Margin → space outside element
- Padding → space inside element
6. Importance of CSS in Web Development
CSS is essential because it:
- Separates content from design
- Improves maintainability
- Allows consistent styling
- Enhances user experience
Key Notes
- CSS is used to style HTML elements.
- It controls colours, fonts, layout, and spacing.
- There are three ways to apply CSS: inline, internal, and external.
- CSS uses selector-property-value syntax.
- External CSS is the preferred method.
- CSS improves design, readability, and user experience.