Module- 2

Module- 2
INTRODUCTION TO CSS AND JAVASCRIPT

Topics Covered in module 2.
➢ Introduction to CSS, ➢ Arrays and functions,
➢ Levels of CSS, ➢ pattern matching,
➢ Selectors, ➢ Element Access,
➢ Font, color and Text Properties, ➢ Event Handling.
➢ BOX Model,
➢ Span and Div tags.
➢ Introduction to Javascript,
➢ controls statements.
Introduction to CSS
▪Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a
document written in a markup language like HTML.
▪CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
▪CSS is designed to enable the separation of presentation and content, including layout, colors,
and fonts. This separation can improve content accessibility, provide more flexibility and control in
the specification of presentation characteristics, enable multiple web pages to share formatting
by specifying the relevant CSS in a separate CSS file, and reduce complexity and repetition in the
structural content.
What is CSS?
Definition: CSS (Cascading Style Sheets) is a style sheet language used for describing the
presentation of a document written in HTML or XML. Including the design, layout and variations in
display for different devices and screen sizes.
Purpose: Controls the layout of multiple web pages all at once.
External stylesheets are stored in CSS files.

Example
<style>
p
{
color: blue;
font-size: 20px;
}
</style>
<p>This is a paragraph with blue text and a font size of 20px.</p>
Levels of CSS
CSS gives flexibility in using different style property locally by overriding the global declared
values or declared styles in external style sheet.
Mainly there are three types
• Inline style sheet Or embedded styles

• Internal style sheet
• External style sheet
Inline Style
We add the styles within our HTML tags. This gets highest priority than Internal and external
defined styles.
To add a background style to one h4 tag.
<h4 style="background-color: white;"> This is H4 tag </h4>
Advantages: Quick and easy for small changes.

Internal Style
This type of style is defined inside the body tag of the page. The style defined here get
priority over the external styles but after the Inline styles.
Here is an example of Internal styles.
Advantages:
◦ Centralized style for a single document.
External Style
These styles are kept separately and called or linked from the required page. This is the syntax followed
for linking a external style sheet.
Advantages: Reusable, keeps HTML clean.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>This text is styled using external CSS.</p>
</body>
CSS Selectors
A CSS SELECTOR SELECTS THE HTML ELEMENT(S) YOU
WANT TO STYLE
CSS Selectors
CSS Selectors are essential for targeting HTML elements to apply styles. Each selector type
helps in applying styles based on different criteria.
Selectors may apply to the following:
• all elements of a specific type, e.g. the second-level headers h2
• elements specified by attribute, in particular

id: an identifier unique within the document
class: an identifier that can annotate multiple elements in a document
elements depending on how they are placed relative to others in the document tree
1.Basic Selectors
Element Selector
Description: Selects all instances of a specific HTML element.
Usage: Useful for applying styles to all elements of a particular type.
Example:
p { color: blue; }
This will turn the text color of all <p> elements to blue.
Class Selector
Description: Targets elements with a specific class attribute. Multiple elements can share the
same class.
Usage: Allows you to apply styles to a group of elements.
Example:
.example(classname)
{
font-size: 14px;
}
This applies a font size of 14px to all elements with the class example.
ID Selector
Description: Targets a single element with a specific id attribute. IDs must be unique within a
page.
Usage: Useful for applying styles to a unique element.
Example:
#unique { background-color: yellow; }
This will set the background color of the element with the ID unique to yellow.
2. Attribute Selectors
Description: Targets elements based on the presence or value of an attribute.
Usage: Useful for applying styles based on attributes of elements, like input types or data attributes.
Examples:
Presence:
[type] { border: 1px solid black; }
This targets all elements with a type attribute.

Value:
[type="text"] { border: 1px solid black; }
This targets all <input> elements with the type="text" attribute.

3.Pseudo-class Selectors
Description: Targets elements based on their state or position within the document.
Usage: Useful for styling elements dynamically based on user interactions or their position.
Examples:
Changes the color of a link to red when hovered over.

a:hover { color: red; }
Styles the second <li> element in a list.

li:nth-child(2) { color: green; }
4.Pseudo-element Selectors
Description: Targets a specific part of an element.
Usage: Useful for styling particular parts of an element like the first line or first letter.
Examples:
Makes the first line of every <p> element bold.

p::first-line { font-weight: bold; }
Adds content before every <p> element.

p::before { content: "Note: LOREM IPSUM"; font-weight: bold; }
5. Combinator Selectors
Description: Targets elements based on their relationship with other elements.
Usage: Useful for styling elements based on their location relative to other elements.
Examples:
Descendant Selector:
div p { color: green; }
Selects all <p> elements that are descendants of a <div>.
Child Selector:
ul > li { margin: 5px; }
Selects direct child <li> elements of a <ul>.
Group Selectors
Description: Groups multiple selectors to apply the same style to different elements.
Usage: Useful for reducing redundancy and keeping stylesheets concise.
Example:
h1, h2, h3 { font-family: Arial, sans-serif; }
Applies the same font-family to all <h1>, <h2>, and <h3> elements.
These selectors allow for flexible and precise styling of HTML elements, enhancing the
presentation and user experience of web pages.
CSS fonts
APPEARANCE OF TEXT ON A WEBPAGE
CSS fonts
CSS fonts are used to define and control the appearance of text on a webpage through the use of
various typefaces and styles.
They dictate how text should be rendered, including the typeface (font family), size, weight, style,
and spacing.
CSS fonts help ensure that text is presented consistently across different devices and browsers by
specifying exact font characteristics.
CSS fonts
Here’s a brief overview:
Typeface: The specific design of the characters, including different families like serif, sans-serif,
monospace, cursive, and fantasy.
Font Family: A collection of typefaces that share common design features, specified in CSS to
apply to text elements.
Web Fonts: Fonts that are loaded and used directly from the web, allowing for custom fonts that
aren't installed on the user's system. Examples include Google Fonts and Adobe Fonts.
System Fonts: The default fonts available on the user's operating system, used when no specific
web font is defined.
CSS Font Properties Detailed Overview
1. font-family
Purpose: Specifies the typeface for text.
Syntax: font-family: 'Font Name', Generic Family;
Description: Allows multiple fonts to be listed as a fallback mechanism. The browser uses the first
available font.
Generic Families: Include serif, sans-serif, monospace, cursive, fantasy, and system-ui.
Example:
p{
font-family: 'Arial', sans-serif;
}
2. font-size
Purpose: Defines the size of the font.
Syntax: font-size: value;
Values:
Absolute Sizes: px, pt, in, cm, mm, em (relative to the parent element), rem (relative to the root element).
Relative Sizes: small, medium, large, x-large, xx-large.
Example:
h1 {
font-size: 24px;
}
3. font-style
Purpose: Controls the style of the font.
Syntax: font-style: value;
Values: normal: Default style.

italic: Slants text to the right.
oblique: Similar to italic but with a different slant angle.
Example:
em {
font-style: italic;
}
4. font-weight
Purpose: Specifies the weight (thickness) of the font.
Syntax: font-weight: value;
Values:
Keywords: normal, bold.
Numeric Values: 100, 200, 300, 400, 500, 600, 700, 800, 900.
Example:
strong {
font-weight: bold;
}
5. font-variant
Purpose: Adjusts font features such as small-caps.
Syntax: font-variant: value;
Values:
normal: Default setting.
small-caps: Converts lowercase letters to small capital letters.
Example:
h2 {
font-variant: small-caps;
}
6. font-stretch
Purpose: Changes the width of the font characters.
Syntax: font-stretch: value;
Values:
normal: Default width.
condensed, expanded, ultra-condensed, semi-condensed, semi-expanded, ultra-expanded.
Example:
.narrow-text {
font-stretch: condensed;
}
7. font (Shorthand Property)
Purpose: A shorthand property for setting multiple font properties in a single declaration.
Syntax: font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];
Example:
.header {
font: italic small-caps bold 20px/1.5 'Verdana', sans-serif;
}
font-style: italic or normal.
font-variant: small-caps or normal.
font-weight: bold or numeric values.
font-size: Size of the text, e.g., 20px.
line-height: The space between lines of text, e.g., 1.5.
font-family: The font used, e.g., 'Verdana', sans-serif.

CSS Box Model
BOX MODEL COMPONENTS
CSS Box Model
The CSS Box Model is a fundamental concept that describes how the elements on a web page are
structured and how their dimensions are calculated.
Each element is represented as a rectangular box, and the model includes several layers.
CSS Box Model
Default Browser Behavior:
◦ Browsers assign default position values to HTML elements.
◦ This default behavior can lead to unexpected layouts and limited design flexibility.
Understanding the Box Model:

◦ The Box Model is crucial for understanding how elements are positioned and displayed on a web page. It
encompasses how an element is structured, including its content, padding, border, and margin.
Practical Examples:
◦ Background Color: When you apply a background color to an element, it fills the entire box, not just the
content area.
◦ Text Alignment: Text alignment is relative to the element's box, including its padding and borders.
CSS Box Model
Concept of the Box Model: Every element on a webpage is treated as being within a box.
Changing properties like background color affects the entire box, not just the content.
Importance of the Box Model:
Understanding the Box Model helps in managing layout, spacing, and alignment more effectively.
It ensures consistent and predictable designs across different browsers.

CSS Box Model
CSS Box Model
1. Content Area
Description: The innermost area where the content of the element (such as text or an image) is
displayed.
Properties: Defined by width and height.
Example:
.box {
width: 200px;
height: 100px;
}
CSS Box Model
2. Padding
Description: The space between the content area and the border. Padding adds space inside
the element around the content.
Properties: Can be set for all sides (padding), or individually (padding-top, padding-right, padding-
bottom, padding-left).
Example:
.box {
padding: 20px;
}
CSS Box Model
3. Border
Description: The line surrounding the padding and content area. It can be styled in various
ways (e.g., solid, dashed, dotted).
Properties: Set using border, border-width, border-style, and border-color
Example:
.box {
border: 2px solid black;
}
CSS Box Model
4. Margin
Description: The outermost space that separates the element from its surrounding elements.
Margins create space outside the border.
Properties: Can be set for all sides (margin), or individually (margin-top, margin-right, margin-left,
margin-bottom)
Example:
.box {
margin: 30px;
}
CSS Box Model
4. Box Sizing Property
Description: Determines how the total width and height of an element are calculated.
Properties: Can be set for all sides (margin), or individually (margin-top, margin-right, margin-left, margin-bottom)
Values:
content-box: The default value. Width and height apply only to the content area. Padding, border, and margin are added outside this area.
border-box: The width and height include the content, padding, and border. The total size of the element is set by these values, making it
easier to manage dimensions.
Example:
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}

Module- 2

Uploaded by

Copyright:

Available Formats

Module- 2

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Module- 2

Uploaded by

Copyright:

Available Formats

Module- 2

INTRODUCTION TO CSS AND JAVASCRIPT

Purpose: Controls the layout of multiple web pages all at once.

External stylesheets are stored in CSS files.

Mainly there are three types

• Inline style sheet Or embedded styles

To add a background style to one h4 tag.

<h4 style="background-color: white;"> This is H4 tag </h4>

Advantages: Quick and easy for small changes.

Here is an example of Internal styles.

Selectors may apply to the following:

• all elements of a specific type, e.g. the second-level headers h2

• elements specified by attribute, in particular

Usage: Useful for applying styles to all elements of a particular type.

Usage: Allows you to apply styles to a group of elements.

Usage: Useful for applying styles to a unique element.

#unique { background-color: yellow; }

This targets all elements with a type attribute.

This targets all <input> elements with the type="text" attribute.

Changes the color of a link to red when hovered over.

Styles the second <li> element in a list.

Makes the first line of every <p> element bold.

Adds content before every <p> element.

Usage: Useful for reducing redundancy and keeping stylesheets concise.

h1, h2, h3 { font-family: Arial, sans-serif; }

Purpose: Controls the style of the font.

Syntax: font-style: value;

Values: normal: Default style.

Purpose: Specifies the weight (thickness) of the font.

Syntax: font-weight: value;

Keywords: normal, bold.

Purpose: Changes the width of the font characters.

Syntax: font-stretch: value;

normal: Default width.

condensed, expanded, ultra-condensed, semi-condensed, semi-expanded, ultra-expanded.

font-style: italic or normal.

font-variant: small-caps or normal.

font-weight: bold or numeric values.

font-size: Size of the text, e.g., 20px.

line-height: The space between lines of text, e.g., 1.5.

font-family: The font used, e.g., 'Verdana', sans-serif.

Understanding the Box Model:

Importance of the Box Model:

It ensures consistent and predictable designs across different browsers.

Properties: Defined by width and height.

Properties: Set using border, border-width, border-style, and border-color

You might also like