UNIT - III

CSS

CSS stands for Cascading Style Sheets. It is a stylesheet language used to style
and enhance website presentation. CSS specify how an HTML element should be
displayed on the web page. CSS is one of the main three components of a webpage
along with HTML and JavaScript.
CSS was released (in 1996), 3 years after HTML (in 1993). The main idea behind
its use is, it allows the separation of content (HTML) from presentation (CSS). This
makes websites easier to maintain and more flexible.

CSS saves a lot of work. It can control the layout of multiple web pages all at once

Use of CSS
CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.

CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

1. Styling HTML Elements:

CSS is used to apply styles like colors, fonts, borders, backgrounds, and spacing to HTML elements.
Example:
<style>
p{
color: blue;
font-size: 16px;
font-family: Arial, sans-serif;
}
</style>
<p>This is a styled paragraph.</p>

2. Page Layout and Positioning:

CSS helps in creating layouts, positioning elements, and controlling the display of content.
Example:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

3. Responsive Design:
CSS is essential for creating websites that adapt to different screen sizes (mobile, tablet, desktop) using
media queries.
Example:
@media (max-width: 768px) {
body {
background-color: lightblue;
}
}

4. Animations and Transitions:

CSS enables smooth animations and transitions to enhance user experience.
Example:
button {
transition: background-color 0.3s ease;
}
button:hover {
background-color: green;
}

5. Theming and Customization:

With variables and preprocessors (like SASS or LESS), CSS allows consistent theming across a site.
Example:

:root {

--primary-

h1 { color: #3498db;}

color: var (primary-color);

6. Accessibility:
CSS improves accessibility by controlling focus states, visibility, and styles for assistive technologies.
Example:

a:focus {

outline: 2px solid yellow;

}

7. Compatibility Across Browsers:

CSS ensures a consistent look across different web browsers by standardizing styles.

Benefits of Using CSS

• Separation of content and design.

• Reduced duplication (single stylesheet for multiple pages).

 • Easier updates and maintenance.

• Enhanced performance (styles cached in the browser).

• Rich design capabilities.

CSS is an essential tool for modern web development, enabling creativity, usability, and efficiency.

SYNTAX
CSS has a simple syntax and uses a number of English keywords to specify the names of various style
properties.

Style sheet
• A style sheet consists of a list of rules. Each rule or rule-set consists of one or
more selectors, and a declaration block.

Selector
• In CSS, selectors declare which part of the markup a style applies to by matching tags
and attributes in the markup itself.
• The selector points to the HTML element you want to style.

• The declaration block contains one or more declarations separated by

semicolons.

• Each declaration includes a CSS property name and a value, separated by a

colon.

• Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.

• Selectors are used to “select” the HTML element you want to style. It can be an
element type (e.g., h1), a class (e.g., .class-name), an ID (e.g., #id-name), or a
combination of these.

1. Type Selector: Targets all elements of a specific type, like h1, p, div, etc.
2. Class Selector: Targets elements with a specific class. Example: .my-class { }
3. ID Selector: Targets an element with a specific ID. Example: #my-id { }
4. Universal Selector: Targets all elements (*).
2. Properties: Properties are the aspects of the selected elements you want to style (like
color, width, height, etc.).
1. color: Defines the text color.
2. background-color: Defines the background color of an element.
3. font-size: Sets the size of the font.
4. margin: Specifies the space around an element.
5. padding: Defines the space between the element’s content and its border.

3. Values: Values define the specifics of the property you want to apply, such as a color
name, a number (e.g., 16px), or percentages (e.g., 50%).

Grouping and Nesting

You can group selectors to apply the same styles or nest them for hierarchical
targeting.

Pseudo-classes and Pseudo-elements

Pseudo-classes and pseudo-elements are used for styling specific states or parts of
elements. Pseudo classes target’s the elements based on a particular state and pseudo
elements targets the elements on basis of a particular part of that element.

Why CSS?
• Saves Time: Write CSS once and reuse it across multiple HTML pages.
• Easy Maintenance: Change the style globally with a single modification.
• Search Engine Friendly: Clean coding technique that improves readability for search
engines.
• Superior Styles: Offers a wider array of attributes compared to HTML.
• Offline Browsing: CSS can store web applications locally using offline cache, allowing
offline viewing.

CSS Versions Release Year

How to add CSS

There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
 • Inline CSS

❖ External CSS

With an external style sheet, you can change the look of an entire website by changing
just one file!

Each HTML page must include a reference to the external style sheet file inside the
<link> element, inside the head section.

Example
External styles are defined within the <link> element, inside the <head> section of an
HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css
extension.
The external .css file should not contain any HTML tags.
Here is how the "mystyle.css" file looks:
"mystyle.css"
body {
background-color: lightblue;
}

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

❖ Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.

Example
Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

❖ Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.
Example

Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>
CSS Background property:
In CSS, the background is the area behind an element’s content. It can be a solid color, an image, or
even a combination of both, making elements visually appealing.
The background property in CSS allows you to control different aspects of this background, like setting
the color, adding an image, and deciding how that image repeats or is positioned. It combines several
settings into one line for easier styling.

Background color Property:

This property specifies the background color of an element.

A color name can also be given as: “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”.
Syntax
body {
background-color:color name
}

Background Image Property:

This property specifies an image to use as the background of an element. By default, the image is repeated so it
covers the entire element.
Syntax
body {
background-image : link;
}

Background repeat Property:

By default the background image property repeats the image both horizontally and vertically.
Syntax
To repeat an image horizontally
body {
background-image:link;
background-repeat: repeat:x;
}

Background-position Property:

This property is used to set the image to a particular position.

Syntax
body {
background-repeat:no repeat;
background-position:left top;
}
Text Formatting

Text Formatting allows you to control the visual presentation of text on a webpage. From
changing fonts to adjusting spacing and alignment, CSS provides powerful properties to
enhance the readability and aesthetic of text.

• CSS lets you adjust font properties, text alignment, spacing, and decorations.

• It helps in creating visually appealing text and improving the user experience.

• Various text-related properties can be combined to achieve unique text styles and
layouts.

Text Formatting Properties

1. color
This property help’s to set the color of a text on your web page which is inside an
element or inside the body tag if no element is parenting it.
Syntax
element{
color: color-name | rgb | rgba | hsl | hsla | hexadecimal;
}

2. text-align
This property aligns the text in an element at a specific position. Also it aligns the
text on basis of it’s writing direction with properties like start and end it means to
the start and end of the container in which it is written.
Syntax
element{
text-align: left| right |center | justify |start | end | initial | inherit;
}

3. text-align-last

This property in CSS understands the last line as the line after a natural line break
sequence. Suppose if a person is writing a paragraph this property will consider
the last line as the line after the natural line break due to page width end as the
last line of the paragraph.

Syntax

element{

text-align-last: left | right | center | justify | initial | inherit;

4. text – decoration

This property basically help’s to add a underline to the text written in your element
, In this their are various type’s of decoration context’s that you can apply to your
text.
Syntax
element{
text-decoration: dashed | dotted | double | line-through | none | overline | solid |
underline | wavy;
}

5. text-decoration-color

This property help’s to add a color to the underline that is made over or under a
text with the use of text-decoration property.

Syntax
element{
text-decoration-color: color | initial | inherit;
}

6. text-decoration-line

This property help’s to set the type of line used in decoration of any text.

Syntax
element{
 text-decoration-line: underline | overline | line-through | none | inherit | initial;
}

7. text-decoration-style

This property help’s to set the preview of the line used for a particular text.
Syntax
element{
text-decoration-style: dashed | dotted | double | none | solid | wavy | initial |
inherit;
}

8. text-indent

This property in CSS add ‘s an indentation to the first line written in an element
from the starting of that particular element.
Syntax
element{
text-indent: value in pixel's | inherit | initial;
}

9. text – justify

This property in CSS specifies the kind of justification that has to be made to a text
on basis of inter-word space or inter-character space.
Syntax
element{
text-justify: initial | inter-word | inter-character | inherit;
}

10. bdo

This is a tag in html that overrides the content written inside it to a

specific direction using the dir attribute with it.
Positioning using CSS
CSS positioning defines how elements are placed within a web page. It allows you to control
the layout, stacking order, and alignment of elements. The primary positioning types in CSS
are:

Position
Property Description

An element with position: fixed property remains in the same

Fixed
position relative to the viewport even when the page is scrolled.

Default positioning method. Elements with position: static are

Static
positioned according to the normal flow of the document.

Elements with position: relative are positioned relative to their

Relative normal position in the document flow. Other elements will not fill
the gap left by this element when adjusted.

Positioned concerning its nearest non-static ancestor. Elements

Absolute
with position: absolute are taken out of the normal document flow.

Combines features of position: relative and position: fixed. The

Sticky element is treated as position: relative until it reaches a specified
threshold, then it becomes position: fixed.

Static Positioning

Static is the default position of an element. It does not accept properties like top,
left, right, or bottom.
2. Relative Positioning

Relative positioning places an element relative to its normal position. You can
move it using top, left, right, or bottom.

HTML
<html>
<head>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
.relative {
position: relative;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div>Box 1</div>
<div class="relative">Box 2</div>
</body>
</html>
• Box 2 is shifted 20px down and 30px to the right from its normal position.