css.ppt

Disclaimer: This presentation is prepared by trainees of
baabtra as a part of mentoring program. This is not official
document of baabtra –Mentoring Partner
Baabtra-Mentoring Partner is the mentoring division of baabte System Technologies Pvt . Ltd

BhasulaBhas.A.K
bhasula994@gmail.com
www.facebook.com/username
twitter.com/username
in.linkedin.com/in/profilename
12345656
topic

Cascading Style Sheet(CSS)
 A cascading style sheet(CSS) is a web page derived from
multiple sources with a defined order of precedence where
the definition of any style element conflict.
 CSS saves a lot of work
 CSS define how HTML elements are to be displayed

Syntax Of CSS
A CSS rule set consist of a selector and a declaration
block.
Selector Declaration Declaration
Property Value Property Value
• 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 property name and a value, separated by a colon.
h1 {color: red; font-size:15px;}

Types Of CSS
There are 3 types of CSS styles declaration are as follows:
1. Internal(Embedded) Styles
2. Inline Styles
3. External Styles
Internal (Embedded)Styles
Internal styles are placed inside the head section of a particular web
page via the style tag. Internal styles are also called “Embedded” styles .
Inline Styles
Inline styles are placed directly inside an HTML element in the code.
External Styles
An external style sheet is a separate page which is then linked to the web
page.

CSS Selectors
CSS selectors allow you to select and manipulate HTML
elements.
CSS selectors are used to “find”(or select) HTML elements based
on their id,class,type,attribute,and more.
 The CSS selectors are follows:
1. Element Selector
2. ID Selector
3. Class Selector
4. Grouping Selector

• The Element Selector
The element selector selects elements based on the
element name.
Example
P{
text-align: center;
Color: red;
}
When we use above example, we get all<p> elements will be
center-aligned with a red text color.

• The id Selector
The id selector uses the id attribute of an HTML element to select a
specific element.
An id should be unique within a page, so the id selector is used if
you want to select a single,unique element.
To select an element with a specific id, write a hash(#)character,
followed by the id of the element.
The style rule below will be applied to the HTML element with
id=“paragraph”
Example
#paragraph{
text-align: center;
color: red;
}

• Class Selector
The class selector selects elements with a specific class
attribute.
To select elements with a specific class ,write a
period(.)character , followed by the name of the class
In the example below, all HTML elements with
class=”center” will be center-aligned
Example
.center{
text-aligned: center;
Color: red;
}

• Grouping Selectors
You can group the selectors , to minimize the code.
To group selectors , separate each selector with comma.
Example
h1,h2,h3,p{
text-align: center;
Color: red;
}
In the above example we have grouped some
selectors.

Example Program Of CSS
<html>
<head>
<style>
#tb
{
Border-radius:25px;
Width:200px;
Padding:20px;
}
</style>
</head>
<body>
<table border=1 id=“tb” cellpadding=“10px”>
<tr>
<th colspan=“3”><u>Student
Details</u></th>
</tr>
<tr>
<td>Name</td>
<td>Address</td>
<td>Phone Number</td>
</tr>
<tr>
<td>Athira</td>
<td>Keeripoyil(h)<br/>Mukkam</td>
<td>9946757413</td>
</tr>
<tr><td>Aswathi</td.
<td>Periyapurath(h)<br/.Kozhikode</td>
<td>9656368644</td></tr>
</body>
</html>

Want to learn more about programming or Looking to become a good programmer?
Are you wasting time on searching so many contents online?
Do you want to learn things quickly?
Tired of spending huge amount of money to become a Software professional?
Do an online course
@ baabtra.com
We put industry standards to practice. Our structured, activity based courses are so designed
to make a quick, good software professional out of anybody who holds a passion for coding.

Follow us @ twitter.com/baabtra
Like us @ facebook.com/baabtra
Subscribe to us @ youtube.com/baabtra
Become a follower @ slideshare.net/BaabtraMentoringPartner
Connect to us @ in.linkedin.com/in/baabtra
Give a feedback @ massbaab.com/baabtra
Thanks in advance
www.baabtra.com | www.massbaab.com |www.baabte.com

css.ppt

Related slideshows

More Related Content

css.ppt