Scribd
Upload
12 views4 pages

Styling Web Pages in HTML

Hi It's html

Uploaded by

parmeshasp52
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
12 views4 pages

Styling Web Pages in HTML

Hi It's html

Uploaded by

parmeshasp52
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/ 4

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; }

You might also like