CSS

ETL LABS PVT LTD – JAVA PROGRAMMING 239

 Introduction to CSS
The major points of CSS are given below:

• CSS stands for Cascading Style Sheet.

• CSS is used to design HTML tags.
• CSS is a widely used language on the web.
• HTML, CSS and JavaScript are used for web designing. It
helps the web designers to apply style on HTML tags.

ETL LABS PVT LTD – JAVA PROGRAMMING 240

 What is CSS?
CSS stands for Cascading Style Sheets. It is a style
sheet language which is used to describe the look
and formatting of a document written in markup
language. It provides an additional feature to HTML.
It is generally used with HTML to change the style
2
of web pages and user interfaces. It can also be
used with any kind of XML documents including
plain XML, SVG and XUL.

CSS is used along with HTML and JavaScript in most

websites to create user interfaces for web
applications and user interfaces for many mobile
applications.

ETL LABS PVT LTD – JAVA PROGRAMMING 241

 What does CSS do
You can add new looks to your old HTML
•
documents. 3
• You can completely change the look of your
website with only a few changes in CSS code.

ETL LABS PVT LTD – JAVA PROGRAMMING 242

 Why use CSS?
These are the three major benefits of CSS:
4
1) Solves a big problem
2) Saves a lot of time
3) Provide more attributes

ETL LABS PVT LTD – JAVA PROGRAMMING 243

 CSS Syntax
A CSS rule set contains a selector and a declaration
block.
Selector indicates the HTML element you want to
style. It could be any tag like <h1>, <title> etc.

5 Declaration Block: The declaration block can

contain one or more declarations separated by a
semicolon. For the above example, there are two
declarations:

1. color: yellow;
2. font-size: 11 px;

ETL LABS PVT LTD – JAVA PROGRAMMING 244

 ……………Each declaration contains a property
name and value, separated by a colon.

Property: A Property is a type of attribute of

HTML element. It could be color, border etc.

6
Value: Values are assigned to CSS properties. In
the above example, value "yellow" is assigned to
color property.

Selector{Property1: value1; Property2:

value2; ..........;}

ETL LABS PVT LTD – JAVA PROGRAMMING 245

 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

The element selector selects the HTML element

by name.

ETL LABS PVT LTD – JAVA PROGRAMMING 246

 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 element.

It is written with the hash character (#), followed by

the id of the element.

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

ETL LABS PVT LTD – JAVA PROGRAMMING 247

 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.

Note: A class name should not be

started with a number.

ETL LABS PVT LTD – JAVA PROGRAMMING 248

 CSS Universal Selector

The universal selector is used as a wildcard

character. It selects all the elements on the pages.

ETL LABS PVT LTD – JAVA PROGRAMMING 249

 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.

ETL LABS PVT LTD – JAVA PROGRAMMING 250

 How to add CSS

Type 1 Type 2 Type 3

Inline CSS Internal CSS External CSS

ETL LABS PVT LTD – JAVA PROGRAMMING 251

 Inline CSS
We can apply CSS in a single element by inline
CSS technique.
<h2 style="color:red;margin-
The inline CSS is also a method to insert style left:40px;">
sheets in HTML document. This method Inline CSS is applied on this
mitigates some advantages of style sheets so it is heading.
advised to use this method sparingly. 1
5 </h2>
3 <p>
If you want to use inline CSS, you should use the This paragraph is not
style attribute to the relevant tag. affected.
</p>
Syntax:

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

ETL LABS PVT LTD – JAVA PROGRAMMING 252

 Internal CSS

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:

ETL LABS PVT LTD – JAVA PROGRAMMING 253

 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 <head>
you to change the look of the entire web site by <link rel="stylesheet"
1
changing just one file. 5 type="text/css"
5
href="mystyle.css">
It uses the <link> tag on every pages and the </head>
<link> tag should be put inside the head section.

Example:

ETL LABS PVT LTD – JAVA PROGRAMMING 254

 CSS Background

1 2 3

background-color background-image background-repeat

4 5

background-attachment background-position

ETL LABS PVT LTD – JAVA PROGRAMMING 255

 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:

ETL LABS PVT LTD – JAVA PROGRAMMING 256

 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.

Etllearninghub.com

ETL LABS PVT LTD – JAVA PROGRAMMING 257

 CSS background-repeat

By default, the background-image

property repeats the background image
horizontally and vertically. Some images
are repeated only horizontally or vertically.

The background looks better if the image

repeated horizontally only.

Etllearninghub.com

ETL LABS PVT LTD – JAVA PROGRAMMING 258

 CSS background-
attachment
The background-attachment property
is used to specify if the background
image is fixed or scroll with the rest of
2
5
0
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.

ETL LABS PVT LTD – JAVA PROGRAMMING 259

 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.
2
5
1 You can set the following positions:
1. center
2. top
3. bottom
4. left
5. right

ETL LABS PVT LTD – JAVA PROGRAMMING 260

 Border Style

ETL LABS PVT LTD – JAVA PROGRAMMING 261

 Example

ETL LABS PVT LTD – JAVA PROGRAMMING 262

 Border Width
The border-width property specifies
the width of the four borders.

The width can be set as a specific size

(in px, pt, cm, em, etc) or by using one 2
of the three pre-defined values: thin, 5
4
medium, or thick.

The border-width property can have

from one to four values (for the top
border, right border, bottom border,
and the left border).

ETL LABS PVT LTD – JAVA PROGRAMMING 263

 Border Color
The border-color property is used to
set the color of the four borders.

The color can be set by:

2
5 • name - specify a color name, like
5
"red"
• Hex - specify a hex value, like
"#ff0000"
• RGB - specify a RGB value, like
"rgb(255,0,0)"
• transparent

ETL LABS PVT LTD – JAVA PROGRAMMING 264

 CSS Display
CSS display is the most important
property of CSS which is used to 2
5
control the layout of the element. It 6
specifies how the element is displayed.

ETL LABS PVT LTD – JAVA PROGRAMMING 265

 CSS Float
The CSS float property is a positioning
property. It is used to push an element
to the left or right, allowing other
element to wrap around it. It is
generally used with images and layouts.
Elements are floated only horizontally.
2 So it is possible only to float elements
5
7 left or right, not up or down.

A floated element may be moved as far

to the left or the right as possible.
Simply, it means that a floated element
can display at extreme left or extreme
right.

ETL LABS PVT LTD – JAVA PROGRAMMING 266

 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.

ETL LABS PVT LTD – JAVA PROGRAMMING 267

 CSS Line Height

The CSS line height property is used to define the

minimal height of line boxes within the element.
It sets the differences between two lines of your
content.

It defines the amount of space above and below

inline elements. It allows you to set the height of
a line of independently from the font size

ETL LABS PVT LTD – JAVA PROGRAMMING 268

 CSS Margins
CSS has properties for specifying the margin for each
side of an element:
• margin-top
• margin-right
• margin-bottom
• margin-left
All the margin properties can have the following
values:
3
• auto - the browser calculates the margin 5
0
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the
containing element
• inherit - specifies that the margin should be
inherited from the parent element
Tip: Negative values are allowed.

The following example sets different margins for all

four sides of a <p> element:

ETL LABS PVT LTD – JAVA PROGRAMMING 269

 CSS Opacity

The CSS opacity property is used to specify

the transparency of an element. In simple
word, you can say that it specifies the
clarity of the image.

In technical terms, Opacity is defined as

degree in which light is allowed to travel
through an object.

ETL LABS PVT LTD – JAVA PROGRAMMING 270

 CSS Overflow

The CSS overflow property specifies how to handle the content when it
overflows its block level container.

We know that every single element on a page is a rectangular box and the
size, positioning and behavior of these boxes are controlled via CSS.

Let's take an example: If you don't set the height of the box, it will grow as
large as the content. But if you set a specific height or width of the box and
the content inside cannot fit then what will happen. The CSS overflow
property is used to overcome this problem. It specifies whether to clip
content, render scroll bars, or just display content.

ETL LABS PVT LTD – JAVA PROGRAMMING 271

 CSS Padding

The CSS padding properties are used to generate space around an

element's content, inside of any defined borders.
CSS has properties for specifying the padding for each side of an element:
• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent
element
• Note: Negative values are not allowed.

ETL LABS PVT LTD – JAVA PROGRAMMING 272

 CSS Position
The CSS position property is used to set
position for an element. it is also used
to place an element behind another
and also useful for scripted animation
effect.

3 You can position an element using the

5 top, bottom, left and right properties.
4
These properties can be used only after
position property is set first. A position
element's computed position property
is relative, absolute, fixed or sticky.

Let's have a look at following CSS

positioning:

ETL LABS PVT LTD – JAVA PROGRAMMING 273

 CSS Vertical Align
The CSS vertical align property is used to
define the vertical alignment of an inline or
table-cell box. It is the one of the self-
explanatory property of CSS. It is not very easy
property for beginners.
3
5
5
What it does
It is applied to inline or inline-block elements.
It affects the alignment of the element, not its
content. (except table cells)
When it applied to the table cells, it affect the
cell contents, not the cell itself.

ETL LABS PVT LTD – JAVA PROGRAMMING 274

 CSS White Space
The CSS white space property is used
3 to specify how to display the content
5
6 within an element. It is used to
handle the white spaces inside an
element.

ETL LABS PVT LTD – JAVA PROGRAMMING 275

 CSS Width
The CSS width property is used to set the
width of the content area of an element.
3
5
It does not include padding borders or 7
margins. It sets width of the area inside the
padding, border, and margin of the
element.

ETL LABS PVT LTD – JAVA PROGRAMMING 276

 CSS Word Wrap
CSS word wrap property is used to
3 break the long words and wrap onto
5
8 the next line. This property is used to
prevent overflow when an
unbreakable string is too long to fit
in the containing box.

ETL LABS PVT LTD – JAVA PROGRAMMING 277

 CSS Outline
CSS outline is just like CSS border property.
It facilitates you to draw an extra border
3
around an element to get visual attention. 5
9

It is as easy as to apply as a border.

ETL LABS PVT LTD – JAVA PROGRAMMING 278

 CSS Visibility
The CSS visibility property is used to specify
whether an element is visible or not.

Note: An invisible element also take up the space

4 on the page. By using display property you can
5
0 create invisible elements that don't take up space.

Syntax:

visibility:
visible|hidden|collapse|initial|inherit;

ETL LABS PVT LTD – JAVA PROGRAMMING 279

 CSS Counters
CSS counters are similar to variables. These
are maintained by CSS and those values
can be incremented by CSS rules to track 4
how many times they are used. 5
1

CSS counters facilitate simple CSS based

incrementing and display of a number for
generated content.

ETL LABS PVT LTD – JAVA PROGRAMMING 280