Concept of CSS part 2

CONCEPT OF CSS
PART II
BY:SURBHI SAROHA
Assistant Professor
1SURBHI SAROHA

SYLLABUS
 CSS Id and Class.
 Box Model(Introduction , Border properties ,
Padding Properties , Margin properties).
 CSS Advanced(Grouping, Dimension , Display
, Positioning , Floating , Align , Pseudo class,
Navigation Bar , Image Sprites , Attribute
sector)
 CSS Color
2SURBHI SAROHA

CSS Id and Class.
 In the CSS, a class selector is a name
preceded by a full stop (“.”) and an ID selector
is a name preceded by a hash character (“#”).
 The difference between an ID and a class is
that an ID can be used to identify one
element, whereas a class can be used to
identify more than one.
3SURBHI SAROHA

The CSS id Selector
 The id selector uses the id attribute of an
HTML element to select a specific element.
 The id of an element is unique within a page,
so the id selector is used to select one unique
element!
 To select an element with a specific id, write a
hash (#) character, followed by the id of the
element.
4SURBHI SAROHA

Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #para1 {
 text-align: center;
 color: red;
 }
 </style>
 </head>
 <body>
 <p id="para1">HelloWorld!</p>
 <p>This paragraph is not affected by the style.</p>
 </body>
 </html>
5SURBHI SAROHA

The CSS class Selector
 The class selector selects HTML elements
with a specific class attribute.
 To select elements with a specific class, write
a period (.) character, followed by the class
name.
6SURBHI SAROHA

Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 .center {
 text-align: center;
 color: red;
 }
 </style>
 </head>
 <body>
 <h1 class="center">Red and center-aligned heading</h1>
 <p class="center">Red and center-aligned paragraph.</p>
 </body>
 </html>
7SURBHI SAROHA

Box Model(Introduction , Border properties ,
Padding Properties , Margin properties).
 When laying out a document, the browser's
rendering engine represents each element as a
rectangular box according to the standard CSS
basic box model.
 CSS determines the size, position, and
properties (color, background, border size, etc.)
of these boxes.
 Every box is composed of four parts (or areas),
defined by their respective edges: the content
edge, padding edge, border edge, and margin
edge.
8SURBHI SAROHA

Cont….
 The content area, bounded by the content edge, contains the "real"
content of the element, such as text, an image, or a video player. Its
dimensions are the content width (or content-box width) and the content
height (or content-box height).
 It often has a background color or background image.
 If the box-sizing property is set to content-box (default) and if the
element is a block element, the content area's size can be explicitly
defined with the width, min-width, max-width, height, min-height,
and max-height properties.
 The padding area, bounded by the padding edge, extends the content
area to include the element's padding.
 Its dimensions are the padding-box width and the padding-box height.
 The thickness of the padding is determined by the padding-
top, padding-right, padding-bottom, padding-left, and
shorthand padding properties.
10SURBHI SAROHA

Cont…
 The border area, bounded by the border edge, extends the
padding area to include the element's borders.
 Its dimensions are the border-box width and the border-box
height.
 The thickness of the borders are determined by the border-
width and shorthand border properties.
 If the box-sizing property is set to border-box, the border area's
size can be explicitly defined with the width, min-width, max-
width, height, min-height, and max-height properties.
 When there is a background (background-color or background-
image) set on a box, it extends to the outer edge of the border
(i.e. extends underneath the border in z-ordering).
 This default behavior can be altered with the background-clip css
property.
11SURBHI SAROHA

Cont….
 The margin area, bounded by the margin edge, extends
the border area to include an empty area used to separate
the element from its neighbors.
 Its dimensions are the margin-box width and the margin-
box height.
 The size of the margin area is determined by the margin-
top, margin-right, margin-bottom, margin-left, and
shorthand margin properties.When margin
collapsing occurs, the margin area is not clearly defined
since margins are shared between boxes.
 Finally, note that for non-replaced inline elements, the
amount of space taken up (the contribution to the height of
the line) is determined by the line-height property, even
though the borders and padding are still displayed around
the content.
12SURBHI SAROHA

Cont…
 Explanation of the different parts:
 Content -The content of the box, where text
and images appear
 Padding - Clears an area around the content.
The padding is transparent
 Border - A border that goes around the
padding and content
 Margin - Clears an area outside the border.
The margin is transparent
13SURBHI SAROHA

Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 div {
 background-color: lightgrey;
 width: 300px;
 border: 15px solid green;
 padding: 50px;
 margin: 20px;
 }
 </style>
 </head>
 <body>
14SURBHI SAROHA

Cont…
 <h2>Demonstrating the Box Model</h2>
 <p>The CSS box model is essentially a box that wraps
around every HTML element. It consists of: borders,
padding, margins, and the actual content.</p>
 <div>This text is the content of the box. We have added a
50px padding, 20px margin and a 15px green border. </div>
 </body>
 </html>
15SURBHI SAROHA

CSS Advanced(Grouping, Dimension , Display ,
Positioning , Floating , Align , Pseudo class,
Navigation Bar , Image Sprites , Attribute
sector)
 Image Sprites
 An image sprite is a collection of images put
into a single image.
 A web page with many images can take a
long time to load and generates multiple
server requests.
 Using image sprites will reduce the number of
server requests and save bandwidth.
SURBHI SAROHA 16

Cont….
 Image Sprites - Simple Example
 Instead of using three separate images, we
use this single image ("img_navsprites.gif"):
 With CSS, we can show just the part of the
image we need.
 In the following example the CSS specifies
which part of the "img_navsprites.gif" image
to show:
SURBHI SAROHA 17

Example
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 #home {
 width: 46px;
 height: 44px;
 background: url(img_navsprites.gif) 0 0;
 }
 #next {
SURBHI SAROHA 18

Cont….
 width: 43px;
 height: 44px;
 background: url(img_navsprites.gif) -91px 0;
 }
 </style>
 </head>
 <body>
 <img id="home" src="img_trans.gif" width="1" height="1"><br><br>
 <img id="next" src="img_trans.gif" width="1" height="1">
 </body>
 </html>
SURBHI SAROHA 19

CSS Pseudo-classes
 What are Pseudo-classes?
 A pseudo-class is used to define a special
state of an element.
 For example, it can be used to:
 Style an element when a user mouses over it
 Style visited and unvisited links differently
 Style an element when it gets focus
SURBHI SAROHA 20

Syntax
 selector:pseudo-class {
property: value;
}
SURBHI SAROHA 21

CSS Navigation Bar
 Navigation Bar = List of Links
 A navigation bar needs standard HTML as a
base.
 In our examples we will build the navigation
bar from a standard HTML list.
 A navigation bar is basically a list of links, so
using the <ul> and <li> elements makes
perfect sense:
SURBHI SAROHA 22

Example
 <!DOCTYPE html>
 <html>
 <body>
 <ul>
 <li><a href="#home">Home</a></li>
 <li><a href="#news">News</a></li>
 <li><a href="#contact">Contact</a></li>
 <li><a href="#about">About</a></li>
 </ul>
 <p>Note: We use href="#" for test links. In a real web site this
would be URLs.</p>
 </body>
 </html>
SURBHI SAROHA 23

OUTPUT
 Home
 News
 Contact
 About
 Note:We use href="#" for test links. In a real
web site this would be URLs.
SURBHI SAROHA 24

Vertical Navigation Bar
Examples
 <!DOCTYPE html>
 <html>
 <head>
 <style>
 ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 width: 200px;
 background-color: #f1f1f1;
 }
SURBHI SAROHA 25

Cont….
 li a {
 display: block;
 color: #000;
 padding: 8px 16px;
 text-decoration: none;
 }
 /* Change the link color on hover */
 li a:hover {
 background-color: #555;
 color: white;
 }
 </style>
 </head>
 <body>
SURBHI SAROHA 26

CSS Color
 Colors are specified using predefined color names, or
RGB, HEX, HSL, RGBA, HSLA values.
 <!DOCTYPE html>
 <html>
 <body>
 <h1 style="background-
color:Tomato;">Tomato</h1>
color:Orange;">Orange</h1>
color:DodgerBlue;">DodgerBlue</h1>
SURBHI SAROHA 27

Cont…
color:MediumSeaGreen;">MediumSeaGreen</h1>
 <h1 style="background-color:Gray;">Gray</h1>
color:SlateBlue;">SlateBlue</h1>
 <h1 style="background-color:Violet;">Violet</h1>
color:LightGray;">LightGray</h1>
 </body>
 </html>
SURBHI SAROHA 28

CSS Background Color
 <!DOCTYPE html>
 <html>
 <body>
 <h1 style="background-color:DodgerBlue;">HelloWorld</h1>
 <p style="background-color:Tomato;">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
 Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat.
 </p>
 </body>
 </html>
SURBHI SAROHA 29

CSS Text Color
 <!DOCTYPE html>
 <html>
 <body>
 <h3 style="color:Tomato;">HelloWorld</h3>
 <p style="color:DodgerBlue;">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.</p>
 <p style="color:MediumSeaGreen;">Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </body>
 </html>
SURBHI SAROHA 30

CSS Border Color
 <!DOCTYPE html>
 <html>
 <body>
 <h1 style="border: 2px solidTomato;">Hello
World</h1>
 <h1 style="border: 2px solid DodgerBlue;">Hello
World</h1>
 <h1 style="border: 2px solidViolet;">Hello
World</h1>
 </body>
 </html>
SURBHI SAROHA 31

SURBHI SAROHA 32
THANK YOU 

Concept of CSS part 2

Recommended

More Related Content

What's hot (20)

Similar to Concept of CSS part 2 (20)

More from Dr. SURBHI SAROHA (20)

Recently uploaded (20)

Concept of CSS part 2