Css.html

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

Anaghabalakrishnan
anaghabalakrishnan07@gmail.com
Anaghabalakrishnanchintu
twitter.com/username
in.linkedin.com/in/profilename
12345679
topic

CASCADING STYLE SHEET (CSS)
• Cascading style sheet are used to format the layout of Web
pages.
• They can be used to define text styles, table sizes, and other
aspects of Web pages that previously could only be defined in
a page’s HTML.

ADVANTAGES OF CSS
• CSS simplifies design changes.
• Separating content from design enables you to
create different style sheet for different
audiences and devices.
• As you get advanced with CSS, you can even
create multiple style sheets for the same Web
page.

CSS SYNTAX
A CSS rule set consist of a selectors and a declaration
block.
A CSS declaration always end with a semicolon, and a
declaration groups are surrounded by curly braces.
p {color: red; text-align: center;}
p-Selector.
{color: red; text-align: center;}-Declaration.
Where color and text-align is property, and blue and
center is value.

TYPES OF CSS STYLES
There are three types of CSS.
1. Internal (Embedded) Styles.
2. Inline Styles.
3. External Styles.

INTERNAL STYLES
• It holds the CSS code for the webpage in the
head section of the particular file.
• This makes it easy to apply styles like classes
or id’s in order to reuse the code.
• The downside of using an internal stylesheet
is that changes to the internal stylesheet only
effect the page the code is inserted into.

EXTERNAL STYLES
• It is a .css file that you link your website to.
• This makes it so that what ever you changes
in the .css sheet, will effect every page in your
website.
• This prevents you from having to many code
changes in each page. This is for “global” site
changes.

INLINE STYLES
• It is specific to the tag itself.
• The inline style uses the “HTML” style
attribute to style a specific tag. This is not
recommend, as every CSS changes has to be
made in every tag that has the inline style
applied to it
• .The inline style is good for one an individual
CSS changes that you do not use repeatedly
through the site.

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 on id, class, type, attribute,
and more.
CSS selectors are ..
1. The element selector.
2. The id selector.
3. The class selector.

The element Selectors
It selects elements based on the element name.
We can select all <p> elements on a page like this: (all
<p> elements will be center-aligned, with a red text
color)
Example
p {
text-align: center;
color: red;
}

The id selector
The id selectors uses the id attribute of an HTML elements to
select a specific element.
The id selectors 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.
Example
#para1 {
text-align: center;
color: red;
}

The class selector
Class selectors 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.
Example
.center {
text-align: center;
color: red;
}

Example of CSS
<html>
<head>
<style>
#rcorners {
Border-radius:25px;
Padding:20px;
Width:200px;
Height:150px;
}
</style></head>
<body>
<table border=“1”
id=“rcorners”cellpadding=“10”>
<tr><th colspan=“5”>EMPLOYEE
DETAILS</th></tr>
<tr>
<td>Name</td>
<td>Salary</td>
</tr>
<tr><td>anu</td><td>10000</td
></tr>
<tr><td>manu</td><td>10000</
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

Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Cafit Square,
Hilite Business Park,
Near Pantheerankavu,
Kozhikode
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com
Contact Us

Css.html

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (13)

Semelhante a Css.html

Semelhante a Css.html (20)

Último

Último (20)

Css.html