Scribd
Upload
2 views

CSS_And_Multimedia_Topics

The document provides an overview of web development concepts, focusing on HTML elements for multimedia, forms, and CSS styling. It covers how to embed images, audio, and video, as well as the different types of CSS and their properties for styling HTML elements. Additionally, it discusses advanced CSS features like pseudo-classes, pseudo-elements, animations, and filter effects.

Uploaded by

deepakchoudhary982821
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
2 views

CSS_And_Multimedia_Topics

The document provides an overview of web development concepts, focusing on HTML elements for multimedia, forms, and CSS styling. It covers how to embed images, audio, and video, as well as the different types of CSS and their properties for styling HTML elements. Additionally, it discusses advanced CSS features like pseudo-classes, pseudo-elements, animations, and filter effects.

Uploaded by

deepakchoudhary982821
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/ 13

Internet - Concepts and Overview

Images and Multimedia

HTML supports embedding images, audio, and video to enrich web content.

**Images**: Use `<img>` tag

```html

<img src="image.jpg" alt="Sample Image" width="300" height="200">

```

**Audio**: Use `<audio>` tag

```html

<audio controls>

<source src="sound.mp3" type="audio/mpeg">

</audio>

```

**Video**: Use `<video>` tag

```html

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

</video>

```
Internet - Concepts and Overview

Forms and Controls

Forms collect user data through various controls.

**Common Controls**:

- `<input type="text">`: Single-line input

- `<input type="password">`: Password input

- `<input type="checkbox">`: Multiple choices

- `<input type="radio">`: Single choice among many

- `<textarea>`: Multi-line text

- `<select>`: Dropdown list

**Example**:

```html

<form>

<input type="text" name="name"><br>

<input type="checkbox" name="subscribe"> Subscribe<br>

<input type="submit" value="Submit">

</form>

```
Internet - Concepts and Overview

Types of Style Sheets

There are three types of CSS (Cascading Style Sheets):

1. **Inline CSS** - Written within an HTML element.

```html

<p style="color:red;">This is red text.</p>

```

2. **Internal CSS** - Written inside `<style>` tag in the `<head>` section.

```html

<style>

p { color: blue; }

</style>

```

3. **External CSS** - Linked as a separate `.css` file.

```html

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

```
Internet - Concepts and Overview

Different Elements of Style Sheets

CSS applies styles to HTML elements using:

- **Selectors**: Target HTML elements (`p`, `.class`, `#id`)

- **Properties**: What you want to style (e.g., `color`, `font-size`)

- **Values**: The value of the property (e.g., `blue`, `16px`)

**Example**:

```css

h1 { color: green; font-size: 24px; }

```
Internet - Concepts and Overview

CSS Properties

CSS properties are used to style HTML elements.

Common properties:

- `color`: Text color

- `background-color`: Background color

- `font-size`: Size of text

- `margin` and `padding`: Spacing

- `border`: Border style

**Example**:

```css

div {

background-color: lightgrey;

padding: 20px;

border: 1px solid black;

```
Internet - Concepts and Overview

CSS Classes

CSS classes let you apply the same styles to multiple elements.

**Example in HTML**:

```html

<p class="highlight">This is important.</p>

```

**CSS**:

```css

.highlight {

background-color: yellow;

font-weight: bold;

```
Internet - Concepts and Overview

Pseudo Classes

A pseudo-class is used to define a special state of an element.

**Example**:

```css

a:hover {

color: red;

```

This changes the link color when you hover over it.

Other examples: `:first-child`, `:focus`, `:visited`, `:active`


Internet - Concepts and Overview

Pseudo Elements

Pseudo-elements let you style parts of an element.

**Example**:

```css

p::first-letter {

font-size: 200%;

color: red;

```

Common pseudo-elements: `::first-line`, `::before`, `::after`, `::selection`


Internet - Concepts and Overview

CSS Styling (Background, Text Format, Controlling Fonts)

CSS lets you control background, text, and fonts.

**Background**:

```css

body {

background-color: lightblue;

background-image: url('bg.jpg');

```

**Text Format**:

```css

h1 {

text-align: center;

text-transform: uppercase;

```

**Fonts**:

```css

p{

font-family: Arial, sans-serif;

font-size: 14px;

```
Internet - Concepts and Overview

Working With Block Elements and Objects

Block elements (e.g., `<div>`, `<p>`, `<section>`) start on a new line and take full width.

**Example**:

```html

<div style="border: 1px solid black; padding: 10px;">

This is a block element.

</div>

```

You can style block elements with CSS to control their layout and behavior.
Internet - Concepts and Overview

Working with Lists and Tables

**Lists** can be styled with `list-style-type`, `margin`, and `padding`.

**Example**:

```css

ul {

list-style-type: square;

margin: 10px;

```

**Tables** can be styled with borders, spacing, and colors.

**Example**:

```css

table {

border-collapse: collapse;

td, th {

border: 1px solid black;

padding: 8px;

```
Internet - Concepts and Overview

CSS Filter Effects

Filter effects let you apply visual effects like blur, brightness, contrast.

**Example**:

```css

img {

filter: grayscale(100%);

```

Other filters: `blur()`, `brightness()`, `contrast()`, `sepia()`, `drop-shadow()`


Internet - Concepts and Overview

Animations

CSS animations allow you to animate HTML elements.

**Example**:

```css

@keyframes slide {

from { left: 0px; }

to { left: 100px; }

div {

position: relative;

animation-name: slide;

animation-duration: 2s;

```

Use `@keyframes` to define animation steps.

You might also like