3. 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
4. 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
5. 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
6. 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
8. 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
10. 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
11. 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
12. 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
13. 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
15. 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
16. 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
17. 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
20. 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
22. 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
23. 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
24. OUTPUT
Home
News
Contact
About
Note:We use href="#" for test links. In a real
web site this would be URLs.
SURBHI SAROHA 24