Css

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

Nasla.C.K
naslack31@gmail.com
in.linkedin.com/in/nasla
12345656
CSS

CONTENTS
• What is CSS?
• Style Sheet
• Advantages of CSS
• Selectors
• Style Properties
• Example

CSS
• CSS stands for Cascading Style Sheet.
• HTML and CSS work together to produce
beautiful and functional Web sites
• HTML = structure & CSS = style
• “HTML without CSS is like a piece of candy
without a pretty wrapper.”

CSS
• CSS works on the box model. A typical Web
page consists of many boxes joined together
from top to bottom. These boxes can be
stacked, nested, and can float.
• CSS can control many elements of our web
pages: colors, fonts, alignment, borders,
backgrounds, spacing, margins, and much
more.

CSS
• An HTML file (or multiple files) links to a CSS
file (or multiple CSS files) and when the web
browser displays the page, it references the
CSS file(s) to determine how to display the
content.
• Allows elements to “inherit” styles from
parent elements.

Attaching a Style Sheet
• Attach a style sheet to a page by adding the
code to the <head> section of the HTML page.
There are 3 ways to attach CSS to a page:
1. External Style Sheet: Best used to control
styling on multiple pages.
<link rel="stylesheet"
type="text/css"
href="css/styles.css" />

2. Internal Style Sheet: Best used to control
styling on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet: CSS is not attached in the
<header> but is used directly within HTML tags.
<p style=“color: red”>Some
Text</p>

• It will use a priority system to determine
which format to display on the page.
– Inline style (highest priority)
– Internal style sheet (second priority)
– External style sheet (third priority)

Advantages of CSS
• CSS saves time
• Pages load faster
Less code means faster download times.
• Easy maintenance
To change the style of an element, you only have to
make an edit in one place.
• Superior styles to HTML
CSS has a much wider array of attributes than HTML.
• Consistency : A Standard flow, look & feel can be
maintained for all pages of a Web Site.

Selectors
• A selector identifies elements on an HTML
page .
• A CSS Rule is made up of a selector and a
declaration.
• A declaration consists of property and value.
• selector {property: value;}
declaration

Selectors
• The declaration groups are surrounded by
curly brackets:, { }.
• A semicolon must follow each style
declaration.
• You can define as many selectors as you wish
for the element you are formatting.

Selectors
• Types,
– Element Selector
– Class selectors
– Contextual selectors
• Element Selector
A selector, here in green, is often an element of
HTML.
– body {background: purple; }
– h1 {color: green; }

Selectors
• ID and Class selectors:
• IDs (#) are unique and can only be used once
on the page.
• Classes (.) can be used as many times as
needed. i.e. reusable.

Selectors
• HTML Code:
<h1 id=“mainHeading”>Names</h1>
<p class=“name”>Joe</p>
• CSS Code:
#mainHeading {color: green}
.name {color: red}

Selectors
• Contextual selectors
For selecting tags according to condition.
Eg: If we need to select paragraph tags inside table
tag
– table p { color: blue }
This one is saying that you want to set the value for <p>
tags that belongs to <table> tags.

Style Properties
• Background
• Font
• Text
• Border
• Table

Style Properties
• Background properties.
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
– background

Style Properties
• Text properties.
– Text-indent
– Text-align
– Text-decoration
– Letter-spacing
– Text-transform
– Word-spacing

Style Properties
• Font properties.
– Font
– Font-family
– Font-size
– Font-style
– @font-face
– Font-kerning

Style Properties
• Border Properties
– border
– Border-style
– Border-width
– Border-color
– Border-radius

Style Properties
• Table properties
– border-collapse
– Border-spacing
– Padding
– Height
– Width
– Caption-side

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

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (13)

Similar to Css

Similar to Css (20)

Recently uploaded

Recently uploaded (20)

Css