Cascading Style Sheet (CSS)

Compiled and Presented By: CKS

Email: chandraks35@yahoo.com
 CSS stands for Cascading Style Sheet.
 It is used to design HTML tags.
 It is a widely used language on the web.
 HTML, CSS and JavaScript are used for web designing.
 It helps the web designers to apply style on HTML tags.
 It is a style sheet language which is used to describe the look and formatting of a
document written in markup language.
 It provides an additional feature to HTML. It is generally used with HTML to
change the style of web pages and user interfaces.
 It can also be used with any kind of XML documents including plain XML, SVG
and XUL.

https://www.javatpoint.com/what-is-css
You can add new looks to your old HTML documents.
You can completely change the look of your website with only
a few changes in CSS code.

https://www.javatpoint.com/what-is-css
Some of the major benefits of CSS:
1) Solves a big problem: 8) Makes your website look
2) Saves a lot of time: attractive:
3) Provide more attributes: 9) Makes the design come live:
4) Pages load faster: 10) Increases user experience of the
5) Easier Website maintenance: website:
6) Multiple device compatibility: 11) Search Engines:
7) Base for web development: 12) More career opportunities:

https://www.javatpoint.com/what-is-css
Cntd…
1) Solves a big problem: Font, color, background style, element
alignments, border, and size tags had to be duplicated on each
web page before CSS. This was a lengthy procedure. It was a
W3C recommendation.
2) Saves a lot of time: CSS style definitions are saved in external
CSS files so it is possible to change the entire website by
changing just one file. You can write CSS once and reuse the
same sheet in multiple HTML pages.

https://www.javatpoint.com/what-is-css
Cntd…
3) Provide more attributes: CSS provides more detailed
attributes than plain HTML to define the look and feel of the
website.
4) Pages load faster: CSS doesn’t require you to write HTML
tag attributes all of the time. A tag’s rule can be written once
and applied to all instances of the tag. As a result, CSS uses
less code, resulting in speedier download times.

https://www.javatpoint.com/what-is-css
Cntd…
5) Easier Website maintenance: CSS makes website
maintenance much easier. If we need to make a global change
to the file, we can simply alter the style, which will update all
of the elements on the web page.
6) Multiple device compatibility: We can use CSS with older
language versions because it is compatible with them. CSS
makes it possible to optimize material for several devices.

https://www.javatpoint.com/what-is-css
Cntd…
7) Base for web development: HTML and CSS is the basic skill
that every web developer should know. It is the basic skill that
is required for building a website.
8) Makes your website look attractive: A website that’s dull and
plain will not attract the user, so adding some style would
surely make your website presentable to the user.
9) Makes the design come live: A web developer is responsible
for making the design given to him as a live product. It is used
for styling to develop the design of the website.

https://www.javatpoint.com/what-is-css
Cntd…
10) Increases user experience of the website: A website with a
simple yet beautiful. It would help the users to go through the
website easily. It is used to make the user interface better.
11) Search Engines: CSS is considered a clean coding technique,
which means search engines won’t have to struggle to “read” its
content.
12) More career opportunities: Since CSS is a basic requirement
while learning Web Development, therefore there are abundant
career opportunities for it. As a freelancer, you can land up to many projects.

https://www.javatpoint.com/what-is-css
https://www.geeksforgeeks.org/css-introduction/?ref=lbp
A CSS text editor is a software that enables a developer to write and edit
CSS codes. There are many editors available online. Some of the popular
one are:
• Sublime Text
• Notepad++
• Atom
• Stylizer
• Espresso
• Brackets, etc.

https://unstop.com/blog/advantages-and-disadvantages-of-css
A CSS rule set contains a selector and a declaration block.

https://www.javatpoint.com/what-is-css
Cntd…
A CSS rule set contains a selector and a declaration block.

https://www.w3schools.com/css/css_syntax.asp
Cntd…
Selector: Selector indicates the HTML element you want to style. It could be any tag like
<h1>, <title> etc.
Declaration Block: The declaration block can contain one or more declarations
separated by a semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border

etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is
assigned to color property.

https://www.javatpoint.com/what-is-css
CSS selectors are used to select the content you want to style. Selectors are
the part of CSS rule set. CSS selectors select HTML elements according to
its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1) CSS Element Selector
2) CSS Id Selector
3) CSS Class Selector
4) CSS Universal Selector
5) CSS Group Selector

https://www.javatpoint.com/what-is-css
CSS selectors are used to select the content you want to style. Selectors are
the part of CSS rule set. CSS selectors select HTML elements according to
its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1) CSS Element Selector
2) CSS Id Selector
3) CSS Class Selector
4) CSS Universal Selector
5) CSS Group Selector

https://www.javatpoint.com/what-is-css
 <!DOCTYPE html>
<html>
<head>
1) CSS Element Selector: <style>
The element selector p{
text-align: center;
selects the HTML element Example: color: blue;
}
by name. </style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

https://www.javatpoint.com/what-is-css
2. CSS Id Selector: The id selector selects the id attribute of an
HTML element to select a specific element. An id is
always unique within the page so it is chosen to select
a single, unique element.
It is written with the hash character (#), followed by the
id of the element.
Let?s take an example with the id "para1".

https://www.javatpoint.com/what-is-css
Cntd…
 <!DOCTYPE html>
Example: <html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
Note: This paragraph will not be affected.
</html>

https://www.javatpoint.com/what-is-css
Cntd…
3. CSS Class Selector: The class selector selects HTML elements with a
specific class attribute. It is used with a period character. (full stop
symbol) followed by the class name.
Note: A class name should not be started with a number.

Let's take an example with a class "center".

https://www.javatpoint.com/what-is-css
Cntd…
Example : <html> Output:
<head>
<style> This heading is blue and center-aligned.
.center { This paragraph is blue and center-aligned.
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-
aligned.</p>
</body>
</html>

https://www.javatpoint.com/what-is-css
a. CSS Class Selector for specific element:
If you want to specify that only one specific HTML element
should be affected then you should use the element name with
class selector.
Let's see an example.

https://www.javatpoint.com/what-is-css
Cntd…
 <!DOCTYPE html>
Let's see an example. <html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-
aligned.</p>
</body>
</html>

https://www.javatpoint.com/what-is-css
4. CSS Universal Selector: The universal selector is used as a wildcard
character. It selects all the elements on the pages.
<head> Output
<style>
*{ This is heading
color: green; This style will be applied on every paragraph.
font-size: 20px; Me too!
} And me!
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

https://www.javatpoint.com/what-is-css
5. CSS Group Selector: The grouping selector is used to select
all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are
used to separate each selector in grouping.

https://www.javatpoint.com/what-is-css
Cntd…
Example: <style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>

https://www.javatpoint.com/what-is-css
1. Lightweight code.
2. Easier to Maintain and update
3. Consistent Design
4. Time-Saving
5. Better Device Compatibility
6. Ease of presenting different styles to different viewers.
7. Faster download times.
8. Search engine optimization benefits.

https://unstop.com/blog/advantages-and-disadvantages-of-css
Cntd…
1. Confusion due to many CSS levels: Beginners are more vulnerable to this issue.
They might get confused while opting to learn CSS as there are many levels of CSS
such as CSS2, CSS3, etc.
2. Cross-Browser Issues: Different browsers work differently. So, you have to check
that changes implemented in the website via CSS codes are reflected properly
among all browsers.
3. Security Issues: Security is important in today’s world driven by technology and
data. One of the major disadvantages of CSS is that it has limited security.
4. Extra Work for Developers: Design services are required to consider and test all
CSS codes across different browsers for compatibility. Due to developers testing
compatibility for different browsers, their workload increases.

https://unstop.com/blog/advantages-and-disadvantages-of-css
Cntd…
CSS is added to HTML pages to format the document according to
information in the style sheet. There are three ways to insert CSS in HTML
documents.
1.Inline CSS
2.Internal CSS
3.External CSS

https://www.javatpoint.com/what-is-css
Cntd…
1. Inline CSS: Inline CSS is used to apply CSS on a single line or element.
For Example:
<p style="color:blue">Hello CSS</p>

https://www.javatpoint.com/what-is-css
Cntd…
1. Advantages of Inline CSS:
 Inline takes precedence over all other styles. Any styles
defined in the internal and external style sheets are overridden
by inline styles.
 You can quickly and easily insert CSS rules into an HTML
page, which is useful for testing or previewing changes and
performing quick fixes on your website.
 There is no need to create an additional file.
 To apply styling in JavaScript, use the style attribute.

https://www.freecodecamp.org/news/inline-style-in-html/
1. Disadvantages of Inline CSS:
 You cannot use quotations within inline CSS. If you use quotations
the browser will interpret this as an end of your style value.
 These styles cannot be reused anywhere else.
 These styles are tough to be edited because they are not stored at a
single place.
 It is not possible to style pseudo-codes and pseudo-classes with
inline CSS.
 Inline CSS does not provide browser cache advantages.

https://www.freecodecamp.org/news/inline-style-in-html/
2. Internal CSS:
Internal CSS is used to apply CSS on a single document or page. It can
affect all the elements of the page. It is written inside the style tag within
head section of html. Example:
1. <style>
2. p{color:blue}
3. </style>

https://www.javatpoint.com/what-is-css
Cntd…
1. Advantages of Internal CSS:
 You can use class and ID selectors in this style sheet. Example:

1) .class { property1 : 2)
value1; property2 : #id { property1 :
value2; property3 : value1; property2 :
value3; value2; property3 :
} value3;
}
 Since you’ll only add the code within the same HTML file, you don’t
need to upload multiple files.

https://www.freecodecamp.org/news/inline-style-in-html/
1. Disadvantages of Internal CSS:
Adding the code to the HTML document can increase the
page’s size and loading time.

https://www.freecodecamp.org/news/inline-style-in-html/
 3. External CSS: The external style sheet is generally used when you want
to make changes on multiple pages. It is ideal for this condition
because it facilitates you to change the look of the entire web site by
changing just one file.
It uses the <link> tag on every pages and the <link> tag should be
put inside the head section. Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The external style sheet may be written in any text editor but must be saved with a .css extension. This file should not
contain HTML elements.

https://www.javatpoint.com/what-is-css
Cntd…
1. With the help of External Style Sheets, the styles of numerous
documents can be organized from one single file.
2. In External Style Sheets, Classes can be made for use on numerous
HTML element types in many forms of the site.
3. In complex contexts, Methods like selector and grouping can be
implemented to apply styles.

https://discuss.boardinfinity.com/t/what-are-the-advantages-and-disadvantages-of-using-external-style-sheets/13971
1. An extra download is essential to import style information for each file.
2. The execution of the file may be deferred till the external style sheet is
loaded.
3. While implementing style sheets, we need to test Web pages with
multiple browsers in order to check compatibility issues.

https://discuss.boardinfinity.com/t/what-are-the-advantages-and-disadvantages-of-using-external-style-sheets/13971
Internal Style Sheets:
 are appropriate for very small sites, especially those that have just a single page.
 might also make sense when each page of a site needs to have a completely
different look.

External Style Sheets:

 are better for multi-page websites that need to have a uniform look and feel to all
pages.
 make for faster-loading sites (less redundant code).
 allow designers to make site-wide changes quickly and easily.

External style sheets create the furthest separation between content and presentation. For this
reason - and the others listed above - we'll consider external style sheets to be the best
option when creating a new site.
1) HTML is used to define a structure of a web page whereas CSS is used
to style the web pages by using different styling features.
2) HTML consists of tags inside which text is enclosed and CSS consists
of selectors and declaration blocks.
3) CSS can be internal or external depending upon the requirement.
4) We cannot use HTML inside a CSS sheet but we can use CSS inside an
HTML document.
5) CSS has comparatively higher backup and support than HTML.

https://www.geeksforgeeks.org/css/