F.Y.C.

S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2

UNIT 1: Introduction to CSS
Description:
Overview of CSS : Understanding the Syntax of CSS, CSS Selectors - Universal, Type, Class
and ID selectors, Inserting CSS in an HTML Document - Internal, External and Inline style,
CSS properties to work with background of a Page, CSS properties to work with Fonts and
Text Styles,
Box model - padding, margin, border, height and width properties, CSS properties for
positioning an element - fixed, relative, absolute positioning, opacity effect
Self-learning topics: Customising controls using CSS.

➢ OVERVIEW OF CSS:
CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen,
paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once.
External stylesheets are stored in CSS files.
CSS is the language we use to style an HTML document. CSS describes how HTML elements should be
displayed. This tutorial will teach you CSS from basic to advanced.

➢ Understanding the Syntax of CSS:

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.

Example
p{
color: red;
text-align: center;
}
Example Explained
● p is a selector in CSS (it points to the HTML element you want to style: <p>).
● color is a property, and red is the property value
● text-align is a property, and center is the property value

1
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
➢ CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.
We can divide CSS selectors into five categories:
● Simple selectors (select elements based on name, id, class)
● Combinator selectors (select elements based on a specific relationship between them)
● Pseudo-class selectors (select elements based on a certain state)
● Pseudo-elements selectors (select and style a part of an element)
● Attribute selectors (select elements based on an attribute or attribute value)
Here we will explain the most basic CSS selectors.
All CSS Simple Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.class p.intro Selects only <p> elements with class="intro"
* * Selects all elements
Element/type p Selects all <p> elements
element,element,.. div, p Selects all <div> elements and all <p> elements

➢ CSS Selectors - Element / Type:

The element selector selects HTML elements based on the element name. The CSS type
selector matches elements by node name. In other words, it selects all elements of the given type
within a document. Type selectors can be namespaced when using @namespace. This is useful
when dealing with documents containing multiple namespaces such as HTML with inline SVG or
MathML, or XML that mixes multiple vocabularies.
• ns|h1 - matches <h1> elements in namespace ns
• *|h1 - matches all <h1> elements
• |h1 - matches all <h1> elements without any declared namespace

Example
Here, all <p> elements on the page will be center-aligned, with a red text color:
p{
text-align: center;
color: red;
}

➢ CSS Selectors - Universal :

The universal selector (*) selects all HTML elements on the page.

Example
The CSS rule below will affect every HTML element on the page:
*{
text-align: center;
color: blue;
}

2
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2

➢ CSS Selectors - Class :

The class selector selects HTML elements with a specific class attribute. To select elements with a specific
class, write a period (.) character, followed by the class name. You can also specify that only specific HTML
elements should be affected by a class.
Example 1
In this example all HTML elements with class="center" will be red and center-aligned:
.center {
text-align: center;
color: red;
}

Example 2
In this example only <p> elements with class="center" will be red and center-aligned:
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.

Example 3
In this example the <p> element will be styled according to class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>

➢ CSS Selectors – ID Selectors :

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element
is unique within a page, so the id selector is used to select one unique element. To select an element with a
specific id, write a hash (#) character, followed by the id of the element. An id name cannot start with a
number.
Example
The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}

➢ CSS Selectors – Grouping Selectors :

The grouping selector selects all the HTML elements with the same style definitions.
Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;

3
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
color: red;
}
p{
text-align: center;
color: red;
}
It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example 2
In this example we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}

➢ Inserting CSS in an HTML Document:

Cascading Style Sheets (CSS) is used to format the layout of a webpage. With CSS, you can control the color,
font, the size of text, the spacing between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different displays for different devices and screen
sizes, and much more!
The word cascading means that a style applied to a parent element will also apply to all children elements
within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other
text elements within the body will also get the same color (unless you specify something else)!
Using CSS
CSS can be added to HTML documents in 3 ways:

● Inline - by using the style attribute inside HTML elements

● Internal - by using a <style> element in the <head> section
● External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we
will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

➢ Inserting CSS in an HTML Document – Inline Style:

An inline CSS is used to apply a unique style to a single HTML element. An inline CSS uses the style attribute
of an HTML element.
The following example sets the text color of the <h1> element to blue, and the text color of the <p>
element to red:
Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

4
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
➢ Inserting CSS in an HTML Document – Internal Style:
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the <head>
section of an HTML page, within a <style> element. The following example sets the text color of ALL the
<h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue" background color:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>

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

➢ Inserting CSS in an HTML Document – Externsl Style:

An external style sheet is used to define the style for many HTML pages. To use an external style sheet, add
a link to it in the <head> section of each HTML page:

Example 1:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

The external style sheet can be written in any text editor. The file must not contain any HTML code, and
must be saved with a .css extension.
Here is what the "styles.css" file looks like:

5
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
Example 2:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
With an external style sheet, you can change the look of an entire web site, by changing one file!

Link to External CSS

External style sheets can be referenced with a full URL or with a path relative to the current web page.
Example 1
This example uses a full URL to link to a style sheet:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Example 2
This example links to a style sheet located in the html folder on the current web site:
<link rel="stylesheet" href="/html/styles.css">
Example 3
This example links to a style sheet located in the same folder as the current page:
<link rel="stylesheet" href="styles.css">

➢ CSS Properties to work with background of a page:

The background property is a shorthand property for:
• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is
allowed.

CSS Syntax
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Example
Set different background properties in one declaration:
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
6
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to
separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result
in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image
will be 50 pixels wide and 50 pixels high.
If using multiple background-image sources but also want a background-color, the background-color
parameter needs to be last in the list.
Property Values:
Value Description
background-color Specifies the background color to be used
background-image Specifies ONE or MORE background images to be used
background-position Specifies the position of the background images
background-size Specifies the size of the background images
background-repeat Specifies how to repeat the background images
background-origin Specifies the positioning area of the background images
background-clip Specifies the painting area of the background images
background-attachment Specifies whether the background images are fixed or scrolls with the rest of
the page
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

➢ CSS Properties to work with Fonts and text Styles:

Choosing the right font has a huge impact on how the readers experience a website. The right font can
create a strong identity for your brand. Using a font that is easy to read is important. The font adds value to
your text. It is also important to choose the correct color and text size for the font.
Speaking of font availability, there are only a certain number of fonts that are generally available across all
systems and can therefore be used without much worry. These are the so-called web safe fonts.

Generic Font Families

In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.
• Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic
look.
• Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.
All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts

7
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2

Fig: Some font examples.

In CSS, we use the font-family property to specify the font of a text. If the font name is more than one
word, it must be in quotation marks, like: "Times New Roman".
The font-family property should hold several font names as a "fallback" system, to ensure maximum
compatibility between browsers/operating systems. Start with the font you want, and end with a generic
family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font
names should be separated with comma.
The font property is a shorthand property for:
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
The font-size and font-family values are required. If one of the other values is missing, their default value
are used. The line-height property sets the space between lines.

CSS Syntax
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-
box|small-caption|status-bar|initial|inherit;

Property Values:
Property/Value Description
font-style Specifies the font style. Default value is "normal"
font-variant Specifies the font variant. Default value is "normal"
font-weight Specifies the font weight. Default value is "normal"
font-size/line-height Specifies the font size and the line-height. Default value is "normal"
font-family Specifies the font family. Default value depends on the browser
caption Uses the font that are used by captioned controls.
8
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
(like buttons,drop-downs, etc.)
icon Uses the font that are used by icon labels
menu Uses the fonts that are used by dropdown menus
message-box Uses the fonts that are used by dialog boxes
small-caption A smaller version of the caption font
status-bar Uses the fonts that are used by the status bar
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Example
A demonstration of some of the other font property values.
<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p style="font:menu">The browser font used in dropdown menus.</p>
<p style="font:message-box">The browser font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The browser font used in the status bar.</p>
Here, we will demonstrate some commonly used CSS properties. You will learn more about them later. The
CSS color property defines the text color to be used. The CSS font-family property defines the font to be
used. The CSS font-size property defines the text size to be used.
Example
Use of CSS color, font-family and font-size properties:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

9
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
➢ Box Model
In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: content,
padding, borders and margins. The image below illustrates the box model:

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space between elements.

Example
Demonstration of the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

➢ Box Model - Padding:

The CSS padding property defines a padding (space) between the text and the border.

Example
Use of CSS border and padding properties:
p{
border: 2px solid powderblue;
padding: 30px;
}

➢ Box Model - Margin:

The CSS margin property defines a margin (space) outside the border.

10
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
Example
Use of CSS border and margin properties:
p{
border: 2px solid powderblue;
margin: 50px;
}

➢ Box Model - Border:

The CSS border property defines a border around an HTML element. You can define a border for nearly all
HTML elements.
Example
Use of CSS border property:
p{
border: 2px solid powderblue;
}

➢ Box Model – Height & Width Properties:

In order to set the width and height of an element correctly in all browsers, you need to know how the box
model works. When you set the width and height properties of an element with CSS, you just set the width
and height of the content area. To calculate the total width and height of an element, you must also include
the padding and borders.

Example
This <div> element will have a total width of 350px and a total height of 80px:
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Here is the calculation:

320px (width of content area)
+ 20px (left padding + right padding)
+ 10px (left border + right border)
= 350px (total width)

50px (height of content area)

+ 20px (top padding + bottom padding)
+ 10px (top border + bottom border)
= 80px (total height)

11
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right border

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border

The margin property also affects the total space that the box will take up on the page, but the margin is not
included in the actual size of the box. The box's total width and height stops at the border.

➢ CSS Properties for positioning an element:

The position property in CSS tells about the method of positioning for an element or an HTML entity and the
positioning of an element can be done using the top, right, bottom, and left properties. These specify the
distance of an HTML element from the edge of the viewport.

There are five different types of position properties available in CSS:

• Fixed position: Any HTML element with position: fixed property will be positioned relative to the
viewport. An element with fixed positioning allows it to remain in the same position even we scroll
the page. We can set the position of the element using the top, right, bottom, and left.
• Static: This method of positioning is set by default. If we don’t mention the method of positioning for
any element, the element has the position: static method by default. By defining Static, the top, right,
bottom, and left will not have any control over the element. The element will be positioned with the
normal flow of the page.
• Relative: An element with position: relative is positioned relatively with the other elements which are
sitting on top of it. If we set its top, right, bottom, or left, other elements will not fill up the gap left
by this element. An element with its position set to relative and when adjusted using top, bottom,
left, and right will be positioned relative to its original position.
• Absolute: An element with position: absolute will be positioned with respect to its nearest Non-static
ancestor. The positioning of this element does not depend upon its siblings or the elements which
are at the same level.
• Sticky: Element with position: sticky and top:0 played a role between fixed & relative based on the
position where it is placed. If the element is placed in the middle of the document then when the
user scrolls the document, the sticky element start scrolling until it touched the top. When it touches
the top, it will be fixed at the top place in spite of further scrolling. we can stick the element at the
bottom, with the bottom property.

All CSS Positioning Properties:

Property Description
bottom Sets the bottom margin edge for a positioned box
clip Clips an absolutely positioned element
left Sets the left margin edge for a positioned box
position Specifies the type of positioning for an element
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box

12
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
➢ CSS Properties for positioning an element – Static Positioning:

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.

Example
div.static {
position: static;
border: 3px solid #73AD21;
}

➢ CSS Properties for positioning an element – Fixed Positioning:

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.

Example
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

➢ CSS Properties for positioning an element – Relative Positioning:

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.

Example
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
➢ CSS Properties for positioning an element – Absolute Positioning:
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. Absolute positioned elements
are removed from the normal flow, and can overlap elements.

Example

13
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

➢ CSS Properties for positioning an element – Sticky Positioning:

An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles
between relative and fixed, depending on the scroll position. It is positioned relative until a given offset
position is met in the viewport - then it "sticks" in place (like position:fixed).

Internet Explorer does not support sticky positioning. You must also specify at least one of top, right, bottom
or left for sticky positioning to work.
In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Example
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}

➢ CSS Properties for positioning an element – Opacity Effect:

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.

14
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
Example
img {
opacity: 0.5;
}

The opacity property is often used together with the ':hover' selector to change the opacity on mouse-over:

Example
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}

When using the opacity property to add transparency to the background of an element, all of its child
elements inherit the same transparency. This can make the text inside a fully transparent element hard to
read:

Example
div {
opacity: 0.3;
}

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:

You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can
use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color.

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).
15
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
Example
div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

Example:

<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}

div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>

</body>
</html>

16
F.Y.C.S-SEM II WEB PROGRAMMING - I NOTES - UNIT 2
➢ Self-Learning Topics: Customizing controls using CSS

17