FULL STACK Prof.

Pranav More
School of AI & Future Technologies
DEVELOPMENT

(CSS- CASCADING
STYLE SHEETS)
Contents of the unit:
• Basics of Cascading Style sheets,

• Advantages of CSS,

• External Style sheet,

• Internal style sheet,

• Inline style sheet,

• CSS Syntax,

• Color, Background,

• Font, Images
What is 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

Why Use 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 Saves a Lot of Work!

• The style definitions are normally saved in external .css files.

• With an external stylesheet file, you can change the look of an entire website by
changing just one file!
 What is CSS? Cascading Style
Sheet Cascading: Falling of
• Stylesheet Language Styles.
• Standards-based set of properties and attributes to define
Style: Adding designs/
styles Styling our HTML tags.

• To describe the presentation a document written in a ‘markup Sheets: Writing our style
in different documents
language’ like HTML or XML
• Markup encoding: <p>My paragraph here.</p>

• Defines the style of how things in <p> tags appear.

• Font, color, size, margins, etc.

• Cascading

• Rules to determine how to apply markup that contains other

markup.
 Why CSS?
• Separate Content from Form
• Content is the text and images, marked up to define regions of specific types
• Form defines the “style” for the content

<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
The old way: </font>
<font size=“14px”>
My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
Why CSS? Continued.

• Separate Content from Form

• Content

<p class=“header”>My First Header</p>

<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
(Specific markup properties like Class will be discussed later).

• Form or Style

.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue;
font-size: 12px; }
 What does this separation get us?
• Separate Content from Form
• Specify the style once for every instance of that class.
• Example: Specify the font once for all text on the HTML page that you’ve
identified as a “header”.

• The stylesheet can be a separate file which all HTML pages on your entire site
can link to.
• Only have to specify the style once for your ENITRE SITE
• Can change the style for your entire site by editing only ONE FILE.
CSS Syntax

• 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.

 CSS Syntax

• 3 Elements to a CSS Statement

• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?
 CSS Skinning
• “Skinning” - changing the look of a page or your site
• Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css"

href=“skin1.css" />

+
<p class=“info”>My Information 1 goes here</p>
skin1.css
.info { background-color: White;
font-family: Verdana;
font-color: Blue; }
=
My Information 1 goes here
 CSS Skinning 2
• “Skinning” - changing the look of a page or your site
• Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css"

href=“skin2.css" />

+
<p class=“info”>My Information 1 goes here</p>
skin2.css
.info { background-color: Blue;
font-family: Serif;
font-color: White; }
=
My Information 1 goes here
Three CSS Definition Locations

• Inline: the “style” attribute

• Inline styles are defined right in the (X)HTML file along side the element
you want to style. See example below.

• Note, the selector for inline CSS is the tag which contains the style attribute.

<p style=“font-color:red;font-size:10px;”>Content</p>
Three CSS Definition Locations
Internal: the <style> markup tag
•This way you are simply placing the CSS code within the <head></head> tags
of each (X)HTML file you want to style with the CSS.

•With this method each (X)HTML file contains the CSS code needed to style
the page. Meaning that any changes you want to make to one page, will have
to be made to all. This method can be good if you need to style only one
page, or if you want different pages to have varying styles.

<head> <html><head><style>
<title><title> p{ background-color: Red;
<style type=”text/css”> font-family: serif;
CSS Content Goes Here font-color: White; }
</style> </style></head><body>
</head> <p>Content</p>
<body> </body></html>
 Three CSS Definition Locations
External: the .css stylesheet file
•An external CSS file can be created with any text or HTML editor such as
“Notepad” or “Dreamweaver”. A CSS file contains no (X)HTML, only CSS.

•You simply save it with the .css file extension. You can link to the file externally by
placing one of the following links in the head section of every (X)HTML file you
want to style with the CSS file.

•By using an external style sheet, all of your (X)HTML files link to one CSS file in
order to style the pages. This means, that if you need to alter the design of all
your pages, you only need to edit one .css file to make global changes to your
entire website.

<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />

Cascading Inheritance

 Nested elements inherit

the properties from the
its parent

 If you specify a style for the body { font-family: Verdana;

<body> tag it will affect all font-size: 14px; }
content in your HTML page.
body { font-family: Verdana;
font-size: 1.1em; }
 If you want to override .littletext { font-size: 8px; }
inherited settings, you
need to specify a style in <body>
a more local element This text is larger.
<p class=“littletext”>This text is
smaller.</p>
 CSS Box Model
• Every element in CSS can be represented using the BOX model

• It allows us to add a border and define space between the content

• It helps the developer to develop and manipulate the elements

• It consists of 4 edges
• Content edge – It comprises of the actual content
• Padding edge – It lies in between content and border edge
• Border edge – Padding is followed by the border edge
• Margin edge – It is an outside border and controls the margin of the
element
 CSS Box Model
• Content: The content area consists of content like image, text, or other forms of media
content. The height and width properties help to modify the box dimensions.

• Padding: The padding area is the space around the content area and within the border-
box. It can be applied to all sides of the box or to the specific, selected side(s) - top, right,
bottom, and/or left.

• Border: The border area surrounds the padding and the content, and can be applied to
all the sides of the box or to selected side(s) - top, right, bottom, and/or left.

• Margin: The margin area consists of space between the border and the margin. The
margin does not possess its own background color and is completely transparent. It
shows the background color of the element, like the body element.
CSS Box Model

• The most inner rectangle represents

our content.
• The padding is nothing but the space
between the content and border.
• The margin is the area outside the
border.
 CSS Box Model
• The following diagram illustrates how the CSS properties
of width, height, padding, border and margin dictate that how much
space an attribute will occupy on a web page.
 CSS Box Model
<body>
Example:
<h2>Demonstrating the Box Model</h2>
div {
<p>The CSS box model is essentially a box that wraps
width: 300px;
around every HTML element. </p>
border: 15px solid green;
<div>This text is the content of the box. We have added a
padding: 50px;
50px padding, 20px margin and a 15px green border.
margin: 20px;
</div>
}
</body>
 Width and Height of an Element
• In order to set the width and height of an element correctly in all browsers, you need
to know how the box model works.

• Important: 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 full size of an
element, you must also add padding, borders and margins.

Example:
<body>
div {
<h2>Calculate the total width:</h2>
width: 320px;
<img src="k4_big.jpg" width="350" height="263" alt="Klematis">
padding: 10px;
<div>The picture above is 350px wide. The total width of this
border: 5px solid gray;
element is also 350px</div>
margin: 0;
</body>
}
 Width and Height of an Element
• Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

• The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border +
left margin + right margin

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

Total element height = height + top padding + bottom padding + top border + bottom
border + top margin + bottom margin
 Width and Height of an Element

Calculate Width and Height ?

Example 2:
.box
Example 1: {
.test padding-top:30px;
{ width: 300px;
margin-left:50px; height: 100px;
border:50px solid Purple; border: 40px solid red;
width:300px; margin: 30px;
height:200px; text-align:center;
text-align:center; font-size:32px;
padding:50px; font-weight:bold;
} }
 CSS Syntax: Selectors
 There are many kinds of selectors and many ways to reference them:
 Type, Class, ID, Pseudo, etc.

 HTML Type Tag – selected with the tag type

p{ font-size: 10px;
font-color: White; }

<p>Content</p>
 The Class Attribute – precede the class with a period

.myinfo { font-size: 10px;

font-color: White; }

<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>
 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)

 Simple CSS Selectors

The CSS element Selector

•The element selector selects HTML elements based on the element name.

The CSS id Selector

•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.

The CSS class Selector

•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.
ID Selector Vs. Class Selector

Class Selector ID Selector

We can apply a class to various elements The Id is unique in a page, and we can
so that it could be numerous times on a only apply it to one specific element.
single page.

The class is assigned to an element and The name of the Id starts with the "#"
its name starts with "." followed by the symbol followed by a unique id name.
name of the class.

We can attach multiple class selectors to We can attach only one ID selector to an
an element. element.
 Simple CSS Selectors
The CSS Universal Selector
•The universal selector (*) selects all HTML elements on the page.

The CSS Grouping Selector

•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;
}
h1, h2, p {
h2 {
text-align: center;
text-align: center;
color: red; color: red;
}
}
p{
text-align: center;
color: red;
}
Simple CSS Selectors
 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)

 CSS Combinators

• A combinator is something that explains the relationship between the selectors.

• A CSS selector can contain more than one simple selector. Between the simple
selectors, we can include a combinator.

There are four different combinators in CSS:

• descendant selector (space)

• child selector (>)

• adjacent sibling selector (+)

• general sibling selector (~)

 CSS Combinators
Descendant Selector Child Selector (>)
The descendant selector matches all The child selector selects all elements that
elements that are descendants of a are the children of a specified element.
specified element.
 CSS Combinators
Adjacent Sibling Selector (+) General Sibling Selector (~)
•The adjacent sibling selector is used to
select an element that is directly after The general sibling selector selects all
another specific element. elements that are next siblings of a
specified element.
•Sibling elements must have the same
parent element, and "adjacent" means
"immediately following".
 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)

 CSS Pseudo-classes
What are Pseudo-classes?
•A pseudo-class is used to define a special state of an element.

For example, it can be used to:

•Style an element when a user mouses over it
•Style visited and unvisited links differently
•Style an element when it gets focus

Syntax:
The syntax of pseudo-classes:
selector:pseudo-class
{
property: value;
}
 CSS Pseudo-elements
What are Pseudo-Elements?
•A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

•Style the first letter, or line, of an element
•Insert content before, or after, the content of an element

Syntax:
The syntax of pseudo-elements:
selector::pseudo-element
{
property: value;
}
 CSS Attribute Selectors
Style HTML Elements With Specific Attributes
•It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector

•The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:
a[target]
{
background-color: yellow;
}
 CSS Colors
• CSS uses color values to specify a color. Typically, these are used to set a color either for
the foreground of an element (i.e., its text) or else for the background of the element.

• They can also be used to affect the color of borders and other decorative effects.

• You can specify your color values in various formats. Following table lists all the
possible formats −
 CSS Backgrounds
This teaches you how to set backgrounds of various HTML elements. You can set the following
background properties of an element −

•The background-color property is used to set the background color of an element.

•The background-image property is used to set the background image of an element.

•The background-repeat property is used to control the repetition of an image in the

background.

•The background-position property is used to control the position of an image in the

background.

•The background-attachment property is used to control the scrolling of an image in the

background.

•The background property is used as a shorthand to specify a number of other background

properties.
 CSS Backgrounds- Operations
• Set the Background Color

• Set the Background Image

• Repeat the Background Image

• Set the Background Image Position

• Set the Background Attachment

 CSS Fonts
This teaches you how to set fonts of a content, available in an HTML element. You can set
following font properties of an element −

•The font-family property is used to change the face of a font.

•The font-style property is used to make a font italic or oblique.

•The font-variant property is used to create a small-caps effect.

•The font-weight property is used to increase or decrease how bold or light a font
appears.

•The font-size property is used to increase or decrease the size of a font.

•The font property is used as shorthand to specify a number of other font properties.
 CSS Texts
This teaches you how to manipulate text using CSS properties. You can set following text
properties of an element −
•The color property is used to set the color of a text.
•The direction property is used to set the text direction.
•The letter-spacing property is used to add or subtract space between the letters that
make up a word.
•The word-spacing property is used to add or subtract space between the words of a
sentence.
•The text-indent property is used to indent the text of a paragraph.
•The text-align property is used to align the text of a document.
•The text-decoration property is used to underline, overline, and strikethrough text.
•The text-transform property is used to capitalize text or convert text to uppercase or
lowercase letters.
•The white-space property is used to control the flow and formatting of text.
•The text-shadow property is used to set the text shadow around a text.
 CSS Table
• This will teach you how to set different properties of an HTML table using CSS. You can
set following properties of a table −

• The border-collapse specifies whether the browser should control the appearance of
the adjacent borders that touch each other or whether each cell should maintain its
style.

• The border-spacing specifies the width that should appear between table cells.

• The caption-side captions are presented in the <caption> element. By default, these
are rendered above the table in the document. You use the caption-side property to
control the placement of the table caption.

• The empty-cells specifies whether the border should be shown if a cell is empty.

• The table-layout allows browsers to speed up layout of a table by using the first width
properties it comes across for the rest of a column rather than having to load the
whole table before rendering it.
 CSS Scrollbar
• There may be a case when an element's content might be larger than the amount of space
allocated to it. For example, given width and height properties do not allow enough room to
accommodate the content of the element.
• CSS provides a property called overflow which tells the browser what to do if the box's contents is
larger than the box itself. This property can take one of the following values −
 CSS Border
The border properties allow you to specify how the border of the box representing an element
should look. There are three properties of a border you can change −
•The border-color specifies the color of a border.
border-bottom-color changes the color of bottom border.
border-top-color changes the color of top border.
border-left-color changes the color of left border.
border-right-color changes the color of right border.
•The border-style specifies whether a border should be solid, dashed line, double line, or one of the
other possible values.
none − No border. solid − Border is a single solid line.
dotted − Series of dots. dashed − Series of short lines.
double − two solid lines. groove − Border carved into the page.
ridge − Opposite of groove. inset − look like it is embedded in the page.
Outset- look like it is coming out of the canvas.
hidden − Same as none, except in terms of border-conflict resolution for table
•The border-width specifies the width of a border.
border-bottom-width border-top-width
border-left-width border-right-width
 CSS Lists
Lists are very helpful in conveying a set of either numbered or bullet points. This teaches you how to
control list type, position, style, etc., using CSS. We have the following five CSS properties, which can
be used to control lists −

•The list-style-type allows you to control the shape or appearance of the marker.

None: NA disc (default): A filled-in circle

Circle: An empty circle Square: A filled-in square

•The list-style-position specifies whether a long point that wraps to a second line should align with
the first line or start underneath the start of the marker.

None Inside Outside

•The list-style-image specifies an image for the marker rather than a bullet point or number.

The list-style-image allows you to specify an image so that you can use your own bullet style.

•The list-style serves as shorthand for the preceding properties.

•The marker-offset specifies the distance between a marker and the text in the list.
 CSS Self Study Concepts
CSS Margins

CSS Padding

CSS Outline

CSS Dimension

CSS Visibility

CSS Positioning

CSS Layers

CSS Text & Image Effect

 CSS3- Multi Columns
CSS3 supported multi columns to arrange the text as news paper structure. Some of
most common used multi columns properties as shown below −

•column-count: Used to count the number of columns that element should be divided.

•column-fill: Used to decide, how to fill the columns.

•column-gap: Used to decide the gap between the columns.

•column-rule: Used to specifies the number of rules.

•rule-color: Used to specifies the column rule color.

•rule-style: Used to specifies the style rule for column.

•rule-width: Used to specifies the width.

•column-span: Used to specifies the span between columns.

 CSS3- Rounded Corners
CSS3 Rounded corners are used to add special colored corner to body or text by using the border-
radius property. A simple syntax of rounded corners is as follows −

•border-radius: Use this element for setting four boarder radius property.

•border-top-left-radius: Use this element for setting the boarder of top left corner.

•border-top-right-radius: Use this element for setting the boarder of top right corner.

•border-bottom-right-radius: Use this element for setting the boarder of bottom right corner.

•border-bottom-left-radius: Use this element for setting the boarder of bottom left corner.

Syntax:
#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}