Web Interface Design - II
Uploaded by
SirishaWeb Interface Design - II
Uploaded by
SirishaWeb Interface Designing Technologies
Unit-II
# What is css?
CSS (Cascading Style Sheets) is a fundamental technology used in web development to control the
presentation and layout of web pages. While HTML is used to structure content, CSS is used to style and
visually organize that content — including colors, fonts, spacing, positioning, animations, and more.
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document
written in HTML or XML. While HTML provides the structure and content of a web page, CSS controls how
that content looks - its layout, colors, fonts, and overall visual style.
CSS Syntax
CSS syntax is made up of rules that tell the browser how to style specific HTML elements.
Basic Syntax Structure
Selector {
Property: value;
}
Selector – the HTML element you want to style (e.g., h1, p, div)
Property – the style feature you want to change (e.g., color, font-size)
Value – the setting you give to the property (e.g., red, 16px)
Example 1:
h1 {
color: blue;
text-align: center;
}
This means:
Select all <h1> elements
Set their text color to blue
Align the text to the center
Multiple Selectors Example
You can apply the same style to multiple elements:
h1, h2, h3 {
Page 1
Web Interface Designing Technologies
font-family: Arial, sans-serif;
}
Comments in CSS
You can add comments to explain your code. Comments do not affect how the page is displayed.
/* This is a comment */
p{
color: gray;
}
Complete Example
/* Styling the body of the page */
body {
background-color: #f2f2f2;
font-family: Verdana, sans-serif;
}
/* Headings */
h1 {
color: navy;
font-size: 36px;
}
/* Paragraphs */
p{
color: black;
line-height: 1.6;
}
Ways to use CSS:
There are several ways to incorporate Cascading Style Sheets (CSS) into an HTML document.
1. Inline Styles:
Inline styles involve directly embedding CSS rules within HTML elements using the style attribute. This
approach applies styles to individual elements, overriding any styles defined in external or internal
stylesheets.
Page 2
Web Interface Designing Technologies
Example:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>
2. Internal Stylesheets (Embedded CSS)
Internal stylesheets involve embedding CSS rules within the <style> tag inside the <head> section of an
HTML document. This approach allows you to define styles for the entire page in one place.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal Stylesheet Example</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
h1 {
color: green;
p{
font-size: 14px;
</style>
</head>
Page 3
Web Interface Designing Technologies
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. External Stylesheets (Linked CSS)
External stylesheets involve creating separate .css files containing CSS rules and linking them to HTML
documents using the <link> tag in the <head> section. This is the most recommended and widely used
approach for styling web pages.
Example:
HTML (index.html):
<!DOCTYPE html>
<html>
<head>
<title>External Stylesheet Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Page 4
Web Interface Designing Technologies
CSS (styles.css):
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
h1 {
color: green;
p{
font-size: 14px;
# CSS Combinators
CSS combinators are symbols that explain the relationship between the selectors. They are used to select
elements based on their relationship to other elements in the HTML structure. Without combinators, CSS
selectors would only be able to target elements based on their type, class, ID, or attributes. Combinators add
a layer of specificity and control, allowing you to target elements based on their context within the
document.
Types of CSS Combinators
There are four main types of CSS combinators:
Descendant Combinator (Space): Selects all elements that are descendants of a specified element.
Child Combinator (>): Selects all elements that are direct children of a specified element.
Adjacent Sibling Combinator (+): Selects the first element that is immediately preceded by another
specified element.
General Sibling Combinator (~): Selects all elements that are preceded by another specified element.
1. Descendant Combinator (Space)
The descendant combinator is represented by a space between two selectors. It selects all elements that are
descendants (children, grandchildren, etc.) of a specified element.
Page 5
Web Interface Designing Technologies
Syntax:
ancestor descendant {
/* CSS rules */
Example:
HTML:
<div class="container">
<p>This is a paragraph inside the container.</p>
<div>
<p>This is another paragraph inside a nested div.</p>
</div>
</div>
CSS:
.container p {
color: blue;
In this example, the CSS rule will apply to all <p> elements that are descendants of the element with the
class container. Both paragraphs in the HTML will be colored blue.
2. Child Combinator (>)
The child combinator is represented by the > symbol. It selects all elements that are direct children of a
specified element.
Syntax:
parent > child {
Page 6
Web Interface Designing Technologies
/* CSS rules */
Example:
HTML:
<div class="container">
<p>This is a paragraph inside the container.</p>
<div>
<p>This is another paragraph inside a nested div.</p>
</div>
</div>
CSS:
.container > p {
color: blue;
In this example, the CSS rule will only apply to the <p> element that is a direct child of the element with the
class container. The second paragraph, which is nested inside another <div>, will not be affected.
3. Adjacent Sibling Combinator (+)
The adjacent sibling combinator is represented by the + symbol. It selects the first element that is
immediately preceded by another specified element.
Syntax:
element1 + element2 {
/* CSS rules */
Example:
Page 7
Web Interface Designing Technologies
HTML:
<h2>Heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
CSS:
h2 + p {
color: green;
In this example, the CSS rule will apply to the first <p> element that immediately follows the <h2> element.
The second <p> element will not be affected.
4. General Sibling Combinator (~)
The general sibling combinator is represented by the ~ symbol. It selects all elements that are preceded by
another specified element.
Syntax:
element1 ~ element2 {
/* CSS rules */
Example:
HTML:
<h2>Heading</h2>
<p>This is a paragraph.</p>
<ul>
<li>List Item</li>
</ul>
Page 8
Web Interface Designing Technologies
<p>This is another paragraph.</p>
CSS:
h2 ~ p {
color: red;
In this example, the CSS rule will apply to all <p> elements that follow the <h2> element, regardless of
whether they are immediately adjacent or separated by other elements.
# Colors in CSS
Colors are a fundamental aspect of web design, influencing the look and feel of a website and impacting user
experience. CSS offers several ways to specify colors, each with its own advantages and use cases. Choosing
the right color format and understanding how to apply it effectively is crucial for creating visually appealing
and accessible web pages.
Color Formats in CSS:
1.Hexadecimal (Hex) Colors:
Hexadecimal colors are one of the most common ways to specify colors in CSS. They use a six-digit
hexadecimal number (base 16) to represent the red, green, and blue components of a color. Each pair of
digits represents the intensity of one of these components, ranging from 00 (minimum intensity) to FF
(maximum intensity).
Syntax: #RRGGBB
Example:
#FF0000 (Red)
#00FF00 (Green)
#0000FF (Blue)
#FFFFFF (White)
#000000 (Black)
2. RGB Colors
Page 9
Web Interface Designing Technologies
RGB (Red, Green, Blue) colors specify the intensity of each color component using decimal values ranging
from 0 to 255.
Syntax: rgb(red, green, blue)
Example:
rgb(255, 0, 0) (Red)
rgb(0, 255, 0) (Green)
rgb(0, 0, 255) (Blue)
rgb(255, 255, 255) (White)
rgb(0, 0, 0) (Black)
3. RGBA Colors
RGBA (Red, Green, Blue, Alpha) colors are an extension of RGB that include an alpha channel, allowing you
to specify the transparency of the color. The alpha value ranges from 0.0 (fully transparent) to 1.0 (fully
opaque).
Syntax: rgba(red, green, blue, alpha)
Example:
rgba(255, 0, 0, 0.5) (Red with 50% transparency)
rgba(0, 255, 0, 0.2) (Green with 20% transparency)
rgba(0, 0, 255, 0.8) (Blue with 80% transparency)
rgba(0, 0, 0, 0) (Fully transparent black)
4. HSL Colors
HSL (Hue, Saturation, Lightness) colors provide a more intuitive way to specify colors based on their
perceptual properties.
Hue: Represents the color's position on the color wheel, ranging from 0 to 360 degrees. 0 is red, 120 is
green, and 240 is blue.
Saturation: Represents the intensity of the color, ranging from 0% (grayscale) to 100% (fully saturated).
Page 10
Web Interface Designing Technologies
Lightness: Represents the brightness of the color, ranging from 0% (black) to 100% (white).
Syntax: hsl(hue, saturation, lightness)
Example:
hsl(0, 100%, 50%) (Red)
hsl(120, 100%, 50%) (Green)
hsl(240, 100%, 50%) (Blue)
hsl(0, 0%, 100%) (White)
hsl(0, 0%, 0%) (Black)
hsl(0, 0%, 75%) (Light Gray)
5. HSLA Colors
HSLA (Hue, Saturation, Lightness, Alpha) colors are an extension of HSL that include an alpha channel for
specifying transparency, similar to RGBA.
Syntax: hsla(hue, saturation, lightness, alpha)
Example:
hsla(0, 100%, 50%, 0.5) (Red with 50% transparency)
hsla(120, 100%, 50%, 0.2) (Green with 20% transparency)
hsla(240, 100%, 50%, 0.8) (Blue with 80% transparency)
6. Named Colors
CSS provides a set of predefined named colors that you can use directly. These names are case-insensitive.
Example:
red
green
blue
Page 11
Web Interface Designing Technologies
Use colors in CSS:
Colors can be applied to various CSS properties, including:
color: Sets the text color.
background-color: Sets the background color of an element.
border-color: Sets the color of an element's border.
outline-color: Sets the color of an element's outline.
text-shadow: Applies a shadow to text, including its color.
box-shadow: Applies a shadow to an element, including its color.
Example:
body {
background-color: #f0f0f0; /* Light gray background */
color: #333; /* Dark gray text */
h1 {
color: rgb(255, 0, 0); /* Red heading */
p{
color: rgba(0, 0, 0, 0.7); /* Slightly transparent black text */
# Using Backgrounds in CSS:
Page 12
Web Interface Designing Technologies
In CSS, backgrounds allow you to control the look and feel of an element’s background. CSS provides
multiple properties to customize backgrounds, such as color, image, position, size, repeat behavior, and
more
Background Color:
The background-color property sets the background color of an element. It accepts color values in various
formats, including:
Example:
body {
background-color: #f0f0f0; /* Light gray background */
.header {
background-color: rgba(0, 0, 255, 0.8); /* Blue with 80% opacity */
color: white;
Background Image:
The background-image property sets an image as the background of an element. You specify the image
using the url() function.
Example:
body {
background-image: url("images/background.jpg");
Background Repeat:
The background-repeat property controls how the background image is repeated.
repeat: The image is repeated both horizontally and vertically (default).
Page 13
Web Interface Designing Technologies
repeat-x: The image is repeated horizontally.
repeat-y: The image is repeated vertically.
no-repeat: The image is not repeated.
space: The image is repeated as much as possible without clipping, and the extra space is distributed evenly
between the images.
round: The image is repeated as much as possible without clipping, and the image is scaled to fit the
available space.
Example:
body {
background-image: url("images/pattern.png");
background-repeat: repeat-x; /* Repeat horizontally */
Background Position:
The background-position property specifies the initial position of the background image. You can use
keywords like top, bottom, left, right, and center, or you can use pixel or percentage values.
Example:
.hero {
background-image: url("images/hero.jpg");
background-position: center; /* Center the image */
Background Size:
The background-size property specifies the size of the background image.
auto: The image is displayed at its original size (default).
cover: The image is scaled to cover the entire element, potentially cropping the image.
Page 14
Web Interface Designing Technologies
contain: The image is scaled to fit within the element, maintaining its aspect ratio. This may result in empty
space around the image.
length: Specifies the width and height of the background image in pixels or other units.
percentage: Specifies the width and height of the background image as a percentage of the element's width
and height.
Example:
.logo {
background-image: url("images/logo.png");
background-size: contain; /* Fit within the element */
Background Attachment:
The background-attachment property specifies whether the background image scrolls with the page or is
fixed.
scroll: The background image scrolls with the page (default).
fixed: The background image is fixed and does not scroll.
local: The background image scrolls with the element's content.
Example:
body {
background-image: url("images/background.jpg");
background-attachment: fixed; /* Fixed background */
# using Borders in CSS:
CSS borders are lines that surround an HTML element, adding visual separation and emphasis. They are a
fundamental aspect of web design, allowing you to define the appearance of elements and create visually
appealing layouts. Borders can be applied to any HTML element, including <div>, <p>, <span>, <h1>, and
more.
Page 15
Web Interface Designing Technologies
Border Properties
The primary CSS properties for controlling borders are:
border-width: Specifies the thickness of the border.
border-style: Defines the appearance of the border (e.g., solid, dashed, dotted).
border-color: Sets the color of the border.
These properties can be set individually or combined using the shorthand border property.
`border-width`
The border-width property determines the thickness of the border. It accepts values in pixels (px), points
(pt), ems (em), or other CSS units. You can specify different widths for each side of the border using the
following syntax: border-width: top right bottom left;
Example:
.element {
border-width: 2px 5px 1px 3px; /* Top: 2px, Right: 5px, Bottom: 1px, Left: 3px */
border-style`
The border-style property defines the appearance of the border. Here are the most common values:
solid: A solid line.
dashed: A series of short dashes.
dotted: A series of dots.
double: Two parallel solid lines.
groove: Creates a 3D grooved effect.
ridge: Creates a 3D ridged effect.
inset: Creates a 3D inset effect.
outset: Creates a 3D outset effect.
none: No border is displayed.
hidden: Similar to none, but affects table border collapsing.
Example:
.element {
Page 16
Web Interface Designing Technologies
border-style: solid dashed dotted double; /* Top: solid, Right: dashed, Bottom: dotted, Left:
double */
border-color:
The border-color property sets the color of the border. You can use any valid CSS color value, such as:
Example:
.element {
border-color: red green blue yellow; /* Top: red, Right: green, Bottom: blue, Left: yellow */
.element2 {
border-color: #007bff; /* All sides: blue */
The `border` Shorthand Property
The border shorthand property allows you to set the border-width, border-style, and border-color in a single
declaration. The order of the values doesn't matter.
Syntax: border: border-width border-style border-color;
Example:
.element {
border: 2px solid black; /* Width: 2px, Style: solid, Color: black */
# Margins:
In CSS, margins define the space around an element's outside. They create a gap between the element's
border and surrounding elements. Margins contribute to the overall layout and spacing of a webpage,
preventing elements from appearing too crowded or overlapping. Unlike padding, which adds space inside
an element, margins add space outside the element.
Page 17
Web Interface Designing Technologies
Margin Properties
CSS provides several properties to control margins:
margin: This is the shorthand property for setting all four margins (top, right, bottom, and left) at
once.
margin-top: Sets the margin on the top side of an element.
margin-right: Sets the margin on the right side of an element.
margin-bottom: Sets the margin on the bottom side of an element.
margin-left: Sets the margin on the left side of an element.
Values for Margin Properties
Margin properties accept various values, including:
length: Specifies a fixed margin size using units like px (pixels), em (relative to the font size of the element),
rem (relative to the root font size), pt (points), cm (centimeters), etc.
For example: margin-top: 20px;
auto: The browser calculates the margin. This is often used to horizontally center block-level elements
within their parent container.
For example: margin-left: auto; margin-right: auto;
inherit: The element inherits the margin value from its parent element. For example: margin-top: inherit;
%: Specifies a margin as a percentage of the width of the containing block. The top and bottom margins are
calculated as a percentage of the width, not the height, of the containing block. For example: margin-left:
10%;
Example:
.centered-element {
width: 300px;
margin-left: auto;
margin-right: auto;
background-color: lightblue;
Page 18
Web Interface Designing Technologies
# Padding
Padding refers to the space between the content of an HTML element and its border. It's like adding a
cushion inside the element, pushing the content away from the edges. Padding is defined using CSS and can
be applied to all four sides of an element: top, right, bottom, and left.
Padding Properties
CSS provides several properties to control padding:
padding: This is the shorthand property for setting the padding on all four sides at once.
padding-top: Sets the padding on the top side of the element.
padding-right: Sets the padding on the right side of the element.
padding-bottom: Sets the padding on the bottom side of the element.
padding-left: Sets the padding on the left side of the element.
Values for Padding:
Padding values can be specified in several ways:
Pixels (px): A fixed size in pixels. For example, padding: 10px; sets a 10-pixel padding on all sides.
Ems (em): Relative to the font size of the element. padding: 1em; sets the padding to the same size
as the element's font size.
Rems (rem): Relative to the font size of the root element (the <html> element). padding: 1rem; sets
the padding to the same size as the root element's font size.
Percentages (%): Relative to the width of the containing element. padding: 10%; sets the padding to
10% of the width of the parent element.
Auto: The auto value is not typically used for padding. It's more commonly used for margins to
center elements horizontally.
# using Text in CSS:
Page 19
Web Interface Designing Technologies
CSS properties provide a wide range of options for styling and manipulating text, allowing developers to
create visually appealing and accessible web content.
1.Font Properties:
The font properties in CSS control the typeface used to render text. They are crucial for establishing the
visual identity and readability of a website.
font-family: Specifies the font to be used. You can provide a list of fonts as a fallback mechanism. The
browser will try to use the first font in the list, and if it's not available, it will move on to the next, and so on.
It's good practice to include a generic font family (e.g., serif, sans-serif, monospace, cursive, fantasy) as the
last item in the list.
body {
font-family: "Arial", "Helvetica", sans-serif;
font-size:
Sets the size of the font. Common units include pixels (px), ems (em), rems (rem), and percentages (%).
px: Absolute size in pixels.
em: Relative to the font size of the parent element. 1em is equal to the parent's font size.
rem: Relative to the font size of the root element (the <html> element). 1rem is equal to the root
element's font size.
%: Relative to the font size of the parent element. 100% is equal to the parent's font size.
body {
font-size: 16px; /* Default font size */
h1 {
font-size: 2em; /* Twice the body's font size */
Page 20
Web Interface Designing Technologies
font-weight`
Controls the boldness of the font. Common values include normal, bold, bolder, lighter, and numeric values
from 100 to 900 (where 400 is equivalent to normal and 700 is equivalent to bold).
h1 {
font-weight: bold;
font-style`
Specifies the style of the font, such as normal, italic, or oblique.
em {
font-style: italic;
2. Text Alignment and Spacing
CSS provides properties to control the alignment and spacing of text within an element.
`text-align`: Specifies the horizontal alignment of text. Values include left, right, center, and justify.
h1 {
text-align: center;
p{
text-align: justify; /* Distributes text evenly across the line */
line-height: Sets the height of a line of text. A value without units is multiplied by the element's font size.
letter-spacing: Adjusts the spacing between letters. Values can be positive or negative.
word-spacing: Adjusts the spacing between words. Values can be positive or negative.
Page 21
Web Interface Designing Technologies
3. Text Decoration
CSS allows you to add decorations to text, such as underlines, overlines, and line-throughs.
text-decoration-line:
Specifies the type of text decoration. Values include none, underline, overline, and line-through.
a{
text-decoration-line: none; /* Removes the underline from links */
text-decoration-color: Sets the color of the text decoration.
text-decoration-style: Specifies the style of the text decoration. Values include solid, double, dotted,
dashed, and wavy.
4. Text Transformation and Shadow:
CSS provides properties to transform text and add shadows.
text-transform: Changes the capitalization of text. Values include none, capitalize, uppercase, and
lowercase.
h1 {
text-transform: uppercase; /* Converts text to uppercase */
text-shadow: Adds a shadow to text. The syntax is: horizontal-offset vertical-offset blur-radius color.
# Tables In CSS:
CSS provides various properties applicable to tables, including basic styling, borders, spacing, layout control,
and advanced techniques for creating visually appealing and responsive tables.
Basic Table Styling
The fundamental elements of an HTML table (<table>, <tr>, <th>, <td>) can be styled using CSS just like any
other HTML element. Here's a breakdown of common properties:
Page 22
Web Interface Designing Technologies
border: Applies a border to the table, rows, cells, or headers. You can specify the border width, style
(solid, dashed, dotted, etc.), and color.
background-color: Sets the background color of the table, rows, cells, or headers.
color: Sets the text color within the table, rows, cells, or headers.
font-family: Specifies the font used for the text in the table.
font-size: Sets the size of the text in the table.
text-align: Aligns the text horizontally within cells (left, center, right, justify).
vertical-align: Aligns the text vertically within cells (top, middle, bottom).
padding: Adds space between the cell content and the cell border.
margin: Adds space around the table itself.
Table Layout
The table-layout property controls how the table's columns are sized.
table-layout: auto;: The column widths are determined by the content of the cells. This is the default
behavior.
table-layout: fixed;: The column widths are determined by the first row of the table or by explicitly set
width properties on the col or colgroup elements. This can significantly improve rendering performance,
especially for large tables.
Zebra Striping
Zebra striping (alternating row colors) can improve readability, especially in large tables. This can be
achieved using the :nth-child() pseudo-class.
Example:
tr:nth-child(even) {
background-color: #f2f2f2;
Responsive Tables
Making tables responsive is essential for ensuring they display correctly on different screen sizes. Here are a
few approaches:
Page 23
Web Interface Designing Technologies
Horizontal Scrolling: Wrap the table in a container with overflow-x: auto;. This will allow the table to scroll
horizontally on smaller screens.
Stacking Columns: Use media queries to change the table layout on smaller screens. You can hide the table
headers and display each row as a series of stacked blocks.
# Lists in CSS:
CSS offers several properties to control the appearance of lists. The primary properties are list-style-type,
list-style-position, and list-style-image.
list-style-type
The list-style-type property defines the type of marker used for list items. It applies to both ordered (<ol>)
and unordered (<ul>) lists.
Example : ol {
list-style-type: decimal;
ul {
list-style-type: square;
Order list property vaues:
Ordered Lists (<ol>):
decimal: Numbers (1, 2, 3, ...)
decimal-leading-zero: Numbers with leading zeros (01, 02, 03, ...)
lower-roman: Lowercase Roman numerals (i, ii, iii, ...)
upper-roman: Uppercase Roman numerals (I, II, III, ...)
lower-alpha: Lowercase letters (a, b, c, ...)
upper-alpha: Uppercase letters (A, B, C, ...)
lower-greek: Lowercase Greek letters (α, β, γ, ...)
Unordered list:
disc: Filled circle (default)
circle: Hollow circle
Page 24
Web Interface Designing Technologies
square: Filled square
none: No marker
# CSS Positioning:
CSS positioning allows you to control the placement of elements on a webpage. The position property
determines the positioning scheme used for an element. There are five main values for the position
property:
static: This is the default value. Elements are positioned according to the normal document flow. top, right,
bottom, and left properties have no effect.
relative: The element is positioned relative to its normal position in the document flow. Using top, right,
bottom, and left properties will offset the element from its normal position. Other elements are positioned
as if the element were still in its original location.
absolute: The element is removed from the normal document flow and positioned relative to its nearest
positioned ancestor (an ancestor with a position value other than static). If there is no positioned ancestor, it
is positioned relative to the initial containing block (the <html> element). top, right, bottom, and left
properties are used to specify the offset from the containing block.
fixed: The element is removed from the normal document flow and positioned relative to the viewport (the
browser window). It remains in the same position even when the page is scrolled. top, right, bottom, and
left properties are used to specify the offset from the viewport.
sticky: The element is positioned based on the user's scroll position. It behaves like relative until the element
reaches a specified threshold, at which point it becomes fixed. You must specify at least one of top, right,
bottom, or left for sticky positioning to work.
Example:
<div style="position: static;">
This is a static element.
</div>
# CSS Overflow
The overflow property controls how content that exceeds the boundaries of its container is handled. It
specifies whether to clip the content, add scrollbars, or display the overflow. The possible values are:
visible: This is the default value. Content that overflows the container is displayed outside of it.
Page 25
Web Interface Designing Technologies
hidden: Content that overflows the container is clipped and hidden.
scroll: Scrollbars are added to the container, allowing the user to scroll to view the overflowing content.
Scrollbars are always displayed, even if the content doesn't overflow.
auto: Scrollbars are added to the container only when the content overflows.
overlay: Similar to auto, but scrollbars take up no space. This is not supported by all browsers.
Example:
<div style="width: 100px; height: 50px; border: 1px solid black; overflow: visible;">
This is some text that will overflow the container.
</div>
CSS Floats
The float property is used to position an element to the left or right of its container, allowing other content
to flow around it. Floats are often used to create multi-column layouts or to wrap text around images. The
possible values are:
left: The element floats to the left of its container.
right: The element floats to the right of its container.
none: This is the default value. The element does not float.
Clearing Floats
When an element is floated, it is removed from the normal document flow. This can cause the container
element to collapse if it only contains floated children. To prevent this, you need to clear the floats. Clearing
a float means that the element will be rendered below any floated elements.
There are several ways to clear floats:
Using the clear property: The clear property can be applied to an element to specify which sides of the
element should not have floats. The possible values are left, right, both, and none.
Using the "clearfix" hack: This involves adding a pseudo-element (::after) to the container element and
setting its clear property to both. This is a common and effective way to clear floats.
Example:
Page 26
Web Interface Designing Technologies
<img src="image.jpg" style="float: left; margin-right: 10px;">
<p>This is some text that will wrap around the image.</p>
# Pseudo-classes & Pseudo- elements:
Pseudo-classes are keywords added to selectors that specify a special state of the selected element(s). They
allow you to style elements based on factors other than their position in the document tree, such as user
interaction (e.g., hovering, clicking), state (e.g., enabled, disabled), or structural position (e.g., first child, last
child).
Syntax
The syntax for using a pseudo-class is as follows:
selector:pseudo-class {
property: value;
The colon (:) is used to separate the selector from the pseudo-class.
Common Pseudo-classes:
Here are some of the most commonly used pseudo-classes:
:hover: Applies styles when the user hovers the mouse over an element.
:active: Applies styles when an element is being activated (e.g., clicked).
:focus: Applies styles when an element has focus (e.g., when a user tabs to it).
:visited: Applies styles to links that the user has already visited.
:link: Applies styles to links that have not been visited.
:first-child: Applies styles to the first child element of its parent.
:last-child: Applies styles to the last child element of its parent.
:nth-child(n): Applies styles to elements that are the nth child of their parent. n can be a number, a
keyword (even, odd), or a formula (e.g., 2n+1).
:nth-of-type(n): Applies styles to elements that are the nth element of their type within their parent.
:disabled: Applies styles to disabled form elements.
:enabled: Applies styles to enabled form elements.
Page 27
Web Interface Designing Technologies
:checked: Applies styles to checked radio buttons or checkboxes.
# Pseudo-elements :
Pseudo-elements allow you to style specific parts of an element. They create virtual elements that are not
part of the actual document tree but can be styled as if they were.
Syntax
The syntax for using a pseudo-element is as follows:
selector::pseudo-element {
property: value;
The double colon (::) is used to separate the selector from the pseudo-element. (Note: Single colon syntax ::
is also supported for backwards compatibility, but the double colon is the preferred syntax).
Common Pseudo-elements:
Here are some of the most commonly used pseudo-elements:
::before: Inserts content before the content of an element. Requires the content property.
::after: Inserts content after the content of an element. Requires the content property.
::first-line: Styles the first line of a block-level element.
::first-letter: Styles the first letter of a block-level element.
::selection: Styles the portion of an element that is selected by the user.
::placeholder: Styles the placeholder text in an input field.
# Opacity in CSS:
The opacity property in CSS is used to control the transparency of an element. It determines how much of
the background behind the element is visible. A value of 0 makes the element completely transparent, while
a value of 1 makes it completely opaque. Values between 0 and 1 create varying degrees of transparency.
Syntax
Page 28
Web Interface Designing Technologies
The syntax for the opacity property is as follows:
element {
opacity: value;
Where value is a number between 0 and 1.
0: The element is completely transparent.
1: The element is completely opaque.
0.5: The element is 50% transparent.
Example:
.transparent-box {
opacity: 0.5;
# Tooltips in CSS:
The fundamental concept behind CSS-only tooltips involves leveraging the :hover pseudo-class and the data-
* attributes. We'll use a span element to wrap the text that needs a tooltip. The tooltip text itself will be
stored in a data-tooltip attribute on the span. CSS will then be used to display this text when the user hovers
over the span.
Example:
Here's the basic HTML structure:
<span class="tooltip" data-tooltip="This is the tooltip text.">Hover over me</span>
Css:
.tooltip {
position: relative;
display: inline-block; /* Or block, depending on your layout */
Page 29
Web Interface Designing Technologies
# image gallery:
CSS provides various following techniques to create image galleries in webpages.
1. Basic Image Gallery with Floats:
One of the oldest methods for creating image galleries is using floats. This approach involves floating each
image to the left or right, allowing them to wrap around each other.
HTML Structure:
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
<img src="image6.jpg" alt="Image 6">
</div>
CSS Styling:
.gallery {
width: 80%; /* Adjust as needed */
margin: 0 auto; /* Center the gallery */
.gallery img {
width: 200px; /* Adjust image width */
height: auto; /* Maintain aspect ratio */
Page 30
Web Interface Designing Technologies
float: left; /* Float images to the left */
margin: 10px; /* Add spacing between images */
The .gallery class sets the overall width of the gallery and centers it on the page.
The img selector styles each image, setting its width, height, and margin. float: left; is the key
property that allows the images to arrange themselves horizontally.
2.Image Gallery with Inline-Blocks
Another basic approach is using display: inline-block. This allows elements to flow like inline elements but
retain block-level properties like width and height.
HTML Structure:
HTML Structure:
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
<img src="image6.jpg" alt="Image 6">
</div>
CSS Styling:
.gallery {
width: 80%;
Page 31
Web Interface Designing Technologies
margin: 0 auto;
text-align: center; /* Center the images horizontally */
.gallery img {
width: 200px;
height: auto;
display: inline-block; /* Display images as inline-blocks */
margin: 10px;
vertical-align: top; /* Align images to the top */
display: inline-block; allows the images to sit side-by-side while still allowing you to set their width
and height.
text-align: center; on the .gallery container horizontally centers the images.
vertical-align: top; ensures the images are aligned to the top, preventing potential alignment issues
due to different image heights.
3. Image Gallery with CSS Grid:
CSS Grid offers the most powerful and flexible layout options for creating image galleries. It allows you to
define rows and columns, creating complex and responsive layouts.
Example:
width: 80%;
Page 32
Web Interface Designing Technologies
margin: 0 auto;
display: grid; /* Enable CSS Grid */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Define columns */
grid-gap: 10px; /* Add spacing between images */
.gallery img {
width: 100%;
height: auto;
# CSS Forms:
The foundation of styling forms lies in understanding how to target and modify the appearance of individual
form elements using CSS selectors.
1. Basic form styling:
CSS (Cascading Style Sheets) enables to make HTML forms look more attractive and user-friendly by styling
form elements like <input>, <textarea>, <select>, and <button>.
Examle:
input, textarea, select {
width: 100%;
padding: 10px;
margin: 5px 0 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
2. Styling Form Lables:
Page 33
Web Interface Designing Technologies
Form labels play a crucial role in both accessibility and usability. Using CSS, you can transform plain, default
labels into visually appealing components that not only enhance the look of your form but also improve its
functionality. Here’s how you can style form labels effectively:
Ex:
label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
font-weight: bold;: This makes the label text appear bolder, improving its prominence and
readability. It helps the label stand out from the associated input field.
font-family: Select a font that is easy to read and consistent with the overall design of your website.
Consider using a sans-serif font for better readability on screens.
Color: applies the color to label text
Background-color: applies background color to the label
Font – size: applies the font size to lable text
padding: Add padding to the label to create more visual space around the text.
margin-bottom: 5px;: This adds a small margin below the label, creating visual separation between
the label and the input field. Adjust the value as needed to achieve the desired spacing.
Hover and Focus States:
Provide visual feedback when the user hovers over or focuses on the label. This can improve the user
experience by indicating that the label is interactive (especially for radio buttons and checkboxes).
Example:
label:hover {
background-color: #e0e0e0;
cursor: pointer; /* Change cursor to indicate interactivity */
}
label:focus {
Page 34
Web Interface Designing Technologies
outline: 2px solid blue; /* Add an outline for accessibility */
}
3. Styling Buttons:
To style buttons, we can target the following HTML elements using CSS: <input type="submit">, <input
type="reset">, and <button>. A basic styling approach involves setting the background color, text color,
removing the border, adding padding, and rounding the corners.
Example:
input[type="submit"], input[type="reset"], button {
background-color: #4CAF50; /* Green background */
color: white; /* White text */
border: none; /* Remove default border */
padding: 10px 20px; /* Add padding for spacing */
border-radius: 5px; /* Round the corners */
cursor: pointer; /* Change cursor to pointer on hover */
font-size: 16px; /* Set font size */
background-color: Sets the background color of the button. In this example, it's set to #4CAF50, a
shade of green.
color: Sets the text color of the button. Here, it's set to white.
border: Removes the default border that some browsers apply to buttons. Setting it to none gives
you more control over the button's appearance.
Page 35
Web Interface Designing Technologies
padding: Adds space around the text inside the button. The first value (10px) sets the top and
bottom padding, while the second value (20px) sets the left and right padding.
border-radius: Rounds the corners of the button. A value of 5px creates a subtle rounded effect.
cursor: Changes the cursor to a pointer when the mouse hovers over the button, indicating that it's
clickable.
font-size: Sets the size of the text within the button.
4. Aligning Form Elements:
CSS provides a variety of properties to style and align form elements on a webpage. It helps create a visually
appealing and user-friendly form layout by controlling aspects such as width, margins, padding, background
color, borders, and shadows.
Example:
form {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
max-width: 400px;: This property sets the maximum width of the form to 400 pixels.
margin: 0 auto;: This is a shorthand property for setting the top, right, bottom, and left margins. 0
sets the top and bottom margins to zero, while auto horizontally centers the form within its parent
container.
padding: 20px;: This property adds 20 pixels of padding around the content inside the form. Padding
creates space between the form's content (e.g., labels, input fields, buttons) and the form's border,
improving readability and visual appeal.
background-color: #f9f9f9;: This sets the background color of the form to a light gray (#f9f9f9).
border: 1px solid #ddd;: This adds a 1-pixel solid border around the form.
Page 36
Web Interface Designing Technologies
border-radius: 10px;: This rounds the corners of the form by 10 pixels.
box-shadow: 0 0 10px rgba(0,0,0,0.1);: This adds a subtle box shadow to the form.
# CSS counters:
CSS counters are essentially variables maintained by CSS that can be incremented by CSS rules to track how
many times they are used. They allow you to automatically generate and update numbers or other markers
for elements on your page, providing a flexible alternative to static numbering or JavaScript-based solutions.
They are particularly useful for numbering sections, figures, tables, or any other content that needs to be
sequentially identified.
Core Properties
The following CSS properties are essential for working with counters:
counter-reset: This property initializes or resets a counter to a specific value (defaulting to 0). It's typically
applied to the parent element of the elements you want to number. You can reset multiple counters at
once.
counter-increment: This property increments the value of a counter each time the associated element
appears. It's applied to the element you want to number. You can increment multiple counters at once, and
specify the increment value (defaulting to 1).
content: This property is used to insert generated content before or after an element. It's often used in
conjunction with the ::before or ::after pseudo-elements to display the counter value. The counter() and
counters() functions are used within the content property to access and format the counter value.
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS Counters Example</title>
<style>
body {
counter-reset: section; /* Initialize the 'section' counter */
}
h2 {
counter-increment: section; /* Increment the 'section' counter for each h2 */
Page 37
Web Interface Designing Technologies
}
h2::before {
content: "Section " counter(section) ": "; /* Display the counter value */
font-weight: bold;
}
</style>
</head>
<body>
<h2>Introduction</h2>
<p>This is the introduction section.</p>
<h2>Background</h2>
<p>This section provides background information.</p>
<h2>Methods</h2>
<p>This section describes the methods used.</p>
</body>
</html>
counter-reset: section; initializes the section counter to 0 on the body element.
counter-increment: section; increments the section counter by 1 for each h2 element.
h2::before { content: "Section " counter(section) ": "; } inserts the text "Section " followed by the
current value of the section counter and a colon before each h2 element.
Page 38
You might also like
- CSS Basics: Blue Background for ParagraphsNo ratings yetCSS Basics: Blue Background for Paragraphs6 pages
- Essential CSS Interview Questions GuideNo ratings yetEssential CSS Interview Questions Guide35 pages
- Chapter Three CSS (-BoxModel) - Part IINo ratings yetChapter Three CSS (-BoxModel) - Part II37 pages
- Lo1 Web Page Creations Using Css and HTMLNo ratings yetLo1 Web Page Creations Using Css and HTML75 pages
- BSC VC (Web Designing) 1st Year 2nd Unit (CSS)No ratings yetBSC VC (Web Designing) 1st Year 2nd Unit (CSS)20 pages
- Understanding CSS: A Comprehensive GuideNo ratings yetUnderstanding CSS: A Comprehensive Guide36 pages
- English SEM 3 Model Paper Wef 2016 17 Admitted BatchNo ratings yetEnglish SEM 3 Model Paper Wef 2016 17 Admitted Batch2 pages
- Service-Oriented Architecture: A Field Guide To Integrating XML and Web ServicesNo ratings yetService-Oriented Architecture: A Field Guide To Integrating XML and Web Services29 pages
- Options and Derivatives Programming in C++23: Algorithms and Programming Techniques For The Financial Industry, 3rd Edition Carlos Oliveira Latest PDF 2025No ratings yetOptions and Derivatives Programming in C++23: Algorithms and Programming Techniques For The Financial Industry, 3rd Edition Carlos Oliveira Latest PDF 202584 pages
