CSMSS

CHH. SHAHU COLLEGE OF

ENGINEERING
KANCHANWADI, PAITHAN ROAD, CHH.SAMBHAJINAGAR – 431002

A REPORT OF SEMINAR ON

“Cascading Style Sheets”

SUBMITTED IN PARTIAL FULFILLMENT OF REQUIREMENT
FOR
AWARD OF THE DEGREE

BACHELOR OF TECHNOLOGY
IN
COMPUTER SCIENCE & ENGINEERING

Submitted By
Deepak Laxman Badhekar
Roll No: CS2132

Under the
guidance of
Prof. P. D.
Sathya
(Assistant Professor)

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

Academic Year: 2023-24Part-I
 CSMSS
CHH. SHAHU COLLEGE OF ENGINEERING
KANCHANWADI, PAITHAN ROAD, CHH.SAMBHAJINAGAR– 431002

DEPARTMENT OF COMPUTER SCIENCE & ENGINEERING

CERTIFICATE
Certified that the seminar entitled “Cascading Style Sheets” is bonafide
work carried out by Deepak Laxman Badhekar, Roll no: CS2132 in
partial fulfilment for award of the Degree SY in Computer Science &
Engineering of Dr. Babasaheb Ambedkar Technological University,
Lonere, Raigad during academic year 2023-24 Part-I. .

Prof. P. D. Sathya Prof. Y.H.Bhosale

(Guide) (Head of the Department)

Dr. U. B. Shinde
(Principal)
 DECLARATION

I. Deepak Laxman Badhekar (CS2132) student of 3rd semester in B.Tech in Computer

Science & Engineering
CSMSS Chh. Shahu College of Engineering, Aurangabad, hereby declare that the seminar
entitled “Cascading Style Sheets” submitted to the Dr. Babasaheb Ambedkar Technological
University, Lonere, Raigad during academic year 2022-23, is a record of an original work
done by me. This seminar work is submitted in partial fulfilment of the requirement for the
award of the degree of Bachelor of Technology in Computer Science & Engineering.

The results embodied in this report have not been submitted to any University or
Institute for the award of any degree.

Date: Deepak Badhekar

Place:Chh.Sambhajinagar (CS2132)
 ACKNOWLEDGMENT

I, Deepak Laxman Badhekar (CS2132) take this opportunity to express the profound
gratitude and deep regards to our seminar guide Prof. P. D. Sathya for his exemplary
guidance, monitoring and constant encouragement throughout the course of this report.

I am thankful to Prof. Y. H. Bhosale, Head – Computer Science & Engineering

Department and Honourable Dr. U. B. Shinde, Principal- CSMSS Chh. Shahu College
of Engineering, Chh. Sambhajinagar for their continuous support and encouragement
throughout the academic.

I am also obliged to faculty members of Computer Science & Engineering Department,

CSMSS Chh. Shahu College of Engineering, Chh.Sambhajinagar, for their valuable
guidance and information provided by them in their respective fields.

Date: Deepak Badhekar

Place:Chh.Sambhajinagar (CS2132)

`
 INDEX

Sr. No. Content Page No.

1. Introduction 1

2. Brief Description 2-11

3. Advantages 12-13

4. Disadvantages 14-16

5. Applications / Future Scope 17-18

6. References 19-20
Introduction:-
 In this fast-paced digital era, the visual appeal and user experience of a website play a
crucial role in its success. Enter Cascading Style Sheets (CSS), a fundamental
technology that revolutionized the way we design and present web pages.

 CSS is a powerful and versatile style sheet language used to describe the layout,
presentation, and overall aesthetics of a web document written in HTML (Hypertext
Markup Language). It provides developers with the ability to control the colors, fonts,
spacing, and positioning of elements on a web page, ensuring a seamless and
captivating user interface.

 Before the advent of CSS, web designers had to embed style rules directly into HTML
tags, which made maintaining and updating websites cumbersome and time-
consuming. CSS introduced the concept of separation of concerns, allowing
developers to separate the content (HTML) from the presentation (CSS) and the
behavior (JavaScript), making the codebase more organized and maintainable.

 In this introduction to CSS, we'll explore the core concepts and syntax of CSS,
demonstrating how to apply styles to various HTML elements. We'll delve into
selectors, properties, values, and the cascade mechanism, which gives CSS its name.
By the end of this journey, you'll have a solid foundation in CSS, empowering you to
create stunning, responsive, and user-friendly websites.

 So, whether you're an aspiring web developer or an enthusiast eager to enhance your
web pages' visual appeal, let's embark on this adventure together and unlock the
potential of CSS to transform your web development skills!

1
Brief Description Cascading style Sheets :-
 Cascading Style Sheets (CSS) is a style sheet language used to control the presentation
and layout of HTML documents. It was introduced as a separate technology to
address the limitations of directly embedding style information within HTML
elements. CSS provides a way to define how elements on a web page should appear,
making it a fundamental tool for web designers and developers.

 The primary goal of CSS is to separate the content and structure of a web page
(handled by HTML) from its presentation and styling (handled by CSS). This
separation of concerns makes it easier to update and maintain websites, as changes to
the presentation can be made in a single CSS file without altering the underlying
HTML structure.

 CSS works on a rule-based system. Each rule consists of a selector, property, and
value. The selector specifies which HTML element or elements the rule applies to, the
property defines the aspect of the element to be styled, and the value sets the specific
style for that property. For example:

 css
 Copy code
 /* CSS rule */
 p{
 color: blue;
 font-size: 16px;
 }
 In this example, the CSS rule targets all <p> (paragraph) elements and sets their text
color to blue and font size to 16 pixels.

 The "Cascading" in CSS refers to the way styles are applied in a hierarchy, allowing
multiple style sources to influence an element's appearance. CSS rules can be defined
in different locations, such as inline within an HTML tag, in the <head> section of an
HTML document, or in external CSS files. When there are conflicting styles, the rules
closer to the element take precedence.

2
 CSS offers a wide range of properties and values, allowing developers to control
various aspects of elements, such as colors, fonts, margins, padding, positioning, and
animations. With this flexibility, designers can create responsive and visually
engaging websites across different devices and screen sizes.

 Furthermore, CSS has evolved over the years, and newer versions, such as CSS3,
introduced advanced features like media queries for responsive design, transitions,
transforms, and flexbox/grid layouts for sophisticated page structures.

 In modern web development, CSS is often used alongside HTML and JavaScript to
create dynamic, interactive, and visually stunning web applications. Its ability to
control the presentation layer makes CSS an essential tool in shaping the user
experience and aesthetics of websites, ensuring they are visually appealing, user-
friendly, and accessible to a wide range of audiences.

3
There are 3 types of CSS :
1. InlineCSS
2. Embedded CSS
3. External CSS

Inline CSS:

Inline CSS refers to the practice of adding CSS (Cascading Style Sheets) code directly
within an HTML element's "style" attribute. Instead of creating a separate CSS file, you
can define the styles for an individual HTML element directly within the element itself.
While inline CSS can be useful in certain situations, it is generally considered less
maintainable and less organized compared to using an external stylesheet.

Here's an example of how inline CSS is applied to an HTML element

html

 Copy code
 <!DOCTYPE html>
 <html>
 <head>
 <title>Inline CSS Example</title>
 </head>
 <body>
 <h1 style="color: blue; font-size: 24px;">This is a header with inline CSS</h1>
 <p style="color: green; font-size: 16px;">This is a paragraph with inline CSS.</p>
 </body>
 </html>
 In this example, the styles (color and font-size) are directly defined within the
"style" attribute of the "h1" and "p" elements.

 While inline CSS can be handy for quickly applying styles to specific elements, it's
generally recommended to use an external stylesheet for larger projects. External
stylesheets offer better maintainability, easier organization, and the ability to apply
styles consistently across multiple pages within a website. They also help separate
content from presentation, making the HTML code cleaner and easier to read.

4
Embedded CSS:

Embedded CSS, also known as internal CSS, involves placing CSS code directly within
the HTML file's "head" section. Unlike inline CSS, which is applied directly to individual
HTML elements, embedded CSS applies styles to multiple elements within the same
HTML document.

To use embedded CSS, you need to include the <style> element within the HTML "head"
section. Here's an example:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>Embedded CSS Example</title>

<style>

h1 {

color: blue;

font-size: 24px;

p{

color: green;

font-size: 16px;

5
 }

</style>

</head>

<body>

<h1>This is a header with embedded CSS</h1>

<p>This is a paragraph with embedded CSS.</p>

</body>

</html>

In this example, the CSS styles for the "h1" and "p" elements are defined within the
<style> element in the "head" section. The styles apply to all "h1" and "p" elements
within the document.

Embedded CSS offers better organization and maintainability compared to inline CSS
because you can centralize the styles for multiple elements in one place. However, it still
doesn't provide the same level of modularity and separation of concerns as external
stylesheets do.

For larger projects, it's often recommended to use external CSS files by linking them
using the <link> element in the HTML "head" section. This allows you to keep the styles
separate from the HTML content, making it easier to manage and update the styles across
multiple pages.

6
External CSS:
External CSS involves creating a separate CSS file containing all the styles for a website
or web application and linking that file to the HTML document using the <link> element.
This approach provides better modularity, maintainability, and organization of styles,
making it the preferred method for most web development projects.

Here's how you use external CSS in your HTML document:

Create a new CSS file with a .css extension. For example, styles.css.

Open the CSS file and define your styles. For instance:

css

Copy code

/* styles.css */

h1 {

color: blue;

font-size: 24px;

p{

color: green;

font-size: 16px;

7
In your HTML document's <head> section, add a <link> element to link the CSS file:

html

Copy code

<!DOCTYPE html>

<html>

<head>

<title>External CSS Example</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>This is a header with external CSS</h1>

<p>This is a paragraph with external CSS.</p>

</body>

</html>

In this example, the <link> element tells the browser to fetch the "styles.css" file and
apply its styles to the HTML elements within the document. The styles defined in the
external CSS file will be applied to all "h1" and "p" elements, just like the embedded CSS
example.

Using external CSS has several advantages:

Modularity and Reusability: You can use the same external CSS file across multiple
HTML documents, reducing duplication of code and making maintenance easier.

8
Easy Management: Styles are centralized in one file, making it simpler to modify and
update styles throughout the website.

Faster Loading: Once the CSS file is loaded, it can be cached by the browser, resulting in
faster loading times for subsequent pages.

Separation of Concerns: It allows you to keep the content (HTML) separate from the
presentation (CSS), following the best practices of web development.

For larger projects and professional web development, external CSS is the recommended
approach to manage styles effectively and efficiently.

9
 How To Create CSS file:

Creating a CSS file is straightforward. Follow these steps:

Open a Text Editor: You can use any text editor on your computer to create a CSS file.
Common text editors include Notepad (Windows), TextEdit (macOS), Visual Studio
Code, Sublime Text, Atom, etc. Choose the one you feel comfortable with.

Create a New File: Open your text editor and create a new, empty file.

Save the File: When saving the file, make sure to give it a name and use the .css
extension. For example, you can save it as styles.css. The .css extension tells the
computer that this is a CSS file.

Write Your CSS Styles: Now, you can start writing your CSS styles within the CSS file.
For example:

css

Copy code

/* styles.css */

body {

font-family: Arial, sans-

serif; background-color:

#f0f0f0;

}
10
h1 {

color: blue;

font-size: 24px;

p{

color: green;

font-size: 16px;

Save the Changes: After writing your CSS styles, save the file to ensure all your changes
are saved.

That's it! You have now created a CSS file with the name "styles.css" that contains some
basic CSS styles. Remember that you can add more styles and rules to this file as needed.
To use this CSS file in your HTML documents, make sure to link it using the <link>
element in the HTML <head> section, as shown in the previous examples.

11
 Advantages:-
 CSS (Cascading Style Sheets) offers several advantages in web development, making
it an essential tool for creating visually appealing and efficient websites:

 Separation of Concerns: One of the key advantages of CSS is its ability to separate the
presentation from the content. This makes the codebase more organized and
maintainable, as changes to the styling can be made in a single CSS file without
altering the HTML structure.

 Consistency and Reusability: CSS allows you to define styles once and apply them to
multiple elements throughout the website. This promotes consistency in the design
and reduces redundant code, leading to more efficient development and easier
maintenance.

 Efficient Bandwidth Usage: Since CSS files are cached by the browser, once a user
visits a website, subsequent pages can load faster, as the styles are already stored
locally. This leads to reduced server load and faster overall page rendering, resulting
in a better user experience.Device Compatibility and Responsive Design: CSS
enables the creation of responsive websites that adapt to different screen sizes and
devices. Media queries and flexible layouts (e.g., flexbox and grid) allow developers
to design websites that look great on desktops, tablets, and smartphones without the
need for separate codebases.

 Accessibility and SEO: By using CSS to structure the content and presentation, web
developers can create more accessible websites. Properly structured HTML and CSS
help screen readers understand the content and improve the website's SEO (Search
Engine Optimization) rankings, leading to increased discoverability.

 Improved User Experience: CSS empowers designers to create visually appealing

interfaces, enhancing the user experience and making the website more engaging and

12
 memorable. A well-designed and aesthetically pleasing website can leave a positive
impression on visitors, leading to increased user retention and engagement.

 Faster Development: CSS streamlines the web development process by providing a

wide range of pre-built styles and frameworks. Developers can use CSS libraries like
Bootstrap or Materialize CSS to expedite the design process and focus on other
aspects of web development.

 Browser Compatibility: CSS is supported by all modern web browsers, ensuring

consistent rendering across different platforms. Although some browser-specific
quirks may exist, web developers can address them with targeted CSS rules or CSS
prefixes for compatibility.

 Animation and Interactivity: CSS3 introduced animation and transition capabilities,

allowing developers to create subtle animations and interactive elements without
relying on JavaScript. This adds a level of sophistication and interactivity to websites
without the need for external plugins or scripts.

 Maintainability and Scalability: CSS promotes a modular approach to web design. By

organizing styles into separate CSS files or modules, developers can easily manage
and extend the codebase as the website grows and evolves over time.

 Overall, CSS plays a vital role in modern web development, providing a solid
foundation for creating visually appealing, responsive, and user-friendly websites that
deliver a seamless and enjoyable browsing experience to users.

13
 Disadvantages:-
 While CSS is a powerful and essential tool for web development, it also has some
disadvantages and challenges:

 Complexity: As websites and applications become more complex, managing CSS

styles can become challenging. Large projects may require extensive CSS rules, and
without proper organization and documentation, the codebase can become difficult to
maintain and prone to conflicts.

 Browser Inconsistencies: Despite efforts to standardize CSS, different web browsers

may interpret CSS rules differently. This can lead to minor layout and rendering
inconsistencies across browsers, requiring developers to write browser-specific CSS
rules or workarounds.

 Performance Impact: CSS styles can impact page loading times, especially if the CSS
files are large or not optimized. The browser needs to parse and apply CSS rules,
which can slow down page rendering, especially on low-end devices or slow internet
connections.

14
 Specificity and Cascade Issues: The "cascading" nature of CSS can sometimes lead to
specificity conflicts, where styles from different CSS rules clash. Resolving such
issues can be challenging, and developers need to carefully manage the order and
specificity of their CSS rules.

 Code Duplication: Without careful planning and organization, developers might end
up duplicating CSS code across different files or components, leading to unnecessary
bloat and making it harder to maintain consistency.

 Learning Curve: CSS can be intimidating for beginners due to its syntax, cascading
nature, and various layout techniques. Learning CSS effectively and understanding
how to apply the right styles can take time and practice.

 Lack of Layout Control: While CSS offers a range of layout tools like flexbox and
grid, some complex layouts may still require additional HTML elements or even
JavaScript to achieve the desired design, adding complexity to the codebase.

15
 Lack of Variables: CSS lacks built-in support for variables (as of CSS3), making it
challenging to manage and reuse color values, font sizes, and other commonly used
styles across the entire project.

 Limited Dynamic Capabilities: While CSS3 introduced animations and transitions,

more complex interactivity and dynamic behavior often require JavaScript. CSS alone
cannot handle complex interactions like form validation, conditional rendering, or
dynamic content loading.

 Cross-Browser Testing: Ensuring consistent appearance across different browsers

requires thorough cross-browser testing, which can be time-consuming, especially
when targeting older browsers with limited CSS support.

 Despite these disadvantages, CSS remains a fundamental technology in web

development, and many of its limitations are often addressed through best practices,
tooling, and the use of CSS preprocessors (e.g., Sass or Less) to enhance
maintainability and organization. By staying informed about the latest developments
and best practices, web developers can effectively utilize CSS to create impressive
and user-friendly websites.

16
 Future Scope :-
 The future scope of CSS in web development remains promising and exciting as
technology continues to evolve. Several trends and developments indicate the
continued significance and potential growth of CSS in the coming years:

 CSS Evolution: CSS is an evolving standard, and new features and capabilities are
regularly being introduced. The CSS Working Group, responsible for defining the
CSS specification, is actively working on proposals and improvements. This means
developers can expect more powerful and advanced CSS features that will simplify
complex layouts, animations, and interactions.

 CSS-in-JS: The concept of CSS-in-JS has gained popularity in recent years, where
CSS styles are written and managed using JavaScript libraries. This approach offers
benefits like scoped styles, dynamic theming, and improved performance. As this
trend continues to evolve, it could change the way developers structure and manage
styles in web applications.

 Web Components: Web Components, a set of web platform APIs, allow developers to
create reusable custom elements with encapsulated styles and behavior. CSS plays a
crucial role in defining the visual appearance of these components. As Web
Components gain wider adoption, CSS will play an essential role in their success.

 CSS Grid and Flexbox: CSS Grid and Flexbox are powerful layout modules
introduced in CSS3, allowing developers to create complex and responsive layouts
with ease. As browsers continue to improve support for these layout methods, more
developers will embrace them for building modern and flexible user interfaces.

 Responsive Web Design: With the increasing use of mobile devices, responsive web
design has become a standard practice. CSS plays a critical role in making websites

17
 responsive and adaptive to various screen sizes and orientations. As the variety of
devices and form factors expands, the demand for responsive design using CSS will
only grow.

 Performance Optimization: As web performance becomes a critical factor in user

experience and search engine rankings, CSS optimization will continue to gain
importance. Developers will focus on delivering efficient CSS, utilizing techniques
like minification, critical path rendering, and lazy loading of stylesheets to reduce
page load times.

 Dark Mode and Theming: Dark mode has become a popular user preference, and CSS
plays a central role in implementing dark mode styles on websites and applications.
Additionally, theming support using CSS variables (custom properties) allows users
to customize the appearance of websites, offering a more personalized experience.

 CSS Preprocessors and Postprocessors: CSS preprocessors like Sass and Less have
been widely adopted, enhancing the development workflow by offering variables,
functions, and mixins. Postprocessors, such as Autoprefixer, automatically add
browser-specific prefixes to CSS properties. These tools will continue to play a
significant role in streamlining CSS development and improving cross-browser
compatibility.

 Accessibility: Web accessibility is gaining increased attention, and CSS plays a vital
role in creating inclusive and accessible designs. Developers will focus on using
semantic HTML and writing CSS with accessibility in mind, ensuring that websites
are usable by people with disabilities.

 Overall, the future scope of CSS in web development is promising, as CSS continues
to evolve, enabling developers to create more sophisticated, interactive, and visually
appealing web applications. By staying updated with the latest advancements and best
practices in CSS, web developers can capitalize on these opportunities and build
remarkable web experiences for users.

18
 References:-
Mozilla Developer Network (MDN) - CSS Documentation:

URL: https://developer.mozilla.org/en-US/docs/Web/CSS

W3Schools - CSS Tutorial:

URL: https://www.w3schools.com/css/

CSS Tricks:

URL: https://css-tricks.com/

Smashing Magazine - CSS Category:

URL: https://www.smashingmagazine.com/category/css/

CSS Weekly Newsletter:

URL: https://css-weekly.com/

A List Apart - CSS Category:

URL: https://alistapart.com/topic/css/

Codrops - CSS Category:

URL: https://tympanus.net/codrops/category/tutorials/css/

CSS Zen Garden:

URL: http://www.csszengarden.com/

19
GitHub - Awesome CSS:

URL: https://github.com/sotayamashita/awesome-css

These resources offer comprehensive guides, tutorials, examples, and articles related to CSS and
web development. They are trusted sources within the web development community and can help
you expand your knowledge and stay up-to-date with the latest trends and best practices in CSS.

20