HTML CSS
HTML CSS controls the presentation and appearance of web page content. Styles allow you to define how elements are displayed, such as their colors, fonts, sizes, spacing, and more. Styles make your web page visually appealing and help create a consistent look and feel.
What is CSS?
CSS, short for Cascading Style Sheets, is used to style and format the layout of a webpage. It allows you to control the appearance of multiple web pages with a single style sheet.
Key Features of CSS:
- Set colors and fonts
- Adjust text size and spacing
- Position elements on the page
- Use background images or colors
- Make pages responsive to different devices and screen sizes including desktops, tablets, and smartphones.
Understanding Cascading
The term “cascading” in CSS means that styles applied to a parent element will also affect all its child elements unless otherwise specified. This allows you to set a common style for a group of elements efficiently.
Example
Let’s say we want to set the text color of all elements within the <body> to red. Here’s how we can do that
Output
In this example:
Setting the Body Text Color:
body {
color: red;
}
- This rule sets the text color for the <body> element to red.
- Because of the cascading nature of CSS, all child elements (like <h1>, <p>, and the <div>) will inherit this color unless we specify a different color for them.
Ways to Add CSS to HTML
There are three primary ways to add CSS to your HTML documents:
- Inline CSS: Use the style attribute within HTML elements. Best for small, specific changes.
- Internal CSS: Use the <style> element in the <head> Best for single-page styles.
- External CSS: Use a separate .css file linked with the <link> Best for applying styles across multiple pages.
Each method has its specific use cases and advantages.
1. Inline CSS
Inline CSS is used to apply a unique style to a single HTML element. It is defined using the style attribute within the HTML element itself.
Example
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style=”color: blue;”>This is a blue heading</h1>
<p style=”color: red; font-size: 20px;”>This is a red paragraph with larger text.</p>
</body>
</html>
Output
In this example:
- The style attribute is added directly to the HTML tags.
- Styles are specified within the style attribute as a list of CSS properties and values.
- In the example, the heading (<h1>) is styled with a blue color, and the paragraph (<p>) is styled with red color and larger text size.
2. Internal CSS
Internal CSS is used to define styles for a single HTML page. The styles are included within a <style> element inside the <head> section of the HTML document.
Example
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
}
p {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is a blue heading</h1>
<p>This is a red paragraph with larger text.</p>
</body>
</html>
Output
In this example:
- Styles defined inside <style> tags apply to all elements of that type throughout the document unless overridden.
- The body element is styled with a light gray background using body { background-color: lightgray; }.
- All <h1> headings are styled with a blue color using h1 { color: blue; }.
- All <p> paragraphs are styled with a red color and a font size of 20 pixels using p { color: red; font-size: 20px; }.
3. External CSS
External CSS is used to define styles for multiple HTML pages. The styles are written in a separate .css file and linked to the HTML document using the <link> element in the <head> section.
Example
CSS File (styles.css):
body { background-color: powderblue; }
h1 { color: blue; }
p { color: red; }
HTML Document:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output
In this example:
- The CSS rules are placed in a separate file called styles.css.
- The HTML file links to the CSS file using the <link> The href attribute specifies the path to the CSS file.
- These styles can be reused across multiple HTML documents. In the example, the same styles (background color for body, blue heading, and red paragraph) are applied.
Common CSS Properties
Here’s a list of some common CSS properties:
| Property | Description | Example |
|---|---|---|
| color | Sets the color of the text. | color: red; |
| background-color | Sets the background color of an element. | background-color: lightblue; |
| font-family | Specifies the font of the text. | font-family: Arial, sans-serif; |
| font-size | Sets the size of the text. | font-size: 20px; |
| font-weight | Sets the weight (boldness) of the text. | font-weight: bold; |
| text-align | Aligns the text horizontally. | text-align: center; |
| text-decoration | Adds decoration to text (underline, overline, etc.). | text-decoration: underline; |
| margin | Sets the space outside the element’s border. | margin: 10px; |
| padding | Sets the space inside the element’s border. | padding: 10px; |
| border | Sets the border around an element. | border: 1px solid black; |
| width | Sets the width of an element. | width: 100px; |
| height | Sets the height of an element. | height: 100px; |
| display | Specifies how an element is displayed. | display: block; |
| position | Specifies the type of positioning for an element. | position: relative; |
| top, right, bottom, left | Sets the position of an element relative to its container. | top: 10px; |
| overflow | Specifies what happens if content overflows an element’s box. | overflow: hidden; |
| z-index | Sets the stack order of an element. | z-index: 10; |
| opacity | Sets the opacity level of an element. | opacity: 0.5; |
| float | Specifies whether an element should float to the left or right. | float: left; |
| clear | Specifies what elements can float beside the cleared element. | clear: both; |
Course Video
YouTube Reference :
Practice Scenarios
Scenario 1: Basic Inline Styling
Objective: Apply inline CSS styles to an HTML element.
Expected Output: A webpage with a heading (brown color) and a paragraph (green) styled using inline CSS.
Output:
Scenario 2: Internal CSS Styling
Objective: Apply CSS styles using an internal stylesheet.
Expected Output: A webpage with a heading (Orange color) and a paragraph (Purple color)styled using internal CSS.
Output:
Scenario 3: External CSS Styling
Objective: Apply CSS styles using an external stylesheet.
Expected Output: A webpage with a heading (cyan color with 32 font size) and a paragraph (navy color with 22 font size) styled using an external CSS file.
Output:
