Scribd
Upload
27 views44 pages

Introduction to Cascading Style Sheets

Cascading Style Sheets (CSS) is a design language used to control the presentation of web pages, allowing for customization of text color, font styles, spacing, and layout across different devices. CSS offers advantages such as time-saving through reusable styles, faster page loading, easier maintenance, and better compatibility with web standards. The document also covers CSS syntax, selectors, methods of adding CSS to HTML, and various properties for backgrounds and text formatting.

Uploaded by

susantasidu
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views44 pages

Introduction to Cascading Style Sheets

Cascading Style Sheets (CSS) is a design language used to control the presentation of web pages, allowing for customization of text color, font styles, spacing, and layout across different devices. CSS offers advantages such as time-saving through reusable styles, faster page loading, easier maintenance, and better compatibility with web standards. The document also covers CSS syntax, selectors, methods of adding CSS to HTML, and various properties for backgrounds and text formatting.

Uploaded by

susantasidu
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

WEB TECHNOLOGY

Unit-2: Introduction to Cascading Style Sheets


 Cascading Style Sheets also referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable.
 CSS handles the look and feel part of a web page.
 Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs,
how columns are sized and laid out, what background images or colors are used, layout designs,
and variations in display for different devices and screen sizes as well as a variety of other effects.
 CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document.
 Most commonly, CSS is combined with the mark-up languages HTML or XHTML.

Advantages of CSS
 CSS saves time: You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you want.
 Pages load faster: If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code
means faster download times.
 Easy maintenance: To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.
 Superior styles to HTML: CSS has a much wider array of attributes than HTML, so you can give a
far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility: Style sheets allow content to be optimized for more than one type
of device. By using the same HTML document, different versions of a website can be presented
for handheld devices such as PDAs and cell phones or for printing.
 Global web standards: Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages to make
them compatible to future browsers.

Who Creates and Maintains CSS?

 CSS is created and maintained through a group of people within the W3C called the CSS
Working Group. The CSS Working Group creates documents called specifications. When a
specification has been discussed and officially ratified by the W3C members, it becomes a
recommendation.

CSS - Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −

1
 Selector − A selector is an HTML tag at which a style will be applied. This could be any tag
like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
selector { property: value }

Example:
You can define a table border as follows −
table{ border :1px solid #C00; }
 Here table is a selector and border is a property and given value 1px solid #C00 is the value of
that property.

CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to its id, class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector


The element selector selects the HTML element by name.

2
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

2) CSS Id Selector
The id selector selects the id attribute of an HTML element to select a specific element. An id is always
unique within the page so it is chosen to select a single, unique [Link] is written with the hash
character (#), followed by the id of the element.

Let’s take an example with the id "para1".

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello [Link]</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

3) CSS Class Selector


The class selector selects HTML elements with a specific class attribute. It is used with a period
character ”.” (full stop symbol) followed by the class name.

3
Let's take an example with a class "center".

<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-
aligned.</h1>
<p class="center">This paragraph is blue and center-
aligned.</p>
</body>
</html>

CSS Class Selector for specific element


If you want to specify that only one specific HTML element should be affected then you should use
the element name with class selector.

Let's see an example.

<!DOCTYPE html>
<html>
<head>
<style>
[Link] {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-
aligned.</p>
</body>
</html>

4
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.

<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

5) CSS Group Selector


The grouping selector is used to select all the elements with the same style definitions.

Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.

Let's see the CSS code without group selector.

h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}

5
As you can see, you need to define CSS properties for all the elements. It can be grouped in following
ways:

h1,h2,p {
text-align: center;
color: blue;
}

Let's see the full example of CSS group selector.

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello DD University, Keonjhar</h1>
<h2>Hello DD University, Keonjhar (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>

How to add CSS


CSS is added to HTML pages to format the document according to information in the style sheet.
There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS
3. External CSS

Inline CSS
We can apply CSS in a single element by inline CSS technique.

The inline CSS is also a method to insert style sheets in HTML document. This method mitigates
some advantages of style sheets so it is advised to use this method sparingly.

If you want to use inline CSS, you should use the style attribute to the relevant tag.

6
Syntax:

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmlt


ag>

Example:

<h2 style="color:red;margin-
left:40px;">Inline CSS is applied on this heading.</h2>
<p>This paragraph is not affected.</p>

Output:

Inline CSS is applied on this heading.


This paragraph is not affected.

Disadvantages of Inline CSS

o You cannot use quotations within inline CSS. If you use quotations the browser will interpret
this as an end of your style value.
o These styles cannot be reused anywhere else.
o These styles are tough to be edited because they are not stored at a single place.

The internal style sheet is used to add a unique style for a single document. It is defined in <head>
section of the HTML page inside the <style> tag.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.<
/h1>

7
<p>This paragraph will not be affected.</p>
</body>
</html>

External CSS
The external style sheet is generally used when you want to make changes on multiple pages. It is ideal
for this condition because it facilitates you to change the look of the entire web site by changing just
one file.

It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

Example:

<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>

The external style sheet may be written in any text editor but must be saved with a .css extension.
This file should not contain HTML elements.

Let's take an example of a style sheet file named "[Link]".

File: [Link]

body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}

Note: You should not use a space between the property value and the unit. For example: It should
be margin-left:20px not margin-left:20 px.

CSS Comments
CSS comments are generally written to explain your code. It is very helpful for the users who read
your code so that they can easily understand the code.

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within /*.............*/ .

<!DOCTYPE html>
<html>
<head>

8
<style>
p{
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello DD University Computer Science</p>
<p>This statement is styled with CSS.</p>
<p>CSS comments are ignored by the browsers and not shown in the output.</p>
</body>
</html>

Output:

Hello DD University Computer Science

This statement is styled with CSS.

CSS comments are ignored by the browsers and not shown in the output.

CSS Background
CSS background property is used to define the background effects on element. There are 5 CSS
background properties that affect the HTML elements:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

1) CSS background-color
The background-color property is used to specify the background color of the element.

You can set the background color like this:

<!DOCTYPE html>
<html>
<head>

9
<style>
h2,p{
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>My first CSS page.</h2>
<p>Hello CSc. This is an example of CSS background-
color.</p>
</body>
</html>

Output:

My first CSS page.


Hello CSc. This is an example of CSS background-color.

2) CSS background-image
The background-image property is used to set an image as a background of an element. By default
the image covers the entire element. You can set the background image for a page like this.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("[Link]");
margin-left:100px;
}
</style>
</head>
<body>
<h1>Hello CSc</h1>
</body>
</html>

3) CSS background-repeat
By default, the background-image property repeats the background image horizontally and vertically.
Some images are repeated only horizontally or vertically.

10
The background looks better if the image repeated horizontally only.

background-repeat: repeat-x;

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello CSc</h1>
</body>
</html>

background-repeat: repeat-y;

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>Hello Computer Science</h1>
</body>
</html>

4) CSS background-attachment
The background-attachment property is used to specify if the background image is fixed or scroll with
the rest of the page in browser window. If you set fixed the background image then the image will not
move during scrolling in the browser. Let?s take an example with fixed background image.

background: white url('[Link]');


background-repeat: no-repeat;
background-attachment: fixed;

<!DOCTYPE html>

11
<html>
<head>
<style>
body {
background: white url('[Link]');
background-repeat: no-repeat;
background-attachment: fixed;
margin-left:200px;
}
</style>
</head>
<body>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>This is a fixed background-image. Scroll down the page.</p>
<p>If you do not see any scrollbars, Resize the browser window.</p>
</body>
</html>

5) CSS background-position
The background-position property is used to define the initial position of the background image. By
default, the background image is placed on the top-left of the webpage.

You can set the following positions:

1. center
2. top
3. bottom
4. left
5. right

background: white url('[Link]');


background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;

12
Text Formatting
CSS text formatting properties is used to format text and style text.
CSS text formatting include following properties:

[Link]-color
[Link]-alignment
[Link]-decoration
4. Text-transformation
[Link]-indentation
6. Letter spacing
7. Line height
[Link]-direction
[Link]-shadow
[Link] spacing

1. TEXT COLOR

Text-color property is used to set the color of the text.

Text-color can be set by using the name “red”, hex value “#ff0000” or by its RGB value“rgb(255, 0,
0).

Example:
<html>
<head>
<style>
h1
{
color:red;
}
h2
{
color:green;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>Dharanidhar University</h2>
</body>
</html>

2. TEXT ALIGNMENT

Text alignment property is used to set the horizontal alignment of the text.

13
The text can be set to left, right, centered and justified alignment.
In justified alignment, line is stretched such that left and right margins are straight.

Example:
<html>
<head>
<style>
h1
{
color:red;
text-align:center;
}
h2
{
color:green;
text-align:left;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>Dharanidhar University</h2>
</body>
</html>

3. TEXT DECORATION

Text decoration is used to add or remove decorations from the text.


Text decoration can be underline, overline, line-through or none.

Example:
<html>
<head>
<style>
h1
{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>Dharanidhar University</h2>
</body>
</html>

14
4. TEXT TRANSFORMATION

Text transformation property is used to change the case of text, uppercase or lowercase.

Text transformation can be uppercase, lowercase or captitalise.


Capitalise is used to change the first letter of each word to uppercase.

Example:
<html>
<head>
<style>
h2
{
text-transform:lowercase;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>Dharanidhar University</h2>
</body>
</html>

5. TEXT INDENTATION

Text indentation property is used to indent the first line of the paragraph.
The size can be in px, cm, pt.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
text-indent:80px;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>
This is text formatting properties.<br>
Text indentation property is used to indent the first line of the
paragraph.
</h2>
</body>
</html>

6. LETTER SPACING

15
This property is used to specify the space between the characters of the text.
The size can be given in px.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
letter-spacing:4px;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>
This is text formatting properties.</h2>
</body>
</html>

7. LINE HEIGHT

This property is used to set the space between the lines.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
line-height:40px;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>
This is text formatting properties.<br>
This property is used to set the space between the lines.
</h2>
</body>
</html>

8. TEXT DIRECTION

Text direction property is used to set the direction of the text.

16
The direction can be set by using rtl : right to left .
Left to right is the default direction of the text.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
direction: rtl;
text-align:center;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2><bdo dir="rtl">This is text formatting properties.</bdo></h2>
</body>
</html>

9. TEXT SHADOW

Text shadow property is used to add shadow to the text.


You can specify the horizontal size, vertical size and shadow color for the text.

Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow:3px 1px blue;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>
This is text formatting properties.
</h2>
</body>
</html>

10. WORD SPACING

Word spacing is used to specify the space between the words of the line.
The size can be given in px.

17
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2
{
word-spacing:15px;
}
</style>
</head>
<body>
<h1>Computer Science</h1>
<h2>This is text formatting properties.</h2>
</body>
</html>

CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property you can change
the text size, color, style and more. You have already studied how to make text bold or underlined.
Here, you will also know how to resize your font using percentage.

These are some important font attributes:

1. CSS Font color: This property is used to change the color of the text. (standalone attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and lightness of
the font.

1) CSS Font Color

CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used
to change the color of the text.

There are three different formats to define a color:

o By a color name
o By hexadecimal value
o By RGB

In the above example, we have defined all these formats.

<!DOCTYPE html>

18
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>

2) CSS Font Family

CSS font family can be divided in two types:

Generic family: It includes Serif, Sans-serif, and Monospace.

Font family: It specifies the font family name like Arial, New Times Roman etc.

Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new roman,
Georgia etc.

Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of Sans-
serif: Arial, Verdana etc.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>

19
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>

3) CSS Font Size

CSS font size property is used to change the size of the font.

These are the possible values that can be used to set the font size:

Font Size Value Description

xx-small used to display the extremely small text size.

x-small used to display the extra small text size.

small used to display small text size.

medium used to display medium text size.

large used to display large text size.

x-large used to display extra large text size.

xx-large used to display extremely large text size.

smaller used to display comparatively smaller text size.

larger used to display comparatively larger text size.

size in pixels or % used to set value in percentage or in pixels.

html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>

20
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>

4) CSS Font Style

CSS Font style property defines what type of font you want to display. It may be italic, oblique, or
normal.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>

5) CSS Font Variant

CSS font variant property specifies how to set font variant of an element. It may be normal and small-
caps.

!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>

21
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
</html>

6) CSS Font Weight

CSS font weight property defines the weight of the font and specify that how bold a font is. The
possible values of font weight may be normal, bold, bolder, lighter or number (100, 200 ..... upto 900).

!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body> </html>

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.
Now, we will see how to use these properties with examples.

The list-style-type Property


The list-style-type property allows you to control the shape or style of bullet point (also known as a
marker) in the case of unordered lists and the style of numbering characters in ordered lists.
Here are the values which can be used for an unordered list −

22
[Link]. Value & Description

1
none
NA

2
disc (default)
A filled-in circle

3
circle
An empty circle

4
square
A filled-in square

Here are the values, which can be used for an ordered list −

Value Description Example

decimal Number 1,2,3,4,5

decimal-leading- 01, 02, 03, 04, 05


0 before the number
zero

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV, V

lower-greek The marker is lower-greek alpha, beta, gamma

lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D, E

hebrew The marker is traditional Hebrew numbering

23
armenian The marker is traditional Armenian numbering

georgian The marker is traditional Georgian numbering

cjk-ideographic The marker is plain ideographic numbers

hiragana The marker is hiragana a, i, u, e, o, ka, ki

katakana The marker is katakana A, I, U, E, O, KA, KI

hiragana-iroha The marker is hiragana-iroha i, ro, ha, ni, ho, he, to

katakana-iroha I, RO, HA, NI, HO,


The marker is katakana-iroha
HE, TO

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>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-alpha;">


<li>Maths</li>
<li>Social Science</li>

24
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-roman;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result −

o Maths
o Social Science
o Physics

 Maths
 Social Science
 Physics

1. Maths
2. Social Science
3. Physics

a. Maths
b. Social Science
c. Physics

i. Maths
ii. Social Science
iii. Physics

The list-style-position Property


The list-style-position property indicates whether the marker should appear inside or outside of the
box containing the bullet points. It can have one the two values −

[Link]. Value & Description

1
none
NA

2
inside
If the text goes onto a second line, the text will wrap underneath the marker. It

25
will also appear indented to where the text would have started if the list had a
value of outside.

3
outside
If the text goes onto a second line, the text will be aligned with the start of the first
line (to the right of the bullet).

Here is an example −

<html>
<head>
</head>

<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ul style = "list-style-type:square;list-style-position:inside;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style-type:decimal;list-stlye-position:outside;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<ol style = "list-style-type:lower-alpha;list-style-position:inside;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result −

o Maths
o Social Science
o Physics

26
 Maths
 Social Science
 Physics

1. Maths
2. Social Science
3. Physics

a. Maths
b. Social Science
c. Physics

The list-style-image Property


The list-style-image allows you to specify an image so that you can use your own bullet style. The
syntax is similar to the background-image property with the letters url starting the value of the
property followed by the URL in brackets. If it does not find the given image then default bullets are
used.
Here is an example −

<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/[Link]);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/[Link]);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result −

 Maths
 Social Science
 Physics

1. Maths
2. Social Science
3. Physics

27
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 −

<html>
<head>
</head>

<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style: outside upper-alpha;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result –

 Maths
 Social Science
 Physics

A. Maths
B. Social Science
C. Physics

The marker-offset Property


The marker-offset property allows you to specify the distance between the marker and the text
relating to that marker. Its value should be a length as shown in the following example −
Unfortunately, this property is not supported in IE 6 or Netscape 7.
Here is an example −

<html>
<head>
</head>

<body>

28
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>

It will produce the following result −

 Maths
 Social Science
 Physics

A. Maths
B. Social Science
C. Physics

CSS - 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.
 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.
Now, we will see how to use these properties with examples.

The border-collapse Property


This property can have two values collapse and separate. The following example uses both the
values −

29
<html>
<head>
<style type = "text/css">
[Link] {border-collapse:collapse;}
[Link] {border-collapse:separate;}

td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>

<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />

<table class = "two">


<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>

It will produce the following result −

Collapse Border Example

Cell A Collapse Example

Cell B Collapse Example

30
Separate Border Example

Cell A Separate Example

Cell B Separate Example

The border-spacing Property


The border-spacing property specifies the distance that separates adjacent cells'. borders. It can take
either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify
two values, in which case, the first refers to the horizontal spacing and the second to the vertical
spacing −

Now let's modify the previous example and see the effect –

<html>
<head>
<style type = "text/css">
[Link] {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
[Link] {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>

<body>

<table class = "one" border = "1">


<caption>Separate Border Example with border-
spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />

<table class = "two" border = "1">

31
<caption>Separate Border Example with border-
spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>

</body>
</html>
It will produce the following result –

Separate Border Example with border-spacing


Cell A Collapse Example
Cell B Collapse Example

Separate Border Example with border-spacing


Cell A Separate Example
Cell B Separate Example

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.

<html>
<head>
<style type = "text/css">
[Link] {caption-side:top}
[Link] {caption-side:bottom}
[Link] {caption-side:left}
[Link] {caption-side:right}
</style>
</head>

<body>

<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 />

32
<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>
<br />

<table style = "width:400px; border:1px solid black;">


<caption class = "left">
This caption will appear at the left
</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 = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>

</body>
</html>

It will produce the following result −

This caption will appear at the top


Cell A
Cell B

This caption will appear at the bottom


Cell A
Cell B

This caption will appear at the left


Cell A
Cell B

33
This caption will appear at the right
Cell A
Cell B

The empty-cells Property


The empty-cells property indicates whether a cell without any content should have a border
displayed.
This property can have one of the three values - show, hide or inherit.
Here is the empty-cells property used to hide borders of empty cells in the <table> element

<html>
<head>
<style type = "text/css">
[Link] {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
[Link] {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>

<body>

<table class = "empty">


<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>

<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>

<tr>

34
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>

</body>
</html>

It will produce the following result –

Title one Title two


Row Title value value
Row Title value

The table-layout Property


The table-layout property is supposed to help you control how a browser should render or lay out a
table.
This property can have one of the three values: fixed, auto or inherit.
The following example shows the difference between these properties.

<html>
<head>
<style type = "text/css">
[Link] {
table-layout: auto
}
[Link] {
table-layout: fixed
}
</style>
</head>

<body>

<table class = "auto" border = "1" width = "100%">


<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>

35
</table>
<br />

<table class = "fixed" border = "1" width = "100%">


<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>
It will produce the following result –
10000000000000000 10000000 100

100000000000 10000000 100

CSS Box model


 The CSS box model is a container that contains multiple properties including borders, margin,
padding, and the content itself.
 It is used to create the design and layout of web pages.
 It can be used as a toolkit for customizing the layout of different elements.
 The web browser renders every element as a rectangular box according to the CSS box model.
Box-Model has multiple properties in CSS. Some of them are given below:
 content: This property is used to displays the text, images, etc, that can be sized using
the width & height property.
 padding: This property is used to create space around the element, inside any defined border.
 border: This property is used to cover the content & any padding, & also allows to set the style,
color, and width of the border.
 margin: This property is used to create space around the element ie., around the border area.
The following figure illustrates the Box model in CSS.

36
 Content Area: This area consists of content like text, images, or other media content. It is bounded
by the content edge and its dimensions are given by content-box width and height.
 Padding Area: It includes the element’s padding. This area is actually the space around the content
area and within the border-box. Its dimensions are given by the width of the padding- box and the
height of the padding-box.
 Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the
width and height of the border.
 Margin Area: This area consists of space between border and margin. The dimensions of the
Margin area are the margin-box width and the margin-box height. It is useful to separate the
element from its neighbors.

For setting the width & height property of an element (for properly rendering the content in the
browser), we need to understand the working of the CSS Box model.
While setting the width and height properties of an element with CSS, we have only set the width and
height of the content area. We need to add padding, borders, and margins in order to calculate
the full size of an element.
Consider the below example.
p {
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}
The total width for the element can be calculated as:
Total element width = width + left padding + right padding + left border + right border + left margi
n + right margin

The <p> element can have a total width of 94px.


Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) +
0px (left margin + right margin) = 94px.
The total height for the element can be calculated as:
Total element height = height + top padding + bottom padding + top border + bottom border + top
margin + bottom margin

The <p> element can have a total height of 84px.


Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom
border) + 0px (top margin + bottom margin) = 84px.
We will understand the Box model concept through the examples.

Example 1: This example illustrates the use of the CSS Box model for aligning & displaying it
properly.

<!DOCTYPE html>

<head>
<title>CSS Box Model</title>

37
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}

.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}

.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}

.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>

<body>
<div class="main">CSS Box-Model Property</div>
<div class="gfg">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>

38
Example 2: This example illustrates the Box Model by implementing the various properties.

<!DOCTYPE html>
<head>
<style>
.main {
font-size: 32px;
font-weight: bold;
text-align: center;
}

#box {
padding-top: 40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>

<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">GeeksforGeeks</div>
</body>
</html>

39
CSS – Colors
CSS uses color values to specify a color. Typically, these are used to set a color either for the
foreground of an element (i.e., its text) or else for the background of the element. They can also be
used to affect the color of borders and other decorative effects.
You can specify your color values in various formats. Following table lists all the possible formats −

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}

RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}

keyword aqua, black, etc. p{color:teal;}

These formats are explained in more detail in the following sections −

CSS Colors - Hex Codes


A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the
next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop
Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples to
use Hexadecimal notation.

Color Color HEX

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

40
#00FFFF

#FF00FF

#C0C0C0

#FFFFFF

CSS Colors - RGB Values


This color value is specified using the rgb( ) property. This property takes three values, one each for
red, green, and blue. The value can be an integer between 0 and 255 or a percentage.
NOTE − All the browsers does not support rgb() property of color so it is recommended not to use
it.
Following is the example to show few colors using RGB values.

Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)

41
CSS - Dimension
You have seen the border that surrounds every box ie. element, the padding that can appear inside
each box and the margin that can go around them. In this tutorial we will learn how we can change
the dimensions of boxes.
We have the following properties that allow you to control the dimensions of a box.
 The height property is used to set the height of a box.
 The width property is used to set the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can be.
 The min-height property is used to set the minimum height that a box can be.
 The max-width property is used to set the maximum width that a box can be.
 The min-width property is used to set the minimum width that a box can be.

The Height and Width Properties


The height and width properties allow you to set the height and width for boxes. They can take values
of a length, a percentage, or the keyword auto.
Here is an example −
<html>
<head>
</head>

<body>
<p style = "width:400px; height:100px; border:1px solid red;
padding:5px; margin:10px;">
This paragraph is 400pixels wide and 100 pixels high
</p>
</body>
</html>

The line-height Property


The line-height property allows you to increase the space between lines of text. The value of the line-
height property can be a number, a length, or a percentage.
Here is an example −
<html>
<head>
</head>

<body>
<p style = "width:400px; height:100px; border:1px solid red;
padding:5px; margin:10px; line-height:30px;">
This paragraph is 400pixels wide and 100 pixels high and
here line height is 30pixels.

42
This paragraph is 400 pixels wide and 100 pixels high and
here line height is 30pixels.
</p>
</body>
</html>

The max-height Property


The max-height property allows you to specify maximum height of a box. The value of the max-
height property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html>
<head>
</head>
<body>
<p style = "width:400px; max-height:10px; border:1px solid
red; padding:5px; margin:10px;">
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
</p>
<br>
<br>
<br>
<img alt = "logo" src = "/css/images/[Link]" width = "195"
height = "84" />
</body>
</html>

The min-height Property


The min-height property allows you to specify minimum height of a box. The value of the min-height
property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html>
<head>
</head>

<body>
<p style = "width:400px; min-height:200px; border:1px solid
red; padding:5px; margin:10px;">
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
</p>
<img alt = "logo" src = "/css/images/[Link]" width = "95"
height = "84" />
</body>
</html>

43
The max-width Property
The max-width property allows you to specify maximum width of a box. The value of the max-width
property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example
<html>
<head>
</head>

<body>
<p style = "max-width:100px; height:200px; border:1px solid
red; padding:5px; margin:10px;">
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
</p>
<img alt = "logo" src = "/images/[Link]" width = "95" height
= "84" />
</body>
</html>

The min-width Property


The min-width property allows you to specify minimum width of a box. The value of the min-width
property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html>
<head>
</head>

<body>
<p style = "min-width:400px; height:100px; border:1px solid
red; padding:5px; margin:10px;">
This paragraph is 100px high and min width is 400px
This paragraph is 100px high and min width is 400px
</p>
<img alt = "logo" src = "/css/images/[Link]" width = "95"
height = "84" />
</body>
</html>

44

You might also like