Scribd
Upload
7 views

Techno3CSS

Brief on 3rd pdf.

Uploaded by

hrikroy201001001129
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
7 views

Techno3CSS

Brief on 3rd pdf.

Uploaded by

hrikroy201001001129
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/ 17

TECHNO INDIA UNIVERSITY

WEST BENGAL

CSS
(Cascading Style Sheet)

1
TECHNO INDIA UNIVERSITY
WEST BENGAL

The major points of CSS are given below:

• CSS stands for Cascading Style Sheet.


• CSS is used to design HTML tags.
• CSS is a widely used language on the web.

HTML, CSS and JavaScript are used for web designing. It helps the web
designers to apply style on HTML tags.

It is a style sheet language which is used to describe the look and formatting
of a document written in markup language. It provides an additional feature
to HTML. It is generally used with HTML to change the style of web pages and
user interfaces.
2
TECHNO INDIA UNIVERSITY
WEST BENGAL

<!DOCTYPE>
<html>
<head>
<style>
h1{
color:white;
background-color:red;
padding:5px;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>Techno India University</h1>
<p>This is Paragraph.</p>
</body>
</html> 3
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Syntax
A CSS rule set contains a selector and a declaration block.

• Selector: Selector indicates the HTML element you want to style. It could be
any tag like <h1>, <title> etc.
• Declaration Block: The declaration block can contain one or more
declarations separated by a semicolon. For the above example, there are two
declarations:
color: yellow;
font-size: 11 px;
4
Each declaration contains a property name and value, separated by a colon.
TECHNO INDIA UNIVERSITY
WEST BENGAL

• Property: A Property is a type of attribute of HTML element. It could


be color, border etc.

• Value: Values are assigned to CSS properties. In the above example,


value "yellow" is assigned to color property.

Selector{Property1: value1; Property2: value2; ..........;}

5
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are
the part of CSS rule set. CSS selectors select HTML elements according to its
id, class, type, attribute etc.

There are several different types of selectors in CSS.

• CSS Element Selector


• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector

6
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Element Selector

The element selector selects the HTML element by name.


<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html> 7
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific


element. An id is always unique within the page so it is chosen to select a
single, unique element.

It is written with the hash character (#), followed by the id of the element.

Let’s take an example with the id "para1".

8
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Id Selector (Contnd.)

<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello BCS3B</p>
<p>This paragraph will not be affected.</p>
</body>
</html> 9
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Id Selector (Contnd.)


<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
font-size: 20px;
}
#para3 {
text-align: right;
color: green;
}
</style>
</head>
<body>
<p id="para1">Hello BCS3B</p>
<p id="para3"> This paragraph will not be affected.</p>
</body> 10
</html>
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Class Selector

The class selector selects HTML elements with a specific class attribute.
It is used with a period character . (full stop symbol) followed by the
class name.

[Note: A class name should not be started with a number.]

Let's take an example with a class "center".

11
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Class Selector (Example)


<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<h2 class="center">This heading is blue and center-aligned.</h2>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>
12
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Class Selector for specific element


If you want to specify that only one specific HTML element should be
affected then you should use the element name with class selector.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html> 13
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Universal Selector: The universal selector is used as a wildcard character.


It selects all the elements on the pages.
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
14
</html>
TECHNO INDIA UNIVERSITY
WEST BENGAL

CSS Group Selector: The grouping selector is used to select all the elements
with the same style definitions.
• Grouping selector is used to minimize the code. Commas are used to
separate each selector in grouping.
Let's see the CSS code without group selector.

15
TECHNO INDIA UNIVERSITY
WEST BENGAL

<html>
CSS Group Selector Example
<head>
<style>
h1{
text-align: left;
color: red;
}
h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello TIU Students</h1>
<h2>Hello BCS3B students</h2>
<p>How are you all?</p>
</body>
</html> 16
TECHNO INDIA UNIVERSITY
WEST BENGAL

Thank You

17

You might also like