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

More Related Content

What's hot

Viewers also liked

Similar to Css

Recently uploaded

Css