Css with example

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

RESHMYCS
reshmycs@gmail.com
www.facebook.com/username
twitter.com/username
in.linkedin.com/in/profilename
CSS

CSS
• CSS stands for Cascading Style Sheets.
• CSS is used to control the style of a web
document in a simple and easy way
• Simple & Reusable
• Separate content from presentation
• separate content from presentation

Advantages of CSS
• CSS saves time
• Easy maintenance
• Superior styles to HTML
• Pages load faster
• Multiple Device Compatibility
• Global web standards
Disadvantages of css
• Browser support for style sheets is
inconsistent

Who Creates and Maintains CSS?
• CSS is created and maintained through a
group of people within the W3C called the CSS
Working Group
• Specifications-Document

SYNTAX
• A CSS comprises of style rules that are
interpreted by the browser and then applied
to the corresponding elements in your
document. A style rule is made of three parts:
• Selector:
Eg:<h1> or <table> etc.
• Property: A property is a type of attribute of
HTML tag.. They could be color, border, etc.

• Value: Values are assigned to properties. For
example, color :#F1F1F1 etc.

Different Ways To Format CSS
• By using id
<!DOCTYPE html>
<head>
<style>
#firstname { background-color: yellow;}
</style>
</head>
<body><h1>Welcome to My Homepage</h1>
<div id=" firstname ">
<p>You have a nice day</p>
</div>
</body>
</html>

• Bu using class
<!DOCTYPE html>
<head>
<style>
.bg { background-color: yellow;}
</style>
</head>
<div class=“bg ">
</div>
</body>
</html>

• By using tags
<!DOCTYPE html>
<head>
<style>
body {
color: red;
}
</style>
</head>
</body>
</html>

INCLUSION
• Four ways to associate styles with your HTML
document
• Commonly used methods are inline CSS and
External CSS

Embedded CSS -The <style>
Element
• <head>
<style type="text/css" media="all">
h1
{
color: #36C;
}
</style>
</head>

Inline CSS
• By using style attribute. These rules will be
applied to that element only
• For Example,
h1 style ="color:#36C;"> This is inline CSS
</h1>

External CSS -The <link> Element
• <link> element can be used to include an
external stylesheet file in your HTML
document.
• Example:<head>
<link type="text/css" href="mystyle.css"
media="all" />
</head>

Imported CSS -@import Rule
• @import is used to import an external style
sheet in a manner similar to the <link>
element.
• <head> @import "mystyle.css"; </head>

MEASUREMENT UNITS
• % -Percentage
• cm –centimeters
• em - relative measurement for the height of a
font in em spaces.
• in -inches
• mm-millimeter
• px-screen pixels

Style Properties
Color Properties
 Background Properties
 Font Properties
 Text Properties
 Border Properties
 Table Properties
 Marquee Properties

Example
<!DOCTYPE html>
<html>
<head>
<style>
body { color: red; }
h1 { color: #00ff00; }
p.ex { color: rgb(0,0,255); }
</style>
</head>
<body><h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-
color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</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 with example

More Related Content

What's hot (20)

Similar to Css with example (20)

More from reshmy12 (6)

Recently uploaded (20)

Css with example