Styling Web Pages in HTML
Styling web pages in HTML can be done in different ways using CSS (Cascading Style Sheets).
Below are the methods to style HTML elements:
1. **Inline CSS**:
- Inline CSS is used to apply styles directly to an HTML element using the `style` attribute.
Example:
<h1 style="color: blue; text-align: center;">This is a Blue Heading</h1>
2. **Internal CSS**:
- Internal CSS is used to define styles within the `<style>` tag in the `<head>` section of the HTML
document.
Example:
<head>
<style>
h1 {
color: red;
text-align: center;
</style>
</head>
3. **External CSS**:
- External CSS is used to link an external CSS file to the HTML document using the `<link>` tag.
Example:
<head>
<link rel="stylesheet" href="styles.css">
</head>
The external `styles.css` file will contain the CSS code like:
h1 {
color: green;
font-family: Arial, sans-serif;
4. **CSS Selectors**:
- CSS Selectors are used to select and style specific HTML elements. Common selectors include:
- Element Selector (e.g., `h1 {}`)
- Class Selector (e.g., `.classname {}`)
- ID Selector (e.g., `#idname {}`)
5. **CSS Properties**:
- Common CSS properties include:
- `color`: Changes the text color.
- `background-color`: Changes the background color.
- `font-size`: Changes the font size of text.
- `padding`: Adds space inside the element.
- `margin`: Adds space outside the element.
- `border`: Adds a border around the element.
- `text-align`: Aligns text (e.g., left, right, center).
6. **Responsive Design**:
- To make websites responsive, media queries are used in CSS.
Example:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
7. **CSS Box Model**:
- The CSS box model includes margins, borders, padding, and the actual content area. This
defines the space around HTML elements.
Example:
div {
margin: 20px;
padding: 10px;
border: 2px solid black;
width: 300px;
8. **Flexbox and Grid Layout**:
- Flexbox and CSS Grid are used for advanced layout designs.
- Flexbox: Used for aligning items in a flexible container.
- Grid: Defines two-dimensional grid-based layouts.
Example of Flexbox:
.container {
display: flex;
justify-content: center;
align-items: center;
Example of CSS Grid:
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
9. **Animations**:
- CSS can also be used to add animations and transitions.
Example:
.fade {
animation: fadeIn 3s ease-in-out;
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
