CSS

CSS
Cascading Style Sheet
S.Muthuganesh M.Sc.,B.Ed.,

CSS
• CSS stands for Cascading Style Sheet.
• CSS is used to design HTML tags.
• CSS is a widely used language on the web.
• CSS is used along with HTML and JavaScript in most websites to create user
interfaces for web applications and user interfaces for many mobile applications.
• CSS style definitions are saved in external CSS files so it is possible to change the
entire website by changing just one file.
Muthuganesh S 2

Three Ways to Insert
CSS
• External CSS
• Internal CSS
• Inline CSS
• An external style sheet can be written in any text editor,
and must be saved with a .css extension.
• The external .css file should not contain any HTML tags.
• The internal style is defined inside the <style>…</style>
element, inside the head section.
• An inline style may be used to apply a unique style for a
single element.
Muthuganesh S 3

CSS SYNTAX
• Each declaration includes a CSS property name
and a value, separated by a colon(:).
• Multiple CSS declarations are separated with
semicolons(;)
• declaration blocks are surrounded by curly
braces{ }
Muthuganesh S 4

Where to
• styles are defined within the <style>…</style> element, inside the <head>…</head> section
of an HTML page
<html>
<head>
<title> First CSS</title>
<style type=“text/css”>
p
{
text-align:center;
font-family:verdana;
}
</style>
<body>
<p>Welcome Guys!!!</p>
</body>
</html> Muthuganesh S 5

CSS selectors
• CSS selectors are used to select the content you want to style
Here are several different types of selectors in CSS.
• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector
Muthuganesh S 6

ELEMENT SELECTOR
• The element selector selects the HTML element by name, elements
are paragraph tag<p>…</p>, header tags<h1>…</h1>
• Example
p
{
font-family:Verdana;color:red;size:10;text-align:right;
}
Muthuganesh S 7

Id selector
• The id selector uses the id attribute of an HTML element to select a specific
element.
• write a hash (#) character, followed by the id of the element.
Example
#style1
{
font-size:5px;
text-align:center;
background-color: lightblue;
}
• <p id=“style1”> Welcome to Department of Computer Science</P>
Muthuganesh S 8

class selector
• The class selector selects HTML elements with a specific class attribute. It is
declared with a period character . (full stop symbol) followed by the class name.
Example
.classstyle
{
border:1px solidblack;
background-color:yellow;
}
<div class=“classstyle”>
Welcome
</div>
Muthuganesh S 9

The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
Example
*{
text-align:center;
background-image:url(“shiva.jpg”);
}
Muthuganesh S 10

Group selector
• The grouping selector selects all the HTML elements with the same
style like h1,p,h2 all has same style.
• Example
p,h1,h2
{
font-family:serif;
color:blue;
}
Muthuganesh S 11

Inline style
• Its used to change specific element with help of style as attribute.
• add the style as attribute to the relevant element. The style attribute can contain
any CSS property.
<html>
<head><title>inline style</title>
</head>
<body>
<p style="color:red;text-align:center;"> This Paragraph Style</p>
</body>
</html>
Muthuganesh S 12

External Style Sheet
• Its used for when we want multiple webpages.
• Its help to change a look of entire website by the change of single file.
• It uses the <link> tag on every pages and the <link> tag should be put
inside the head section.
• The external style sheet may be written in any text editor but must be
saved with a .css extension.
• This file should not contain HTML elements.
Muthuganesh S 13

Example
h1{ color:green;}
body{background-color:yellow;}
Save this file as stylesheet1.css. Use this file as a link in every webpage.
<html>
<head>
<title>stylesheet</title>
<link rel=“stylesheet” href=“stylesheet1.css”/>
</head>
<body>
<h1>Welcome!!!</h1>
</body>
</html>
Muthuganesh S 14

CSS

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to CSS

Similar to CSS (20)

More from Muthuganesh S

More from Muthuganesh S (12)

Recently uploaded

Recently uploaded (20)

CSS