Cascading Style Sheet

Alishba noor 2246 Web programming

0
Contents
What Is CSS and How Does It Work? ............................................................................................................ 2
What Is CSS?.................................................................................................................................................. 2
How Do You Style HTML Code?................................................................................................................ 3
HTML Template......................................................................................................................................... 3
Inline Styles in HTML ................................................................................................................................ 5
Internal Styles in HTML ............................................................................................................................ 6
External Stylesheets in HTML................................................................................................................... 9
Advantages of CSS: ...................................................................................................................................... 11
Disadvantages of CSS: ................................................................................................................................. 12

1
What Is CSS and How Does It Work?
CSS was developed by W3C (World Wide Web Consortium) in
1996 for a rather simple reason. HTML element was not
designed to have tags that would help format the page. You
were only supposed to write the markup for the web page.
Tags like <font> were introduced in HTML version 3.2, and it
caused quite a lot of trouble for web developers. Due to the fact
that web pages have different fonts, colored backgrounds, and
multiple styles, it was a long, painful, and expensive process to
rewrite the code. Thus, CSS was created by W3C to solve this
problem.
CSS is not technically a necessity, but you probably wouldn’t
want to look at a web page that features only HTML elements
as it would look completely bare-boned.

What Is CSS?
CSS stands for Cascading Style Sheets language and is used to
stylize elements written in a markup language such as HTML. It
separates the content from the visual representation of the site.
The relation between HTML and CSS is strongly tied together
since HTML is the very foundation of a site and CSS is all of the
aesthetics of an entire website.

2
How Do You Style HTML Code?
HTML stands for hypertext markup language. It is a text-based
document designed to be displayed in a browser. To make that
texts and other embedded elements contained in the HTML
look good, you need to add CSS, or Cascading Style Sheets.

There are 3 different ways you can style your HTML:

• inline styles,

• internal styles (also known as embedded CSS), and

• external stylesheets.

In this tutorial, we'll explore these three styling methods in as

much depth as possible. We'll also look at their pros and cons
so you can start using them in your coding projects and choose
which one works best for you.

HTML Template
To make things easier in this tutorial, I have prepared a simple
HTML template that we'll style:

<article>
<p class="paragraph-one">
freeCodeCamp is one of the best platforms to learn how to
code
</p>
<p class="paragraph-two">
Learning to code is free on freeCodeCamp, that's why they
call it

3
 freeCodeCamp
</p>
<p class="paragraph-three">
freeCodeCamp generates money through donations inorder to
pay employees
and maintain servers.
</p>
<p id="paragraph-four">
If you're generous enough, consider joining others who
have been
donating to freeCodeCamp
</p>
<p class="paragraph-five">
At freeCodeCamp, it's not all about typing on a code
editor alone,
there's a forum like StackOverflow, where you can ask
questions about
your coding problems and get answers from campers alike.
</p>
</article>

4
Inline Styles in HTML
When you use inline styles, you add them directly to the HTML
tags with the style attribute.

For example, in our HTML code, we can assign a color to any of

the paragraphs by writing the CSS right inside the opening tag.

It is also typical to remove the default underline and color

assigned to links, so we can do that inside the opening <a> tag
too.

<article>
<p
class="paragraph-one"
style="color: darkmagenta; font-size: 2rem; text-align:
center"
>
<a href="freecodecamp.org" style="text-decoration: none;
color: crimson"
>freeCodeCamp</a
>
is one of the best platforms to learn how to code
</p>
<p class="paragraph-two">
Learning to code is free on freeCodeCamp, that's why they
call it
freeCodeCamp
</p>
<p class="paragraph-three">
freeCodeCamp generates money through donations inorder to
pay employees
and maintain servers.
</p>

5
 <p id="paragraph-four">
If you're generous enough, consider joining others who have
been
donating to freeCodeCamp
</p>
<p class="paragraph-five">
At freeCodeCamp, it's not all about typing on a code editor
alone,
there's a forum like StackOverflow, where you can ask
questions about
your coding problems and get answers from campers alike.
</p>
</article>
Our web page now looks like the screenshot below:

Internal Styles in HTML

When you use internal styling, you embed the styles right inside
the HTML file within the style tag. You usually place them in the
6
head, but it works anywhere, even outside of the opening and
closing HTML tags (but don't do that as it's a bad practice).

We can apply some internal styles to our HTML code like this:

<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

.paragraph-two {
font-size: 1.5rem;
}

.paragraph-one a {
text-decoration: none;
color: crimson;
font-size: 2rem;
font-weight: bolder;
}
</style>
</head>
<body>
<article>
<p class="paragraph-one">
<a href="freecodecamp.org">freeCodeCamp</a>
is one of the best platforms to learn how to code

7
 </p>
<p class="paragraph-two">
Learning to code is free on freeCodeCamp, that's why they
call it
freeCodeCamp
</p>
<p class="paragraph-three">
freeCodeCamp generates money through donations inorder to
pay employees
and maintain servers.
</p>
<p id="paragraph-four">
If you're generous enough, consider joining others who have
been
donating to freeCodeCamp
</p>
<p class="paragraph-five">
At freeCodeCamp, it's not all about typing on a code editor
alone,
there's a forum like StackOverflow, where you can ask
questions about
your coding problems and get answers from campers alike.
</p>

8
Our web page now looks like this:

External Stylesheets in HTML

This is considered the best way to style your HTML code.
External stylesheets are totally separate from the HTML and
you place them in a CSS file (with the .css extension).

To use external stylesheets in your HTML, you link them within

the head with the link tag.

The basic syntax of the link tag looks like this:

<link rel="stylesheet" href="path-to-css-file">

To style our HTML code, we need to create a CSS file and link it.
When linked, our full HTML file now looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

9
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>How to Style HTML</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<article>
<p class="paragraph-one">
<a href="freecodecamp.org">freeCodeCamp</a>
is one of the best platforms to learn how to code
</p>
<p class="paragraph-two">
Learning to code is free on freeCodeCamp, that's why
they call it
freeCodeCamp
</p>
<p class="paragraph-three">
freeCodeCamp generates money through donations inorder
to pay employees
and maintain servers.
</p>
<p id="paragraph-four">
If you're generous enough, consider joining others who
have been
donating to freeCodeCamp
</p>
<p class="paragraph-five">
At freeCodeCamp, it's not all about typing on a code
editor alone,
there's a forum like StackOverflow, where you can ask
questions about
your coding problems and get answers from campers alike.
</p>
</article>
</body>
10
</html>
Our web page now looks like this:

Advantages of CSS:
• CSS plays an important role, by using CSS you simply got to
specify a repeated style for element once & use it multiple
times as because CSS will automatically apply the required
styles.
• The main advantage of CSS is that style is applied
consistently across variety of sites. One instruction can
control several areas which is advantageous.
• Web designers needs to use few lines of programming for
every page improving site speed.
• Cascading sheet not only simplifies website development,
but also simplifies the maintenance as a change of one line
of code affects the whole web site and maintenance time.
• It is less complex therefore the effort are significantly
reduced.
• It helps to form spontaneous and consistent changes.
• CSS changes are device friendly. With people employing a
batch of various range of smart devices to access websites
11
 over the web, there’s a requirement for responsive web
design.
• It has the power for re-positioning. It helps us to
determine the changes within the position of web
elements who are there on the page.
• These bandwidth savings are substantial figures of
insignificant tags that are indistinct from a mess of pages.
• Easy for the user to customize the online page
• It reduces the file transfer size.

Disadvantages of CSS:
• CSS, CSS 1 up to CSS3, result in creating of confusion
among web browsers.
• With CSS, what works with one browser might not always
work with another. The web developers need to test for
compatibility, running the program across multiple
browsers.
• There exists a scarcity of security.
• After making the changes we need to confirm the
compatibility if they appear. The similar change affects on
all the browsers.
• The programming language world is complicated for non-
developers and beginners. Different levels of CSS i.e. CSS,
CSS 2, CSS 3 are often quite confusing.
• Browser compatibility (some styles sheets are supported
and some are not).

12
 • CSS works differently on different browsers. IE and Opera
supports CSS as different logic.
• There might be cross-browser issues while using CSS.
• There are multiple levels which creates confusion for non-
developers and beginners.

13