Applied computingUNIT 2nd Complete

Hina Gojwari
CASET College
INTRODUCTION TO CSS
Cascading Style Sheets, fondly referred to as CSS, is a simply designed
language intended to simplify the process of making web pages presentable.
CSS allows you to apply styles to web pages. More importantly, CSS
enables you to do this independent of the HTML that makes up each web
page. It describes how a webpage should look: it prescribes colors, fonts,
spacing, and much more. In short, you can make your website look however
you want. CSS lets developers and designers define how it behaves,
including how elements are positioned in the browser.
While html uses tags, css uses rulesets. CSS is easy to learn and
understand, but it provides powerful control over the presentation of an
HTML document.
Need for CSS

• CSS saves time: You can write CSS once and reuse the same sheet in
multiple HTML pages.
• Easy Maintenance: To make a global change simply change the style,
and all elements in all the webpages will be updated automatically.
• Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
• Superior styles to HTML: CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
• Offline Browsing: CSS can store web applications locally with the help
of an offline cache. Using this we can view offline websites.
CSS versions release years:

Hina Gojwari
CASET College
Different approaches to Style Sheets

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, here we will also learn inline and internal styles.
Inline CSS
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:
Internal CSS
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 Brown. In
addition, the page will be displayed with a "cyan" background color:
Hina Gojwari
CASET College
External CSS
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:
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:

Hina Gojwari
CASET College
NOTE: With an external style sheet, you can change the look of an entire
web site, by changing one file!
Anatomy of a CSS Rule
A CSS rule consists of a selector and a declaration block.
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
In this example below all <p> elements will be center-aligned, with blue text
color:
Hina Gojwari
CASET College
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
CSS Selectors: Element, Class and ID
A CSS selector selects the HTML element(s) you want to style.
The CSS element Selector

The element selector selects HTML elements based on the element name.
Here, all <p> elements on the page will be center-aligned, with a red text
color:
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 rule below will be applied to the HTML element with id="para1":
Hina Gojwari
CASET College
Note: An id name cannot start with a number!
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.
In the example below all HTML elements with class="center" will be red and
center-aligned:
You can also specify that only specific HTML elements should be affected by a
class. In the below example only <p> elements with class="center" will be
red and center-aligned:
Hina Gojwari
CASET College
Wildcard Selectors ( * ^ and $) for Classes

Wildcard selector is used to select multiple elements simultaneously. It
selects similar type of class name or attribute and use CSS property. *
wildcard also known as containing wildcard.
1. [attribute*=”str”] Selector: The [attribute*=”str”] selector is used to select

that elements whose attribute value contains the specified sub string str. This
example shows how to use a wildcard to select all div with a class that
contains str.
Syntax:
[attribute*="value"] {
// CSS property }
Hina Gojwari
CASET College
2. [attribute^=”str”] Selector: The [attribute^=”value”] selector is used to

select those elements whose attribute value begins with a specified value str.
This example shows how to use a wildcard to select all div with a class that
starts with str.
Syntax:
[attribute^="str"] {
// CSS property }
3. [attribute$=”str”] Selector: The [attribute$=”value”] selector is used to

select those elements whose attribute value ends with a specified value str.
The following example selects all elements with a class attribute value that
ends with str.
Syntax:
[attribute$="str"] {
// CSS property }
Hina Gojwari
CASET College
Combining Selectors (Combinators in CSS)
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 (~)
1. Descendant Selector (space)

The descendant selector matches all elements that are descendants of a
specified element. The following example selects all <p> elements inside
<div> elements:
2. Child Selector (>)

The child selector selects all elements that are the children of a specified
element.
The following example selects all <p> elements that are children of a <div>
element:
Hina Gojwari
CASET College
3. Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after
another specific element. Sibling elements must have the same parent
element, and "adjacent" means "immediately following". The following
example selects the first <p> elements that are placed immediately after
<div> elements:
Hina Gojwari
CASET College
4. General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a
specified element. The following example selects all <p> elements that are
next siblings of <div> elements:
Pseudo - Class Selectors
A Pseudo class in CSS is used to define the special state of an element. It

can be combined with a CSS selector to add an effect to existing elements
based on their states. For Example, changing the style of an element when
the user hovers over it, or when a link is visited. All of these can be done
using Pseudo Classes in CSS.
The syntax of pseudo-classes:
selector:pseudo-class {
property: value;
There are many Pseudo classes in CSS but the ones which are most
commonly used are as follows:
Hina Gojwari
CASET College
:hover Pseudo-class: This pseudo-class is used to add special effect to an

element when our mouse pointer is over it.
:active Pseudo-class: This pseudo-class is used to select an element which is

activated when the user clicks on it.
:link Pseudo-class: Adds style to the unvisited link
:visited Pseudo-class: This pseudo-class is used to select the links which

have been already visited by the user.
Example:
Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective! a:active MUST come after a:hover in
the CSS definition in order to be effective! Pseudo-class names are not
case-sensitive.
Hina Gojwari
CASET College
Hover on <div>
An example of using the :hover pseudo-class on a <div> element:
Style Placement / Position property in CSS
The position property specifies the type of positioning method used for
an element. The position property specifies the type of positioning method
used for an element.
There are five different position values:
• static
• relative
• fixed
• absolute
• sticky
Elements are then positioned using the top, bottom, left, and right
properties. However, these properties will not work unless
the position property is set first. They also work differently depending on
the position value.
Hina Gojwari
CASET College
• position: static;
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.
• position: relative;
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.
Hina Gojwari
CASET College
• position: fixed;
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.
• position: absolute;
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.
Note: Absolute positioned elements are removed from the normal flow, and
can overlap elements.
Hina Gojwari
CASET College
• position: sticky;
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).
Hina Gojwari
CASET College
Resolving Conflicts in CSS
Two or more conflicting CSS rules are sometimes applied to the same
element. What are the rules in CSS that resolve the question of which
style rule will actually be used when a page is rendered by a browser?
The answer is, “it’s complicated.” Several factors are involved. I’ll give
you a brief explanation of each factor.
Inheritance
Some properties are passed from parent to child. For example, this rule in
a style sheet would be inherited by all child elements of the body and
make every font on the page display as Georgia.
body {font-family: Georgia;}
The Cascade
Within the cascade, more than one factor can figure into determining
which one of several conflicting CSS rules will actually be applied. These
factors are source order, specificity and importance. Location is part of
the cascade, too.
Source order means the order in which rules appear in the style sheet. A
rule that appears later in the source order will generally overrule an
earlier rule. Consider this example.
body {font-family: Georgia;}

h1, h2, h3 {font-family: Arial;}
Because the h1, h2, and h3 selectors are in the source order after the
body rule, the headings would display in Arial, not in Georgia. There’s also
the fact that the selector is picking specific elements.
Specificity
Specificity is determined by a mathematical formula, but common sense

can help you understand it.
p {font-family: Georgia;}
.feature p {font-family: Arial;}
In this case, the selector .feature p is more specific than the selector p. For
any paragraph assigned to the class ‘feature’ the font-family would be
Arial. Common sense tells you that selecting a paragraph that belongs to
Hina Gojwari
CASET College
a particular class is a more specific choice than selecting all paragraphs.

The more specific selector overrules the less specific selector.
!important
There are rules that are declared !important. !important rules always
overrule other rules, no matter what inheritance, source order or
specificity might otherwise do. A user created stylesheet can use
!important to overrule the author’s CSS.
*{font-family: Arial !important;}
This rule would mean that everything (* selects everything) would be

Arial no matter what other rules were used in the CSS.
Location
Style rules can exist in a number of locations in relation to the HTML page
affected. The location of a rule also plays into determining which rule
actually ends up being implemented. The locations are:
1. Browser style rules

2. External style rules
3. Internal style (in the document head) rules
4. Inline style rules
5. Individual user style rules
In the list, the browser style rules are the most “distant” from the HTML
page, the individual user styles are the “closest.” Within this cascade of
style declarations, the closest rule wins. An inline style overrules an
external style, which overrules a browser style.
Styling Text in CSS
CSS text formatting properties is used to format text and style text. CSS text
formatting include following properties:
1.Text-color
2.Text-alignment
3.Text-decoration
4.Text-transformation
5.Text-indentation
6.Letter spacing
7.Line height
8.Text-direction
9.Text-shadow
10.Word spacing
Hina Gojwari
CASET College
1.TEXT COLOR
Text-color property is used to set the color of the text.

Text-color can be set by using the name “red”, hex value “#ff0000” or
by its RGB value “rgb(255, 0, 0).
Example:
2.TEXT ALIGNMENT
Text alignment property is used to set the horizontal alignment of the text.
The text can be set to left, right, centered and justified alignment.
In justified alignment, line is stretched such that left and right margins are
straight.
Hina Gojwari
CASET College
3.TEXT DECORATION
Text decoration is used to add or remove decorations from the text.

Text decoration can be underline, overline, line-through or none.
4.TEXT TRANSFORMATION
Text transformation property is used to change the case of text, uppercase

or lowercase. Text transformation can be uppercase, lowercase or
capitalise. Capitalise is used to change the first letter of each word to
uppercase.
5.TEXT INDENTATION
Text indentation property is used to indent the first line of the paragraph.
The size can be in px, cm, pt.
Hina Gojwari
CASET College
6. LETTER SPACING
This property is used to specify the space between the characters of the text.
The size can be given in px.
7.LINE HEIGHT
This property is used to set the space between the lines.

Hina Gojwari
CASET College
8.TEXT DIRECTION
Text direction property is used to set the direction of the text. The direction
can be set by using rtl : right to left . Left to right is the default direction of
the text
9. TEXT SHADOW
Text shadow property is used to add shadow to the text.

You can specify the horizontal size, vertical size and shadow color for the
text. Syntax:
body
{
text-shadow:horizontal size vertical size color name; }
Hina Gojwari
CASET College
10.WORD SPACING
Word spacing is used to specify the space between the words of the line.
The size can be given in px.
Web Fonts in CSS
Web fonts allow Web designers to use fonts that are not installed on the
user's computer.
When you have found/bought the font you wish to use, just include the font
file on your web server, and it will be automatically downloaded to the user
when needed.
Hina Gojwari
CASET College
Your "own" fonts are defined within the CSS @font-face rule.
Different Font Formats

TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and

Microsoft. TrueType is the most common font format for both the Mac OS
and Microsoft Windows operating systems.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType,

and is a registered trademark of Microsoft. OpenType fonts are used
commonly today on the major computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is
now a W3C Recommendation. WOFF is essentially OpenType or TrueType
with compression and additional metadata. The goal is to support font
distribution from a server to a client over a network with bandwidth
constraints.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1
specifications define a font module that allows the creation of fonts within an
SVG document. You can also apply CSS to SVG documents, and the @font-
face rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for
use as embedded fonts on web pages.
The CSS @font-face Rule

In the @font-face rule; first define a name for the font (e.g. myfont) and
then point to the font file.
“ Always use lowercase letters for the font URL.”
To use the font for an HTML element, refer to the name of the font (myfont)
through the font-family property:
Hina Gojwari
CASET College
Example:
Font Descriptors:
Descriptors can be defined inside the @font-face rule. We shall now explain
the different types of font descriptors.
• font-family: It is used to define the name of font. It is required for web

fonts to function.
• src: It is used to define the URL from which we get the font. Like font-
family the src is also required. Except these two fields the rest of the
descriptors are optional.
• font-stretch: It is used to find, how font should be stretched. Normal is

the value taken by default. The different font stretch values are normal,
condensed, semi-condensed, ultra-condensed, extra-condensed,
expanded, semi-expanded, extra-expanded and lastly ultra-expanded.
• font-style: It is used to define the font different styles. The different styles
that can be set are oblique and the default style is normal.
• font-weight: The weight of the font can be defined using this descriptor.
Default value of font-weight is “normal”. The different values for the
boldness are normal, bold, and we can also give numerical values
ranging from 100-900 in increments of 100.
Hina Gojwari
CASET College
CSS Web Safe Fonts

It may be a situation when the fonts you are trying to use on your web pages
are not appeared as it should be, because all fonts are not available on all
computer system.
To ensure the exact rendering of your text on most of the browser or

operating systems you have to define your fonts very carefully. The font-
family CSS property can hold several font names as a fallback system. Start
with the font that you want first, then the fonts you might want to fill in for the
first if it is not available.
You should always end the list with a generic font family, which are
five: serif, sans-serif, monospace, cursive and fantasy. The generic font family
allows the browser to select a similar font, if not any fonts defined by you are
available.
The following table lists the font's combinations that are most safe to use.
font-family Normal Bold
Arial, Helvetica, sans-serif This is normal text. This is bold text.
"Times New Roman", Times, serif This is normal text. This is bold text.
"Courier New", Courier, monospace This is normal text. This is bold text.
The following example shows you how to set the font-family property in
correct manner.
Hina Gojwari
CASET College
Working with Browser Developer Tools

Every web-developer needs some basic set of tools for understanding the
underlying structure of the code and enables us to inspect the web content.
Developer tools are built directly into the browser. These are the tools that
are browser dependent. Most of these tools are common among various
browsers and do a range of things, from inspecting elements of a currently-
loaded HTML, CSS, and JavaScript. With developer tools, we can directly
interact with the source code that is fetched into the client side of our system.
How to open DevTools in the browser

There are many ways to open the Browser Developer Tools.
Hina Gojwari
CASET College
• To access the DOM or CSS of the webpage, right-click the desired element on
the page and select Inspect. Or press Command+Option+C (Mac),
Control+Shift+C/I (Windows, Linux, Chrome OS), or press F12 (Internet
Explorer, Edge).
• Inspector
The Inspector tool allows you to see the HTML, CSS of the webpage that you are
currently inspecting. With it, you can check what CSS is applied to each element on
the page. It also allows you to preview instant changes to the HTML and CSS
which are reflected live in the browser. These changes are not permanent and are
reset once you refresh the browser window.
• Edit as HTML (Add attribute/Edit text): This allows to change the HTML
and see the results in real-time. Most useful for debugging and testing.
• Create Node: Create another empty inner division.
• Duplicate Node: Create an exact copy of the division, along with the
same attributes.
• Delete Node: Deletes the current element.
• Copy/ Copy as HTML: Copy HTML which is currently selected.
• Change Pseudo-Class (:hover/:active/:focus): It forces element states
to be toggled on. Enabling us to view the particular styling on the
element.
• Copy CSS Path/ Copy XPath: Most useful feature of Inspector (feature
could be enabled manually) it allows to copy the CSS selector or XPath
expression, this selects the current HTML element.
Application:
• Viewing and changing the DOM/ CSS

• Inspect and change HTML Pages.
• Inspect animations
• Find unused CSS.
Hina Gojwari
CASET College
2. Console
The console is used for debugging JavaScript present in the source code of the
webpage. The console window act as our debug window that allows us to handle
JavaScript that isn’t working as expected. It allows you to either run a code block or
single lines of JavaScript against the page which is currently loaded in the browser.
The console reports the errors which are encountered by the browser as it tries to
execute the code.
• The console recognized the correct syntax and generated an alert message
corresponding to the JavaScript Code.
• It also recognized type errors and gave us an error message for the wrong
syntax.
Application:
• Viewing logged messages

• Running JavaScript
• Preserve Log
• Group similar elements
• Log XmlHttpRequests
• Preserving live expression
3. Debugger(Firefox)/ Sources(Chrome)
The Sources/Debugger UI panel watches JavaScript code and allows you to set
breakpoints and watch the value of variables. Breakpoints are set at the places in
the code where we want to pause the execution cycle and debug or identify the
problems with the execution. With this panel, you debug the JavaScript.
This panel has three parts:
1. File list(Firefox)/ File Navigator(Chrome): Lists every file associated with the
page that we are debugging.
Hina Gojwari
CASET College
2. Source code(Firefox)/ Code Editor(Chrome): Contents of the selected file is

displayed in this panel. Breakpoints could also be set in this panel, where we want
to pause execution.
3. Watch expressions and breakpoints: These are the tools for inspecting the
JavaScript of the page.
There are two more sections that only appear when the code is running.
4. Call Stack: It shows you what code was executed to get to the current line.
5. Scopes: It shows the values which are visible from a different perspective from
within the given code.
Application:
• Pause code with breakpoints.

• Save changes to disk with workspaces.
• Run snippets of code from any page.
• Find unused JavaScript.
• Persist changes across page reloads with local overrides.
• Get a JavaScript debugging reference.
3. Network Monitor
A Network panel is used to make sure what all resources that are being
downloaded or uploaded are being done as expected. It enables us to view the
network requests made when a page is loaded. It tells how long each request
takes, and details of each request. The monitor is empty when it is loaded, the logs
are created once any action is performed while the monitor is open.
Each row of Network Logs does represent a list of resources. These resources are
listed according to the following structure:
Hina Gojwari
CASET College
1. Status: The HTTP response code.

2. Type: The resource type.
3. Initiator: The Initiator column is a hyperlink that takes you to the source
code of the request.
4. Time: Time is taken by the request.
5. Timeline/ Waterfall: Graphical representation of the various stage of
these requests.
Application:
• Inspecting the properties of an individual resource (HTTP headers, content,

size).
• Checking Network request list
• View Network traffic recording
• Creating Performance analysis
• Inspecting web sockets
• Inspecting server-sent events
• To throttle the network speed
4. Performance Tools
Performance is recorded at runtime and tells how the page performs when it is
running, as opposed to loading. The tool gives a general insight into how good is
the site’s general responsiveness. It also measures the JavaScript & layout
performance of the site. The tool creates a recording/ profile, of the website over a
period of time, the tool is made to run. An overview is created using the RAIL
model, listing all the frames of the browser activity which has been done to render
the website.
Application:
• Simulating a mobile CPU
• Recording runtime performance of our site
• Analyzing frame per second
• Finding the bottleneck capacity
• Animating CSS properties
Hina Gojwari
CASET College
Conclusion:
Browser DevTools are very useful and important tools for web development. The
ability to work directly within a browser in real-time helps a lot in easing out the
development process. With these tools we can take leverage of their wide range of
applications to preview style changes, alter the HTML or help write JavaScript code
and do some debugging. There are so many more ways to use these listed
DevTools and the possibilities are endless. Hence, it is always encouraged to try
each and every tool present, as each tool opens up a whole other dimension of
Web-Development.
The CSS Model Box
All HTML elements can be considered as boxes. 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:
margins, borders, padding, and the actual content. The image below
illustrates the box model:
Hina Gojwari
CASET College
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
Float and Z-index properties
Float |Definition and Usage

The float CSS property places an element on the left or right side of its container,
allowing text and inline elements to wrap around it. The element is removed from the
normal flow of the page, though still remaining a part of the flow.
The float property specifies whether an element should float to the left,
right, or not at all.
Note: Absolutely positioned elements ignore the float property!

Hina Gojwari
CASET College
CSS Syntax
float: none|left|right|initial|inherit;
Z-index |Definition and Usage

The z-index property specifies the stack order of an element. An element
with greater stack order is always in front of an element with a lower stack
order. z-index only works on positioned elements (position: absolute,
position: relative, position: fixed, or position: sticky) and flex items
(elements that are direct children of display: flex elements).
Note: If two positioned elements overlap without a z-index specified, the

element positioned last in the HTML code will be shown on top.
CSS Syntax
z-index: auto|number|initial|inherit;
Hina Gojwari
CASET College
Example:
Scan the QR code given below to see the demo on Z- index property-
Hina Gojwari
CASET College
Basic Introduction to Bootstrap Framework

o Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing a responsive and mobile friendly website.
o It is absolutely free to download and use.
o It is a front-end framework used for easier and faster web development.
o It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many others.
o It can also use JavaScript plug-ins.
o It facilitates you to create responsive designs.
What is Responsive Web Design?
Responsive web design is about creating web sites which automatically

adjust themselves to look good on all devices, from small phones to large
desktops.
History of Bootstrap
Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter.It was released
as an open source product in August 2011 on GitHub.
In June 2014 Bootstrap was the No.1 project on GitHub.
Why Use Bootstrap?
Advantages of Bootstrap:
• Easy to use: Anybody with just basic knowledge of HTML and CSS can
start using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones,
tablets, and desktops
• Mobile-first approach: In Bootstrap 3, mobile-first styles are part of
the core framework
• Browser compatibility: Bootstrap is compatible with all modern
browsers (Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)
Hina Gojwari
CASET College
Bootstrap Versions
Bootstrap 3, was released in 2013; Bootstrap 4 (released

2018) and Bootstrap 5 (released 2021).
Bootstrap 5 is the newest version of Bootstrap; with new components, faster

style sheets, more responsiveness etc. It supports the latest, stable releases
of all major browsers and platforms. However, Internet Explorer 11 and
down is not supported.
The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that

Bootstrap 5 has switched to JavaScript instead of jQuery.
What Bootstrap Package contains
• Scaffolding: Bootstrap provides a basic structure with Grid System, link styles,
and background.
• CSS: Bootstrap comes with the feature of global CSS settings, fundamental
HTML elements style and an advanced grid system.
• Components: Bootstrap contains a lot of reusable components built to
provide iconography, dropdowns, navigation, alerts, pop-overs, and much
more.
• JavaScript Plugins: Bootstrap also contains a lot of custom jQuery plugins.
You can easily include them all, or one by one.
• Customize: Bootstrap components are customizable and you can customize
Bootstrap's components, LESS variables, and jQuery plugins to get your own
style.
Where to Get Bootstrap?
There are two ways to start using Bootstrap on your own web site.
You can:
• Download Bootstrap from getbootstrap.com

• Include Bootstrap from a CDN
Is Bootstrap Best?
Bootstrap is more than efficient to create a responsive and mobile first website but it
is not the best in the industry. There is an alternative of Bootstrap named W3.CSS
which is smaller, faster, and easier to use.
################## END OF UNIT II ##################

Applied computingUNIT 2nd Complete

Uploaded by

Copyright:

Available Formats

Applied computingUNIT 2nd Complete

Uploaded by

Document Information

Original Title

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

Applied computingUNIT 2nd Complete

Uploaded by

Copyright:

Available Formats

Hina Gojwari

Need for CSS

CSS versions release years:

Different approaches to Style Sheets

• Inline - by using the style attribute inside HTML elements

Here is what the "styles.css" file looks like:

Anatomy of a CSS Rule

A CSS rule consists of a selector and a declaration block.

CSS Selectors: Element, Class and ID

A CSS selector selects the HTML element(s) you want to style.

The CSS element Selector

The CSS id Selector

Note: An id name cannot start with a number!

The CSS class Selector

Wildcard Selectors ( * ^ and $) for Classes

1. [attribute*=”str”] Selector: The [attribute*=”str”] selector is used to select

2. [attribute^=”str”] Selector: The [attribute^=”value”] selector is used to

3. [attribute$=”str”] Selector: The [attribute$=”value”] selector is used to

Combining Selectors (Combinators in CSS)

A combinator is something that explains the relationship between the

There are four different combinators in CSS:

• descendant selector (space)

1. Descendant Selector (space)

2. Child Selector (>)

3. Adjacent Sibling Selector (+)

4. General Sibling Selector (~)

Pseudo - Class Selectors

A Pseudo class in CSS is used to define the special state of an element. It

:hover Pseudo-class: This pseudo-class is used to add special effect to an

:active Pseudo-class: This pseudo-class is used to select an element which is

:link Pseudo-class: Adds style to the unvisited link

:visited Pseudo-class: This pseudo-class is used to select the links which

Style Placement / Position property in CSS

There are five different position values:

Resolving Conflicts in CSS

body {font-family: Georgia;}

body {font-family: Georgia;}

Specificity is determined by a mathematical formula, but common sense

a particular class is a more specific choice than selecting all paragraphs.

*{font-family: Arial !important;}

This rule would mean that everything (* selects everything) would be

1. Browser style rules

Styling Text in CSS

Text-color property is used to set the color of the text.

Text decoration is used to add or remove decorations from the text.

Text transformation property is used to change the case of text, uppercase

This property is used to set the space between the lines.

Text shadow property is used to add shadow to the text.

Web Fonts in CSS

Different Font Formats

TrueType is a font standard developed in the late 1980s, by Apple and

OpenType Fonts (OTF)

OpenType is a format for scalable computer fonts. It was built on TrueType,

The Web Open Font Format (WOFF)

Embedded OpenType Fonts (EOT)

The CSS @font-face Rule

“ Always use lowercase letters for the font URL.”

• font-family: It is used to define the name of font. It is required for web

• font-stretch: It is used to find, how font should be stretched. Normal is

1. [attribute=”str”] Selector: The [attribute=”str”] selector is used to select