Scribd
Upload
32 views66 pages

CSS Fundamentals for Web Design

The document provides an overview of CSS (Cascading Style Sheets), detailing its syntax, advantages, limitations, and various selectors including universal, type, class, ID, grouping, and combinators. It explains how CSS enhances web page presentation by controlling layout and styling, while also discussing the types of style sheets: inline, internal, and external. Additionally, it includes example programs demonstrating the application of different CSS selectors and properties.

Uploaded by

sugandhkucharlapati2002
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
32 views66 pages

CSS Fundamentals for Web Design

The document provides an overview of CSS (Cascading Style Sheets), detailing its syntax, advantages, limitations, and various selectors including universal, type, class, ID, grouping, and combinators. It explains how CSS enhances web page presentation by controlling layout and styling, while also discussing the types of style sheets: inline, internal, and external. Additionally, it includes example programs demonstrating the application of different CSS selectors and properties.

Uploaded by

sugandhkucharlapati2002
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 Interface Designing Technologies

UNIT – II

CSS: CSS home, introduction, syntax, CSS combinators, colors, background, borders, margins,
padding, height/width, text, fonts, tables, lists, position, overflow, float, pseudo class, pseudo
elements, opacity, tool tips, image gallery, CSS forms, CSS counters.

CSS Introduction:

 CSS stands for Cascading Style Sheets.


 It is a stylesheet language used to style and enhance website presentation.
 CSS is one of the three main components of a webpage, along
with HTML and JavaScript.

 HTML adds Structure to a web page.

 JavaScript adds logic to it.

 CSS makes it visually appealing or stylish. It controls the layout of a web page i.e. how
HTML elements will be displayed on a webpage.

When tags like <font>, and color attributes were added to the HTML, it is difficult for web
developers. Development of large websites, where fonts and color information were added to
every single page, became a long and expensive process.

Advantages of CSS

 Reusability: It means CSS file once created can be reused.


 Easy maintenance: If any changes are required for any web page or document then
changes can be simply made in a CSS file where all elements in the web pages or
document will be updated automatically.
 Download content faster: CSS requires less code and controls the order of element so
that content can be downloaded before images.
 Platform Independent: The scripts are platform independent and support all the latest
browsers.
 Data Integrity: CSS allows maintaining the integrity of data.

Limitations of CSS

 CSS cannot create layout effect.


 It does not give absolute control over a page's appearance.
 It does not guarantee any kind of absolute pixel control.

B V RAJU COLLEGE Page 1


Web Interface Designing Technologies

CSS Syntax

The main components of CSS Syntax.

1. Selector: A CSS selector is the initial portion of a CSS syntax rule. It's a collection of
HTML elements that tells the browser which HTML elements should get the rule's CSS
property values applied to them.

2. Declaration Block: A declaration block contains a list of declarations that define how the
selected elements should be styled. A declaration consists of a property and a value,
separated by a colon and terminated by a semicolon.

3. Property: The property is an identifier that specifies which feature, such as color or font
size, is taken into account.

4. Value: CSS values are allocated to CSS Properties and saved in the CSS declaration block,
which is part of the CSS rule/statement. For example, the color is set to black.

Types of selectors

1. Universal Selector

The very first CSS selector we will be discussing will be the universal selector, It selects
all the HTML elements present on the HTML page. To use the universal selector, we need to
use asterisks (*) and then define the CSS property and after that, all the elements will be
selected.

Syntax

*{
//css properties
}
PROGRAM: Program to use universal selector
<!DOCTYPE html>

B V RAJU COLLEGE Page 2


Web Interface Designing Technologies

<html>
<head>
<style>
*{
font-size:21px;
background-color:pink;
color: red;
}
</style>
</head>
<body>
<h1>Universal Selector</h1>
<h2>This is a heading(h2)</h2>
<p>This is a para</p>
<div>This is a div</div>
<p>CSS properties inside (*) will be applied to all elements</p>
</body>
</html>
Output:

2. Type Selectors/ element selector

A type selector is also known as an element selector because it selects HTML


tag(s)/element(s) in your document. The element selector selects HTML elements based on
their name, a few of them are p (paragraph tag), h1 (heading 1), div (division tag), span,

B V RAJU COLLEGE Page 3


Web Interface Designing Technologies

etc. To use a type selector, you just need to give the name of the HTML tag and then in the
curly braces define the CSS properties.

Syntax

element_name{
//css properties
}
PROGRAM: Program to element selector

<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align:center;
background-color:pink;
color: red;
}
h2{
text-align:right;
background-color:red;
color: green;
}
p{
font-size:21px;
background-color:pink;
color: blue;
}
</style>
</head>
<body>
<h1>Element Selector</h1>
<h2>This is a heading(h2)</h2>
<p>This is a para</p>
<div>This is a div</div>
</body>
</html>

B V RAJU COLLEGE Page 4


Web Interface Designing Technologies

Output:

3. Class Selector

We generally use class to group HTML elements and to apply unique styling to them.
The class selector in CSS selects elements that belong to a particular class attribute. To
select elements with a specific class, write a period or dot (.) character, and then the name
of the class.

Syntax:

.class_name{

//css properties;

PROGRAM: Program to class selector

<!DOCTYPE html>
<html>
<head>
<style>
.marked{
text-align:center;
background-color:yellow;
color: red;
}
.unmarked{
font-size:21px;
background-color:pink;
color: blue;
}
</style>

B V RAJU COLLEGE Page 5


Web Interface Designing Technologies

</head>
<body>
<h1 class="marked">Class Selector</h1>
<h2 class="unmarked">This is a heading(h2)</h2>
<p class="marked">This is a para</p>
<div class="unmarked">
<p>this para is in div</p>
<p class="marked">This is an example for class selectors</p>
</div>
</body>
</html>
Output:

For suppose you have a set of CSS properties selected under a class name, and you only
want to apply a specific CSS property to a specific HTML element under the class. For that
specify the element name, then give the full stop/period(.) character, followed by the class
name.

PROGRAM: Program to class selector

<!DOCTYPE html>
<html>
<head>
<style>
[Link]{
text-align:center;
background-color:yellow;
color: red;
}
[Link]{

B V RAJU COLLEGE Page 6


Web Interface Designing Technologies

font-size:21px;
background-color:pink;
color: blue;
}
</style>
</head>
<body>
<h1 class="marked">Class Selector</h1>
<h2 class="unmarked">This is a heading(h2)</h2>
<p class="marked">This is a para</p>
<div class="unmarked">
<p>this para is in div</p>
<p class="marked">This is an example for class selectors</p>
</div>
</body>
</html>
Output:

4. ID SELECTOR

The CSS ID selector uses the HTML element’s ID attribute to select elements on a page
and apply CSS properties on that. The id attribute is the unique identifier in an HTML
document to use an ID selector in CSS, use a hashtag (#) followed by the name of the ID of
the HTML element. The HTML element will only be selected if its id attribute matches
exactly with the value given in the selector. ID attribute must contain at least one character
and cannot begin with a number.

Syntax:

#id{
//css properties.

B V RAJU COLLEGE Page 7


Web Interface Designing Technologies

}
PROGRAM: Program to id selector
<!DOCTYPE html>
<html>
<head>
<style>
#head1,#head2{
text-align:center;
background-color:yellow;
color: red;
}
#para1,#para2{
font-size:21px;
background-color:pink;
color: blue;
}
</style>
</head>
<body>
<h1 id="head1">Class Selector</h1>
<h2 id="head2">This is a heading(h2)</h2>
<p id="para1">This is a para</p>
<div id="d1">
<p>this para is in div</p>
<p id="para2">This is an example for class selectors</p>
</div>
</body>
</html>
Output:

B V RAJU COLLEGE Page 8


Web Interface Designing Technologies

CSS Grouping Selector

 The CSS grouping selector allows you to select multiple HTML elements having the same
CSS properties and group them so that the style can be applied at once to all the
elements.
 This reduces the code redundancy and makes code simpler, readable, re-usable.
 To group HTML elements, first, we need to check if there are elements whose CSS
properties are the same??, if yes!! Then we will group those elements and separate
them with a comma(,) and then you are free to implement the same style to all the
selected elements.

Syntax:

element_1,element_2,…{
css properties;
}
PROGRAM: Program to grouping selector
<!DOCTYPE html>
<html>
<head>
<style>
h1,h2{
text-align:center;
background-color:yellow;
color: red;
}
p{
font-size:21px;
background-color:pink;
color: blue;
}
</style>
</head>
<body>
<h1>Groupping Selector</h1>
<h2>This is a heading(h2)</h2>
<p>This is a para</p>
<div>This is a div</div>
</body>
</html>

B V RAJU COLLEGE Page 9


Web Interface Designing Technologies

Output:

CSS Combinator

 Combinators in CSS help in locating and selecting specific elements within a document
by establishing the relationship between selectors.
 A CSS combinator is a type of selector in CSS which is used to specify the relationship
between any two CSS selectors. This helps in uniquely identifying and selecting only
those elements within a document that satisfy the specified relationship.

Syntax

selector(combinator)selector {
styles;
}
There are four distinct Combinators in CSS, and each specifies a different type of relationship
among the two selectors they are placed
 Descendant selector (space)

 General Sibling selector (~)

 Adjacent Sibling selector (+)

 Child selector (>)

B V RAJU COLLEGE Page 10


Web Interface Designing Technologies

1. Descendant selector (space)


 The descendant selector in CSS selects all HTML elements that are descendants of a
specified ancestor element.
 The descendant combinator is represented by a single space (" ") character.
 It combines two selectors in which the first selector represents an ancestor (parent,
parent's parent, or ancestor of more than five levels), and the second selector
represents descendants.
 It combines two selectors such that elements matched by the second selector are
selected only if they have an ancestor element matching the first selector.
 The CSS selector that uses a descendant combinator is called descendant selectors.

Syntax:

Parent_element Child_element {
css properties;
}
PROGRAM: Program to Descendant selector
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
color:blue;
font-style: italic;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector in CSS selects all HTML elements that are descendants of a
specified ancestor element.</p>
<div>
<h2>heading inside div</h2>
</div>
<div>
<p>This is paragraph in the div.</p>
</div>
<p>This paragraph is not inside div.</p>
</body>

B V RAJU COLLEGE Page 11


Web Interface Designing Technologies

</html>
Output:

2. General Sibling Selector


 The general sibling selector selects all HTML elements that are siblings of a specified
element i.e. the elements that have to have the common parent will be selected.
 The second element is specified will be the element that is to be selected, and the first
element specified will be the element whose sibling should be the second element, and
then only it will be selected.
 It uses the tilde (~) sign to separate the elements. It can be used for selecting the group
of elements that share the common parent element.

Syntax:

Element_1 ~ Element_2 {
css properties;
}
PROGRAM: Program to sibling selector
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
color:blue;
font-style: italic;
}
</style>
</head>
<body>

B V RAJU COLLEGE Page 12


Web Interface Designing Technologies

<h1>sibling Selector</h2>
<p>This para is div sibling but appears before div.</p>
<div>
<p>This para is inside the div.</p>
</div>
<p>first para. This para is div sibling and also appears after div.</p>
<p>second para. This para is div sibling and also appears after div.</p>
</body>
</html>
Output:

3. Adjacent Sibling Selector (+)

 The adjacent sibling selector is used to select an element that is adjacent to the first
specified element and also the sibling of the first element.
 It uses the plus (+) sign to combine the two elements. The second element is selected
only when the element specified in the second place is immediately after the first
element and the first and the second elements are siblings. This sibling selector selects
the adjacent element, or we can say that the element is next to the specified tag.

B V RAJU COLLEGE Page 13


Web Interface Designing Technologies

Syntax:

Element_1 + Element_2 {
css property;
}
PROGRAM: Program to adjacent sibling selector
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
color:blue;
font-style: italic;
}
</style>
</head>
<body>
<h1>adjacent sibling Selector</h2>
<p>This para is div sibling but appears before div.</p>
<div>
<p>This para is inside the div.</p>
</div>
<p>first para. This para is div sibling and also appears after div.</p>
<p>second para. This para is div sibling and also appears after div.</p>
</body>
</html>
Output:

B V RAJU COLLEGE Page 14


Web Interface Designing Technologies

4. Child selector (>) The child selector selects all elements that are the immediate children of a
specified element.

It uses the greater than (>) sign as the separator between the elements. The parent element
must always be placed at the left of the ">". It only selects the elements that are the immediate
child of the specified parent element. If we remove the greater than (>) symbol that designates
this as a child combinator, then it will become the descendant selector.

Syntax:

Parent_element > child_element {


css property;
}
PROGRAM: Program to child selector
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: green;
color: white;
font-size:20px;
}
</style>
</head>
<body>
<div>
<p>This paragraph will be selected because it is inside a div</p>
<div>

B V RAJU COLLEGE Page 15


Web Interface Designing Technologies

<p>This paragraph will be selected because it is inside a div (inside another div element).</p>
</div>
<section>
<p>This paragraph will not be selected because it is inside a div but also inside a section
element.</p>
</section>
<p>This paragraph will be selected because it is inside a div.</p>
</div>
<p>This paragraph will not be selected because it is not inside a div.</p>
</body>
</html>
Output:

Types of Style Sheets

 Inline Style Sheets


 Internal Style Sheets
 External Style Sheets

There are three types of CSS styles:

1. Inline styles sheet

Inline styles are styles that are written directly in the tag on the document. Inline styles
affect only the tag they are applied to.

<p style="text-decoration: none;">Use inline style sheets when you want to apply a style to a
single occurrence of an element. Inline style sheets are declared within individual tags and
affect those tags only. Inline style sheets are declared with the style attribute.

B V RAJU COLLEGE Page 16


Web Interface Designing Technologies

PROGRAM: Program for inline style sheet


<html>
<head>
<title>inline style sheet</title>
</head>
<body>
<h1>heading</h1>
<p>this is first para</p>
<p style="color:red">this is second para with inline style</p>
<p>this is third para</p>
</body>
</html>
Output:

2. Internal or Embedded Style Sheets


 Embedded styles are styles that are embedded in the head of the document. Embedded
styles affect only the tags on the page they are embedded in.
 Use an internal style sheet when you want an HTML document to have a unique style.
An internal style sheet is defined using the <style> tag and goes in the head section of
an HTML document.
 The <style> tag specifies the content type of a style sheet with its type attribute which
should be set to "text/css".

Syntax:

<style type="text/css">

styles go here

B V RAJU COLLEGE Page 17


Web Interface Designing Technologies

</style>

PROGRAM: Program for internal style sheet


<html>

<head>

<title>internal style sheet</title>

<style type="text/css">

p {color: green}

</style>

</head>

<body>

<h1>heading</h1>

<p>this is first para</p>

<p>this is second para with inline style</p>

<p>this is third para</p>

</body>

</html>

Output:

3. External Style Sheets:


 Styles defined in the external files are called external style sheets which can be used in
any document by including them via URL.
 Use an external style sheet when you want to apply one style to many pages.

B V RAJU COLLEGE Page 18


Web Interface Designing Technologies

 If you made any change in an external style sheet, the change is applied on all the pages
where the style sheet is used.
 An external style sheet is saved in an external file with a .css extension.

Syntax:

<linkrel="stylesheet"type="text/css"href="[Link]">Attributes of the <link> tag:

 rel-When using an external style sheet on a webpage, this attribute takes the value
"style sheet"
 type- When using an external style sheet on a webpage, this attribute takes the
value"text/css"
 href- Denotes the name and location of the external style sheet to be used.

PROGRAM: Program for external style sheet


First File:: [Link]

h1

color:red;

background:yellow;

p{

color:blue;

background:pink;

font-size:12pt;

Second File:: [Link]

<html>

<head>

<title>internal style sheet</title>

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

B V RAJU COLLEGE Page 19


Web Interface Designing Technologies

</head>

<body>

<h1>heading</h1>

<p>this is first para</p>

<p>this is second para with inline style</p>

<p>this is third para</p>

</body>

</html>

Output:

CSS Properties

1. CSS Color Property

Color property defines foreground color or text color.

Color values can be:

 Color name- like “orange”


 HEX value- like“#ff0000”
 RGB value- like “rgb(255,0,0)”

PROGRAM: Program for color property


<html>
<head>

B V RAJU COLLEGE Page 20


Web Interface Designing Technologies

<title>color property</title>
</head>
<body>
<h1 style="color: red;">heading</h1>
<h2 style="color: #00ff00;">heading</h2>
<p style="color: rgb(0,0,255);">this is para</p>
</body>
</html>
Output:

2. CSS Background Property

The CSS background properties are used to define the background effect for element.

The properties of CSS background are:

 background-color: Specifies the background color to be used

 background-image: Specifies ONE or MORE background images to be used

 background-repeat: Specifies how to repeat the background images (repeat/no-


repeat)

 background-attachment : Specifies whether the background images are fixed or scrolls


with the rest of the page.

 background-position: Specifies the starting position of the background images


(left/right/center and top/center/bottom)

PROGRAM: Program for color and background color properties

<html>

B V RAJU COLLEGE Page 21


Web Interface Designing Technologies

<head>

<body>

<p style="background-color:yellow;">This text has a yellow background color.</p>

<p style="color:blue;">This text is in blue color.</p>

</body>

</head>

</html>

Output:

PROGRAM: Program for background image properties

<!DOCTYPE html>

<html>

<head>

<title>background property</title>

<style>

body {

background-image: url("../images/[Link]");

background-repeat: no-repeat;

backgound-attachment: fixed;

background-position: center;

B V RAJU COLLEGE Page 22


Web Interface Designing Technologies

</style>

</head>

<body>

<h1 align="center">The background-image Property</h1>

<p align="center">Here, the background image will be positioned in the center of the element
(in this case, the body element).</p>

</body>

</html>

Output:

PROGRAM: Program for other background properties

<!DOCTYPE html>

<html>

<head>

B V RAJU COLLEGE Page 23


Web Interface Designing Technologies

<title>background property</title>

<style>

body {

background-image: url("../images/[Link]");

background-repeat: no-repeat;

backgound-attachment: fixed;

background-position: center;

</style>

</head>

<body>

<h1 align="center">The background-image Property</h1>

<p align="center">Here, the background image will be positioned in the center of the element
(in this case, the body element).</p>

</body>

</html>

Output:

3. CSS Border Properties

The borders are defined under the box properties category.

CSS supports the following border properties:

B V RAJU COLLEGE Page 24


Web Interface Designing Technologies

 Border-style
The values for border-style properties are:
 solid
 Double
 Groove
 Dotted
 Dashed
 Inset
 Outset
 Ridge
 hidden
 Border-width
This property specifies the width of the four borders.
The values for border-width property are:
 thick
 thin
 medium
 Or give specific size in px, pt, cm, em, etc.
Note: The border-style property must be defined to get the result of border-width.
 Border-color: This property sets the color for the borders. The "border-color" property
does not work if it is used alone. Use the "border-style" property to set the borders first.
Border colors are set by:
 Specifying a color name, like “orange”.
 Specifying hex value, like “#ff0000”.
 Specifying RGB value, like “rgb(255,0,0)”.

 Border-direction
 If you want an individual look for each side of the border, this property can be
used.
 The border direction values are: top/bottom/right/left.
Example:
border-bottom-style: solid;
border-bottom-color: red;
border-bottom-width: 5px;
border-Allinone: It is used to create a uniform border.

Example:
 border:10px outset green;
 border:20px solid;
PROGRAM: Program for border properties
<html>

B V RAJU COLLEGE Page 25


Web Interface Designing Technologies

<head>
<style>
[Link]
{
font-size:30;
border-style:solid;
border-color: red;
border-width: thin;
}
[Link]{
font-size:30;
border-style: dashed;
border-color:green;
border-width: thick;
}
[Link]{
font-size:30;
border-style:dotted;
border-color: blue;
border-width: 5;
}
</style>
</head>
<body>
<h2>Theborder-colorProperty</h2>
<p>Thispropertyspecifiesthecolorofthefour borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
</body>
</html>
Output:

B V RAJU COLLEGE Page 26


Web Interface Designing Technologies

4. CSS Margin Properties:


CSS Margins: CSS margins are used to create space around the element. We can set the
different sizes of margins for individual sides (top, right, bottom, left).
Syntax:
body
{
margin: size;
}
The margin property is a shorthand property having the following individual margin
properties:
 margin-top: It is used to set the top margin of an element.
 margin-right: It is used to set the right margin of an element.
 Margin-bottom: It is used to specify the amount of margin to be used on the bottom
of an element.
 margin-left: It is used to set the width of the margin on the left of the desired
element.

If the margin property has 4 values:


margin: 40px 100px 120px 80px;
 top=40px
 right=100px
 bottom= 120px
 left=80px

PROGRAM: Program for margin properties


<html>
<head>
<style>
body {
margin: 50px 50px 75px 100px;
background-color: pink;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>


<p>This page has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a
left margin of 100px.</p>

B V RAJU COLLEGE Page 27


Web Interface Designing Technologies

</body>
</html>
Output:

5. CSS Padding Properties


This property specifies how much space should appear between the content of an element and
its border. Padding is used to create space around an element's content, inside of any defined
borders.
The values of padding properties are:
 padding-bottom
 padding-top
 padding-left
 padding-right
 padding - property is a shorthand property for the all individual padding properties

PROGRAM: Program for padding properties


<html>
<head>
<style>
div {
border: 1px solid black;
padding: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The padding shorthand property - 4 values</h2>
<div>This div element has a top padding of 25px, a right padding of 50px, a bottom padding of
75px, and a left padding of 100px.</div>

B V RAJU COLLEGE Page 28


Web Interface Designing Technologies

</body>
</html>
Output:

6. CSS Height, Width

The CSS height and width properties are used to set the height and width of an element. The
height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.

PROGRAM: Program for height and width properties


<html>

<head>

<style>

div {

height: 200px;

width: 50%;

background-color: lightblue;

</style>

</head>

<body>

B V RAJU COLLEGE Page 29


Web Interface Designing Technologies

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>

</html>

Output:

7. CSS Text

Text Color and Background Color- The color property is used to set the color of the text.

Text Alignment- The text-align property is used to set the horizontal alignment of a text. A text
can be left or right aligned, centered, or justified.

Text Decoration

 text-decoration-line : overline;/underline;/line-through;

This property is used to add a decoration line to text.

 text-decoration-color- property is used to set the color of the decoration line.

 text-decoration-style: solid;/double;/dotted;/dashed;/wavy;

This property is used to set the style of the decoration line.

 text-decoration-thickness: auto;/value in px;/value in %;

This property is used to set the thickness of the decoration line.

B V RAJU COLLEGE Page 30


Web Interface Designing Technologies

 text-decoration- This property is a shorthand property for above properties.

Note- In text-decoration, text-line is required and remaining are optional.

Text Shadow

The text-shadow property adds shadow to text. In its simplest use, you only specify the
horizontal shadow and the vertical shadow. Then, we can add a blur effect (px) to the shadow
and also add a color to the shadow.

PROGRAM: Program for text properties


<html>

<head>

<style>

h1 {

color: green;

text-align: center;

text-decoration: underline red dotted 2px;

h2 {

text-shadow: 2px 2px 5px red;

</style>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

</body>

</html>

Output:

B V RAJU COLLEGE Page 31


Web Interface Designing Technologies

8. CSS Fonts:

Property Description

font Sets all the font properties in one declaration

font-family Specifies the font family for text

font-size Specifies the font size of text

font-style Specifies the font style for text

font-variant Specifies whether or not a text should be displayed


in a small-caps font
font-weight Specifies the weight of a font

Font Families

In CSS there are five font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.

2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.

3. Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.

4. Cursive fonts imitate human handwriting.

5. Fantasy fonts are decorative/playful fonts.

B V RAJU COLLEGE Page 32


Web Interface Designing Technologies

Generic Font Family Examples of Font Names


Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

font-size Property

This property specifies the font size of text.

font-style Property

This property specifies the font style for a text.

Syntax: font-style: normal|italic|oblique;

font-weight Property

This property sets how thick or thin characters in text should be displayed.

Syntax: font-weight: normal|bold|bolder|lighter|number;

font-variant

This property specifies whether or not a text should be displayed in a small-caps font.

Syntax: font-variant: normal|small-caps;

PROGRAM: Program for font properties


<html>

<head>

<style>

p{

font: italic small-caps bold 20px Georgia, serif;

B V RAJU COLLEGE Page 33


Web Interface Designing Technologies

</style>

</head>

<body>

<h1>The font Property</h1>

<p>This is a paragraph. The font is set to italic, small-caps and bold, the font size is set to 20
pixels, and the font family is Georgia.</p>

</body>

</html>

Output:

CSS Tables

Table Borders- To specify table borders in CSS, use the border property.

Full-Width Table- If you need a table that should span the entire screen (full-width), add width:
100% to the <table> element.

Collapse Table Borders- This property sets whether the table borders should be collapsed into a
single border. It has two values collapse and separate.

Width and Height- The width and height of a table are defined by
the width and height properties.

text-align- The text-align property sets the horizontal alignment (like left, right, or center) of
the content in <th> or <td>

Vertical Alignment- The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>

B V RAJU COLLEGE Page 34


Web Interface Designing Technologies

Table Padding- To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements.

PROGRAM: Program for table properties


<html>

<head>

<style>

table, th, td {

border: 1px solid;

border-collapse:collapse;

width:50%;

height:100px;

text-align:center;

vertical-align:bottom;

</style>

</head>

<body>

<table border="1">

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

<td>row 1, col 1</td>

<td>row 1, col 2</td>

B V RAJU COLLEGE Page 35


Web Interface Designing Technologies

</tr>

<tr>

<td>row 2, col 1</td>

<td>row 2, col 2</td>

</tr>

</table>

</table>

</body>

</html>

Output:

CSS Lists

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets.

 ordered lists (<ol>) - the list items are marked with numbers or letters.

The CSS list properties allow you to:

 Set different list item markers for ordered lists.

 Set different list item markers for unordered lists.

B V RAJU COLLEGE Page 36


Web Interface Designing Technologies

 Set an image as the list item marker.

 Add background colors to lists and list items.

list-style-type- property specifies the type of list item marker. Values like Circle, square, upper-
roman, lower-alpha. Some of the values are for unordered lists, and some for ordered lists.

Example: list-style-type: circle;

list-style-type: square;

list-style-image- property specifies an image as the list item marker.

list-style-position- property specifies the position of the list-item markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list item.
The start of each line of a list item will be aligned vertically.

"list-style-position: inside;" means that the bullet points will be inside the list item. As it
is part of the list item, it will be part of the text and push the text at the start.

list-style- property is a shorthand property. It is used to set all the list properties in one
declaration.

When using the shorthand property, the order of the property values is:

 list-style-type
 list-style-position
 list-style-image

PROGRAM: Program for table properties


<html>

<head>

<style>

ul {

list-style: square inside url("../images/[Link]");

</style>

</head>

B V RAJU COLLEGE Page 37


Web Interface Designing Technologies

<body>

<h2>The list-style Property</h2>

<p>The list-style property is a shorthand property, which is used to set all the list properties in
one declaration.</p>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Coca Cola</li>

</ul>

</body>

</html>

Output:

CSS Layout - The position Property

The position property specifies the type of positioning method used for an element.

There are five different position values:

 static
 relative
 fixed
 absolute
 sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these
properties will not work unless the position property is set first. They also work differently
depending on the position value.

B V RAJU COLLEGE Page 38


Web Interface Designing Technologies

position: static;

 HTML elements are positioned static by default.


 Static positioned elements are not affected by the top, bottom, left, and right
properties.
 An element with position: static; is not positioned in any special way; it is always
positioned according to the normal flow of the page.

position: relative;

 An element with position: relative; is positioned relative to its normal position.


 Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position.
 Other content will not be adjusted to fit into any gap left by the element.

position: fixed;

 An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled.
 The top, right, bottom, and left properties are used to position the element.
 A fixed element does not leave a gap in the page where it would normally have been
located.

position: absolute;

 An element with position: absolute; is positioned relative to the nearest positioned


ancestor (instead of positioned relative to the viewport, like fixed).
 However; if an absolute positioned element has no positioned ancestors, it uses the
document body, and moves along with page scrolling.

position: absolute;

 An element with position: absolute; is positioned relative to the nearest positioned


ancestor (instead of positioned relative to the viewport, like fixed).
 However; if an absolute positioned element has no positioned ancestors, it uses the
document body, and moves along with page scrolling.

PROGRAM: Program for table properties


<html>
<head>
<style>
[Link] {
position: static;

B V RAJU COLLEGE Page 39


Web Interface Designing Technologies

border: 3px solid #73AD21;


}
[Link] {
position: relative;
left: 30px;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
[Link] {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
[Link] {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position property</h2>
<div class="static">
This div element has position: static;
</div>
<div class="relative">
This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
<div class="fixed">
This div element has position: fixed;
</div>
</body>

B V RAJU COLLEGE Page 40


Web Interface Designing Technologies

</html>
Output:

CSS Layout - Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.

The overflow property has the following values:

 visible - Default. The overflow is not clipped. The content renders outside the element's
box

 hidden - The overflow is clipped, and the rest of the content will be invisible

 scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content

 auto - Similar to scroll, but it adds scrollbars only when necessary

PROGRAM: Program for overflow properties


<html>

<head>

<style>

div {

background-color: coral;

B V RAJU COLLEGE Page 41


Web Interface Designing Technologies

width: 100px;

height: 100px;

border: 1px solid black;

overflow: scroll;

</style>

</head>

<body>

<h2>Overflow: scroll</h2>

<div>You can use the overflow property when you want to have better control of the layout.

The overflow property specifies what happens if content overflows an element's box.</div>

</body>

</html>

Output:

CSS Layout - float and clear

The float property is used for positioning and formatting content e.g. let an image float left to
the text in a container.

The float property can have one of the following values:

B V RAJU COLLEGE Page 42


Web Interface Designing Technologies

 left - The element floats to the left of its container

 right - The element floats to the right of its container

 none - The element does not float (will be displayed just where it occurs in the text).
This is default

In its simplest use, the float property can be used to wrap text around images.

PROGRAM: Program for float properties


<html>

<head>

<style>

img {

width:170px;

height:170px;

margin-left:15px;

float: right;

</style>

</head>

<body>

<h2>Float Right</h2>

<p><img src="../images/[Link]">

Birds are a group of warm-blooded vertebrates constituting the class Aves,

characterised by feathers, toothless beaked jaws, the laying of hard-shelled eggs,

a high metabolic rate, a four-chambered heart, and a strong yet lightweight skeleton.</p>

</body>

</html>

B V RAJU COLLEGE Page 43


Web Interface Designing Technologies

Output:

CSS 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 moves the mouse over it

 Style visited and unvisited links differently

 Style an element when it gets focus

 Style valid/invalid/required/optional form elements

Syntax: The syntax of pseudo-classes:

selector:pseudo-class {
property: value;
}

Anchor Pseudo-classes

CSS :link pseudo-class

The pseudo class is used to set the style of the unvisited element. The word unvisited
means the user has not been or visited to that page or element.

a:link{

color: green;

B V RAJU COLLEGE Page 44


Web Interface Designing Technologies

CSS :Visited Pseudo-Class

The pseudo class is used to set style of the visited elements/ links. The word visited
means the user has been to or visited to that page or element.

a: visited {

color: darkblue;

CSS :Hover Pseudo-Class

If you are unfamiliar with the term hover, we will help you to understand the same.
Hover means to move the mouse cursor over something.

a:hover {
color: red;
}

CSS :Active Pseudo-Class

The pseudo class come into picture when the user clicks or activates the state of a
particular element. While using a mouse, the activation typically means when the user presses
the primary mouse button.

a:active {
color:pink;
}

The decreasing order of specificity is as follows- The acronym is LVHA-order: :link — :visited —
:hover — :active.

:hover on other elements

An example of using the :hover pseudo-class on a <div> element

div:hover {
background-color: blue;
}

Pseudo-classes can be combined with HTML classes

Consider following example

B V RAJU COLLEGE Page 45


Web Interface Designing Technologies

<p>CSS</p>

<p class=” highlight”>CSS pseudo classes</p>

Example:

[Link]:hover {
color: #ff0000;
}

:first-child Pseudo-class

The pseudo class is used to select the first element of the parent. It selects the first child
of the parent. This is very useful to style lists.

Consider the example for understanding the concept of parents and children.

<div>

<p>This paragraph is the first child of its parent</p>

<p>This paragraph is the second child of its parent</p>

</div>

Example:

p:first-child {

color: blue;

:last-Child Pseudo-Class

The last-child pseudo class is used to select the last element of the parent.

li:last-child{

color:orange;

:Focus Pseudo-Class

The focus pseudo class is used to represent a element that has received focus. An element is
said to have received focus when the user clicks on it. This is generally applied on form-inputs.

B V RAJU COLLEGE Page 46


Web Interface Designing Technologies

input:focus{

background-color:sandybrown;

:Lang Pseudo-Class

The <q> tag defines a short quotation. Browsers normally insert quotation marks around the
quotation.

The pseudo class is used to select elements with a lang attribute having a specific value. This
pseudo class is useful when we want our document in multiple languages.

:lang(en){

quotes: '"' '"' "'" "'";

:lang(fr){

quotes: "<<" ">>" "<" ">";;

PROGRAM: Program for CSS Pseudo Classes


<html>

<head>

<title> css pseudo classes</title>

<style>

a:link{

color:green;

a: visited {

color:darkblue;

a:hover {

B V RAJU COLLEGE Page 47


Web Interface Designing Technologies

color: red;

a:active {

color: pink;

h1:hover {

background-color: blue;

[Link]:hover {

color: red;

p:first-child {

color: blue;

input:focus{

background-color:lightblue;

</style>

</head>

</body>

<h1> CSS PSEUDO CLASSES</h1>

<p>CSS</p>

<p class="highlight">CSS pseudo classes</p>

<div>

<p>This paragraph is the first child of its parent</p>

B V RAJU COLLEGE Page 48


Web Interface Designing Technologies

<p>This paragraph is the second child of its parent</p>

</div>

<form action="">

<input type="text" placeholder="click me to focus">

</form>

<a href="[Link]">click here to go to next page</a>

</body>

</html>

Output:

CSS Pseudo-elements

A CSS pseudo-element is used to style specific parts of an element.

For example, it can be used to:

 Style the first letter or line, of an element

 Insert content before or after an element

 Style the markers of list items

 Style the viewbox behind a dialog box

B V RAJU COLLEGE Page 49


Web Interface Designing Technologies

The syntax of pseudo-elements:

selector::pseudo-element {
property: value;
}

The ::first-line Pseudo-element

The ::first-line pseudo-element is used to add a special style to the first line of a text.

p::first-line {
color: #ff0000;
font-variant: small-caps;
}

The following properties apply to the ::first-line pseudo-element:

 font properties

 color properties

 background properties

 word-spacing

 letter-spacing

 text-decoration

 vertical-align

 text-transform

 line-height

 clear

The ::first-letter Pseudo-element

The ::first-letter pseudo-element is used to add a special style to the first letter of a text.

p::first-letter {
color: #ff0000;
font-size: xx-large;
}

The following properties apply to the ::first-letter pseudo- element:

B V RAJU COLLEGE Page 50


Web Interface Designing Technologies

 font properties

 color properties

 background properties

 margin properties

 padding properties

 border properties

 text-decoration

 vertical-align (only if "float" is "none")

 text-transform

 line-height

 float

 clear

The ::before Pseudo-element

The ::before pseudo-element can be used to insert some content before the content of an
element.

h1::before {
content: url([Link]);
}

The ::after Pseudo-element

The ::after pseudo-element can be used to insert some content after the content of an
element.

h1::after {
content: url([Link]);
}

The ::marker Pseudo-element

The ::marker pseudo-element selects the markers of list items.

B V RAJU COLLEGE Page 51


Web Interface Designing Technologies

::marker {
color: red;
font-size: 23px;
}

The ::selection Pseudo-element

The ::selection pseudo-element matches the portion of an element that is selected by a user.

The following CSS properties can be applied to ::selection

 color
 background
 cursor
 outline

::selection {
color: red;
background: yellow;
}

CSS Opacity

The opacity property specifies the opacity/transparency of an element. The opacity property
can take a value from 0.0 - 1.0. The lower the value, the more transparent.

img {
opacity: 0.5;
}

The opacity property is often used together with the :hover selector to change the opacity on
mouse-over. Opacity can be used for images and also for other elements.

Transparency using RGBA

If you do not want to apply opacity to child elements, like in our example above,
use RGBA color values. The following example sets the opacity for the background color and
not the text:

An RGBA color value is specified with: rgba(red, green, blue, alpha).


The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

B V RAJU COLLEGE Page 52


Web Interface Designing Technologies

div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

PROGRAM: Program for Opacity property


<html>

<head>

<style>

img {

opacity: 0.5;

img:hover {

opacity: 1.0;

</style>

</head>

<body>

<h1>Image Transparency</h1>

<p>The opacity property is often used together with the :hover selector to change the opacity
on mouse-over:</p>

<img src="../images/[Link]" width="250" height="200">

<img src="../images/[Link]" width="250" height="200">

<img src="../images/[Link]" width="250" height="200">

</body>

</html>

Output:

B V RAJU COLLEGE Page 53


Web Interface Designing Technologies

CSS Tooltip

A CSS tooltip is a small, non-interactive pop-up box that appears when a user hovers
over an HTML element, providing supplemental information or context about that
element. These tooltips are typically styled and controlled entirely using CSS, eliminating the
need for JavaScript in basic implementations.

PROGRAM: Program to create a tooltip that appears when the user moves the mouse over an
element
<html>

<style>

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black;

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

B V RAJU COLLEGE Page 54


Web Interface Designing Technologies

color: white;

text-align: center;

border-radius: 6px;

padding: 5px 0;

/* Position the tooltip */

position: absolute;

z-index: 1; /* Ensure it appears above other content */

.tooltip:hover .tooltiptext {

visibility: visible;

</style>

<body>

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip"> <img src="../images/[Link]" width="200" height="200">

<span class="tooltiptext">Hi I'mPikachu</span>

</div>

</body>

</html>

Output:

B V RAJU COLLEGE Page 55


Web Interface Designing Technologies

Image gallery

A CSS image gallery involves using HTML to structure the image elements and CSS to
control their layout, appearance, and responsiveness.

PROGRAM: Program to create image gallery using CSS

<html>

<head>

<style>

[Link] {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

[Link]:hover {

border: 1px solid black;

B V RAJU COLLEGE Page 56


Web Interface Designing Technologies

[Link] img {

width: 100%;

height: 130;

[Link] {

padding: 15px;

text-align: center;

</style>

</head>

<body>

<div class="gallery">

<a target="_blank" href="../images/[Link]">

<img src="../images/[Link]" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

<div class="gallery">

<a target="_blank" href="../images/[Link]">

<img src="../images/[Link]" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

B V RAJU COLLEGE Page 57


Web Interface Designing Technologies

<div class="gallery">

<a target="_blank" href="../images/[Link]">

<img src="../images/[Link]" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

<div class="gallery">

<a target="_blank" href="../images/[Link]">

<img src="../images/[Link]" width="600" height="400">

</a>

<div class="desc">Add a description of the image here</div>

</div>

</div>

</body>

</html>

Output:

CSS forms

B V RAJU COLLEGE Page 58


Web Interface Designing Technologies

CSS (Cascading Style Sheets) is used extensively to style HTML forms, providing control
over their appearance and layout. This allows developers to create visually appealing and user-
friendly forms that integrate seamlessly with a website's overall design.

Styling Input Fields

Width: Use the width property to determine the width of the input field

Padding: Use the padding property to add space inside the text field.

Border: Use the border property to change the border size and color.

Border-radius: Use the border-radius property to add rounded corners.

Background-color: Use the background-color property to add a background color to the input.

Color: the color property to change the text color.

:focus pseudo-class: Use the :focus selector to do something with the input field when it gets
focus.

background-image: If you want an icon inside the input, use the background-image property.

background-position: position it with the background-position property. Also notice that we


add a large left padding to reserve the space of the icon.

Styling Textarea

 width
 height
 padding
 box-sizing
 border
 border-radius
 background-color
 resize: Use the resize property to prevent textareas from being resized (disable the
"grabber" in the bottom right corner)

Styling Select Menus

 width

B V RAJU COLLEGE Page 59


Web Interface Designing Technologies

 padding
 border
 border-radius
 background-color

Styling Input Buttons

 background-color
 border
 color
 padding
 text-decoration
 margin
 cursor: The cursor property with a value of "not-allowed", which will display a "no
parking sign" when you mouse over the button. We can also use a value “pointer” which
shows a hand symbol when hover on a button.
 :hover pseudo-class: Use the :hover selector to change the style of a button when you
move the mouse over it.

PROGRAM: Program to create a form use CSS properties.

<html>

<head>

<style>

*{

box-sizing: border-box;

input[type=text], select, textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

resize: vertical;

B V RAJU COLLEGE Page 60


Web Interface Designing Technologies

label {

padding: 12px 12px 12px 0;

display: inline-block;

input[type=submit] {

background-color: #04AA6D;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

float: right;

input[type=submit]:hover {

background-color: #45a049;

.container {

border-radius: 5px;

background-color: #f2f2f2;

padding: 20px;

.col-25 {

float: left;

width: 25%;

B V RAJU COLLEGE Page 61


Web Interface Designing Technologies

margin-top: 6px;

.col-75 {

float: left;

width: 75%;

margin-top: 6px;

/* Clear floats after the columns */

.row::after {

content: "";

display: table;

clear: both;

</style>

</head>

<body>

<h2>Responsive Form</h2>

<div class="container">

<form action="">

<div class="row">

<div class="col-25">

<label for="fname">First Name</label>

</div>

B V RAJU COLLEGE Page 62


Web Interface Designing Technologies

<div class="col-75">

<input type="text" id="fname" name="firstname" placeholder="Your name..">

</div>

</div>

<div class="row">

<div class="col-25">

<label for="country">Country</label>

</div>

<div class="col-75">

<select id="country" name="country">

<option value="australia">Australia</option>

<option value="canada">Canada</option>

<option value="india">India</option>

<option value="usa">USA</option>

</select>

</div>

</div>

<div class="row">

<div class="col-25">

<label for="subject">Subject</label>

</div>

<div class="col-75">

<textarea id="subject" name="subject" placeholder="Write something.."


style="height:200px"></textarea>

</div>

B V RAJU COLLEGE Page 63


Web Interface Designing Technologies

</div>

<br>

<div class="row">

<input type="submit" value="Submit">

</div>

</form>

</div>

</body>

</html>

Output:

CSS counters

CSS counters are "variables" maintained by CSS whose values can be incremented by
CSS rules (to track how many times they are used). Counters let you adjust the appearance of
content based on its placement in the document.

B V RAJU COLLEGE Page 64


Web Interface Designing Technologies

CSS counters are like "variables". The variable values can be incremented by CSS rules (which
will track how many times they are used).

To work with CSS counters we will use the following properties:

 counter-reset - Creates or resets a counter

 counter-increment - Increments a counter value

 content - Inserts generated content

 counter() or counters() function - Adds the value of a counter to an element

To use a CSS counter, it must first be created with counter-reset.

PROGRAM: Program for counters in CSS.

<html>

<head>

<style>

body {

counter-reset: section;

h2::before {

counter-increment: section;

content: "Section " counter(section) ": ";

</style>

</head>

<body>

<h1>Using CSS Counters</h1>

<h2>HTML Tutorial</h2>

<h2>CSS Tutorial</h2>

B V RAJU COLLEGE Page 65


Web Interface Designing Technologies

<h2>JavaScript Tutorial</h2>

<h2>Python Tutorial</h2>

<h2>SQL Tutorial</h2>

</body>

</html>

Output:

B V RAJU COLLEGE Page 66

You might also like