Concept of CSS unit3

Concept of CSS
UNIT III
PART I
BY:SURBHI SAROHA

SYLLABUS
• Creating Style Sheet
• CSS Properties
• CSS Styling(Background , Text
Format , Controlling Fonts)
• Working with block elements and
objects
• Working with lists and Tables
SURBHI SAROHA
2

Creating Style Sheet
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• body {
• background-color: lightblue;
• }
• h1 {
• color: white;
• text-align: center;
• }
SURBHI SAROHA
3

CSS Example
• p {
• font-family: verdana;
• font-size: 20px;
• }
• </style>
• </head>
• <body>
• <h1>My First CSS Example</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
SURBHI SAROHA
4

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to
be displayed on screen, paper, or in other
media
• CSS saves a lot of work.
• It can control the layout of multiple web pages
all at once
• External style sheets are stored in CSS files
SURBHI SAROHA
5

Why Use CSS?
• CSS is used to define styles for your web pages, including
the design, layout and variations in display for different
devices and screen sizes.
• The style definitions are normally saved in external .css
files.
• When tags like <font>, and color attributes were added
to the HTML 3.2 specification, it started a nightmare for
web developers. Development of large websites, where
fonts and color information were added to every single
page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium
(W3C) created CSS.
• CSS removed the style formatting from the HTML page!
SURBHI SAROHA
6

CSS Syntax
• A CSS rule-set consists of a selector and a
declaration block:
SURBHI SAROHA
7

Cont….
• The selector points to the HTML element you
want to style.
• The declaration block contains one or more
declarations separated by semicolons.
• Each declaration includes a CSS property name
and a value, separated by a colon.
• Multiple CSS declarations are separated with
semicolons, and declaration blocks are
surrounded by curly braces.
SURBHI SAROHA
8

In this example all <p> elements will be
center-aligned, with a red text color:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p {
• color: red;
• text-align: center;
• }
• </style>
• </head>
• <body>
SURBHI SAROHA
9

Cont…
• <p>Hello World!</p>
• <p>These paragraphs are styled with CSS.</p>
• </body>
• </html>
SURBHI SAROHA
10

CSS Properties
• Font Properties
• Font Family
• Font Style
• Font Variant
• Font Weight
• Font Size
• Font
SURBHI SAROHA
11

Cont…
• Color and Background Properties
• Color
• Background Color
• Background Image
• Background Repeat
• Background Attachment
• Background Position
• Background
SURBHI SAROHA
12

Cont….
• Text Properties
• Word Spacing
• Letter Spacing
• Text Decoration
• Vertical Alignment
• Text Transformation
• Text Alignment
• Text Indentation
• Line Height
SURBHI SAROHA
13

CSS Styling(Background , Text Format ,
Controlling Fonts)
• Styling Fonts with CSS
• Choosing the right font and style is very crucial
for the readability of text on a page.
• CSS provide several properties for styling the
font of the text, including changing their face,
controlling their size and boldness, managing
variant, and so on.
• The font properties are: font-family, font-
style, font-weight, font-size, and font-variant.
SURBHI SAROHA
14

Font Family
• The font-family property is used to specify the font
to be used to render the text.
• This property can hold several comma-separated
font names as a fallback system, so that if the first
font is not available on the user's system, browser
tries to use the second one, and so on.
• Hence, list the font that you want first, then any
fonts that might fill in for the first if it is not
available.
• You should end the list with a generic font family
which are five —
• serif, sans-serif, monospace, cursive and fantasy.
SURBHI SAROHA
15

Example
• body { font-family: Arial, Helvetica, sans-serif; }
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="utf-8">
• <title>Setting font-family in CSS</title>
• <style>
• body {
• font-family: Arial, Helvetica, sans-serif;
• }
SURBHI SAROHA
16

Cont….
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• </body>
• </html>
SURBHI SAROHA
17

Font Style
• The font-style property is used to set the font
face style for the text content of an element.
• The font style can be normal, italic or oblique.
The default value is normal.
SURBHI SAROHA
18

Example
• <!DOCTYPE html>
• <head>
• <title>Setting font-style in CSS</title>
• <style>
• p.normal {
• font-style: normal;
• }
• p.italic {
• font-style: italic;
• }
SURBHI SAROHA
19

Cont….
• p.oblique {
• font-style: oblique;
• }
• </style>
• </head>
• <body>
• <p class="normal">This is a normal paragraph.</p>
• <p class="italic">This is a paragraph with italic font
style.</p>
• <p class="oblique">This is a paragraph with oblique
font style.</p>
• </body>
• </html>
SURBHI SAROHA
20

Font size
• The font-size property is used to set the size of
font for the text content of an element.
• There are several ways to specify the font size
values e.g. with keywords, percentage, pixels,
ems, etc.
SURBHI SAROHA
21

Example
• <!DOCTYPE html>
• <head>
• <title>Defining Font Size Using Pixels</title>
• <style>
• h1 {
• }
• p {
• }
SURBHI SAROHA
22

Cont…
• </style>
• </head>
• <body>
• <h1>This is a heading</h1>
• </body>
• </html>
SURBHI SAROHA
23

Working with block elements and
objects
• block: This turns any styled element into a block,
after which further block-styling attributes may
be applied.
• Block-level elements take up the full width of
available space, including line space above and
below the element, similar to the way
paragraphs have space above and below them.
SURBHI SAROHA
24

Cont…
• The size and position of an element are often
impacted by its containing block. Most often,
the containing block is the content area of an
element's nearest block-level ancestor, but this is
not always the case.
• In this article, we examine the factors that
determine an element's containing block.
• When a user agent (such as your browser) lays
out a document, it generates a box for every
element.
SURBHI SAROHA
25

Cont….
• Each box is divided into four areas:
• Content area
• Padding area
• Border area
• Margin area
SURBHI SAROHA
26

Working with lists and Tables
• You can set following properties of a table −
• The border-collapse specifies whether the
browser should control the appearance of the
adjacent borders that touch each other or whether
each cell should maintain its style.
• The border-spacing specifies the width that
should appear between table cells.
• The caption-side captions are presented in the
<caption> element. By default, these are rendered
above the table in the document. You use
the caption-side property to control the placement
of the table caption.
SURBHI SAROHA
28

CSS - Tables
• The empty-cells specifies whether the border
should be shown if a cell is empty.
• The table-layout allows browsers to speed up
layout of a table by using the first width
properties it comes across for the rest of a
column rather than having to load the whole
table before rendering it.
SURBHI SAROHA
29

The border-spacing Property
• <style type="text/css">
• /* If you provide one value */
• table.example {border-spacing:10px;}
• /* This is how you can provide two values */
• table.example {border-spacing:10px; 15px;}
• </style>
SURBHI SAROHA
30

The caption-side Property
• The caption-side property allows you to specify
where the content of a <caption> element
should be placed in relationship to the table.
• The table that follows lists the possible values.
• This property can have one of the four
values top, bottom, left or right. The following
example uses each value.
SURBHI SAROHA
31

• <html>
• <head>
• <style type = "text/css">
• caption.top {caption-side:top}
• caption.bottom {caption-side:bottom}
• caption.left {caption-side:left}
• caption.right {caption-side:right}
• </style>
• </head>
• <body>
•
SURBHI SAROHA
32

• <table style = "width:400px; border:1px solid black;">
• <caption class = "top"> This caption will appear at the
top </caption> <tr><td > Cell A</td></tr>
• <tr><td > Cell B</td></tr>
• </table> <br />
• <table style = "width:400px; border:1px solid black;">
• <caption class = "bottom"> This caption will appear at
the bottom </caption>
• <tr><td > Cell A</td></tr>
• <tr><td > Cell B</td>
• </tr>
• </table>
SURBHI SAROHA
33

• <br /> <table style = "width:400px; border:1px solid black;">
• <caption class = "left"> This caption will appear at the left
</caption>
• </table> <br /> <table style = "width:400px; border:1px
solid black;">
• <caption class = "right"> This caption will appear at the right
</caption>
• </table>
• </body>
• </html>
SURBHI SAROHA
34

CSS - Lists
• We have the following five CSS properties, which can be
used to control lists −
• The list-style-type allows you to control the shape or
appearance of the marker.
• The list-style-position specifies whether a long point
that wraps to a second line should align with the first line
or start underneath the start of the marker.
• The list-style-image specifies an image for the marker
rather than a bullet point or number.
• The list-style serves as shorthand for the preceding
properties.
• The marker-offset specifies the distance between a
marker and the text in the list.
SURBHI SAROHA
36

Example
• <html>
• <head> </head>
• <body>
• <ul style = "list-style-type:circle;"> <li>Maths</li>
• <li>Social Science</li>
• <li>Physics</li>
• </ul> <ul style = "list-style-type:square;">
<li>Maths</li>
• <li>Social Science</li> <li>Physics</li>
• </ul> <ol style = "list-style-type:decimal;">
<li>Maths</li>
SURBHI SAROHA
37

Cont….
• </ol> <ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
• <li>Physics</li> </ol>
• <ol style = "list-style-type:lower-roman;">
<li>Maths</li>
• </body>
• </html>
SURBHI SAROHA
38

The list-style Property
• The list-style allows you to specify all the list
properties into a single expression. These
properties can appear in any order.
• Here is an example −
SURBHI SAROHA
40

Example
• <html>
• <head> </head>
• <body> <ul style = "list-style: inside square;">
<li>Maths</li>
• </ul> <ol style = "list-style: outside upper-alpha;">
• <li>Maths</li>
• </body>
• </html>
SURBHI SAROHA
41

Thank you 
SURBHI SAROHA
43

Concept of CSS unit3

Recommended

More Related Content

What's hot (20)

Similar to Concept of CSS unit3 (20)

More from Dr. SURBHI SAROHA (20)

Recently uploaded (20)

Concept of CSS unit3