Scribd
Upload
5 views

Radhika Css

CSS, or Cascading Style Sheets, is used to style HTML elements for various media and devices, allowing for efficient control of web page layouts. It can be implemented through external, internal, or inline styles, with unique selectors for IDs, classes, and universal elements. CSS also includes properties for backgrounds and opacity, enhancing design flexibility.

Uploaded by

Jay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Radhika Css

CSS, or Cascading Style Sheets, is used to style HTML elements for various media and devices, allowing for efficient control of web page layouts. It can be implemented through external, internal, or inline styles, with unique selectors for IDs, classes, and universal elements. CSS also includes properties for backgrounds and opacity, enhancing design flexibility.

Uploaded by

Jay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

CSS Introduction

What is CSS?

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files

Why Use CSS?


CSS is used to define styles for your web pages, including the design,
layout and variations in display for different devices and screen sizes.

CSS Syntax

 The selector points to the HTML element you want to style.


 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated
by a colon.
 Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

Three Ways to Insert CSS


There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS

External CSS
With an external style sheet, you can change the look of an entire website by
changing just one file!
Example

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Internal CSS
An internal style sheet may be used if one single HTML page has a unique
style.
The internal style is defined inside the <style> element, inside the head
section

Example

<! DOCTYPE html>


<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Inline CSS
An inline style may be used to apply a unique style for a single element.

Example

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

CSS Comments
A CSS comment is placed inside the <style> element, and starts with /* and
ends with */:
Example

/* This is a single-line comment */

/*p {
color: red;
}
*/

CSS Backgrounds
CSS background-color
The background-color property specifies the background color of an element.

Example
The background color of a page is set like this:

body {
background-color: lightblue;
}
The CSS id Selector

 The id of an element is unique within a page, so the id selector is used


to select one unique element!
 To select an element with a specific id, write a hash (#) character,
followed by the id of the element.

Example
#para1 {
text-align: center;
color: red;
}

The CSS class Selector


The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed
by the class name.
it is used to multiple elements.
Example
.center {
text-align: center;
color: red;
}

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page .

Example
*{
text-align: center;
color: blue;
}
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can
take a value from 0.0 - 1.0. The lower value, the more transparent:

opacity 1

opacity 0.6

opacity 0.3

opacity 0.1

Example
div {
background-color: green;
opacity: 0.3;
}

You might also like