Scribd
Upload
6 views

Css Introduction

CSS, or Cascading Style Sheets, is a style sheet language that describes the presentation of HTML or XML documents, allowing developers to separate content from presentation for efficient web design. It can be implemented in three ways: inline styles, internal style sheets, and external style sheets, with external styles being the most efficient for multi-page websites. The term 'cascading' refers to the priority order in which styles are applied, with inline styles taking precedence over internal and external styles.

Uploaded by

Namulindwa Angella
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
6 views

Css Introduction

CSS, or Cascading Style Sheets, is a style sheet language that describes the presentation of HTML or XML documents, allowing developers to separate content from presentation for efficient web design. It can be implemented in three ways: inline styles, internal style sheets, and external style sheets, with external styles being the most efficient for multi-page websites. The term 'cascading' refers to the priority order in which styles are applied, with inline styles taking precedence over internal and external styles.

Uploaded by

Namulindwa Angella
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 11

INTRODUCTION TO

CASCADING STYLE
SHEETS (CSS)
What is CSS?
 CSS stands for Cascading Style Sheets.
 It is a style sheet language used to describe the presentation
of a document written in HTML or XML.
 CSS defines how HTML elements should be displayed on a
web page, including layout, colors, fonts, and more…
Why CSS?
 CSS separates content from presentation, allowing
developers to control the appearance of multiple web pages
from a single style sheet.
 It enhances web development efficiency by enabling
consistent styling across a website and simplifying updates
and maintenance.
 CSS facilitates the creation of visually appealing, accessible,
and responsive web designs
Difference between HTML and CSS
HTML and CSS are both essential web development technologies
but serve different purposes. Here are the key differences:
1. Purpose:
HTML: HTML is used to structure the content of a webpage. It
defines the elements on the page, such as headings, paragraphs,
images, links, and forms.
CSS: CSS is used to control the visual appearance and style of the
HTML content. It defines how the HTML elements should be
displayed in terms of layout, colors, fonts, spacing, and more.

2. Functionality:
HTML: HTML provides the foundation and structure of the webpage
by using tags (e.g., <h1>, <p>, <div>, <a>). It specifies what
content will appear on the webpage.
CSS: CSS provides styling rules to enhance the presentation of
HTML content. For example, you can use CSS to change the color,
size, position, or alignment of text and images.
Difference between HTML and CSS
3. Syntax:
HTML: HTML uses tag-based syntax. Each element is
represented by an opening and closing tag, such as <p> for
paragraphs and <img> for images.
CSS: CSS uses a rule-based syntax. Each rule consists of a
selector (which targets an HTML element) and declarations
(which apply styles to that element).
Example: h1 { color: blue; font-size: 24px; }
4. Interdependence:
HTML: Can exist without CSS, though the webpage would
be unstyled and appear very basic.
CSS: Relies on HTML to apply styles. CSS cannot work
alone; it needs HTML elements to style.
Three Ways to Use CSS
We can add CSS code in any combination of three different
ways:
1. Inline Style - CSS code is placed directly into an HTML
element within the <body> section of a web page.
2. Internal Style Sheet - CSS code is placed into a separate,
dedicated area within the <head> section of a web page.
3. External Style Sheet - CSS code is placed into a separate
computer file and then linked to a web page.
Inline Style
 CSS code is placed directly into an HTML element within the <body> section of
a web page.
 To define an inline CSS style, we simply add the style attribute to an HTML
element with the CSS declaration as the attribute value: The syntax is:
<tagname style = "property:value;">
The property is a CSS property. The value is a CSS value.
<h2 style="color:red;">CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>

An inline style declaration is highly


specific and formats just one
element on the page. No other
elements, including other <h2>
elements on the page, will be
affected by this CSS style.

Since inline styles have limited scope and do not separate content from presentation,
their use is generally discouraged.
Internal Style Sheet
To use an internal CSS style sheet, we add a <style> section within the
<head> of the page. All our CSS declarations go within this section:
<head>
...
<style type="text/css">
h2 {color:red;}
</style>
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>

Styles declared in the internal style sheet affect all matching elements on the
page. In this example, all <h2> page elements are displayed in the color red.

Since formatting declarations are entirely in the <head> section, away from the actual page
content, internal CSS style sheets do a much better job than inline styles at separating
content from presentation.
External Style Sheet
To use an external CSS style sheet, we create a new file (with a .css
extension) and write our style declarations into this file. We then add a
<link> element into our HTML file, right after the opening <head> tag:
style.css (separate file):
h2 {color:red;}

example.html file:
<head>
<link rel="stylesheet" type="text/css"
href="style.css" />
...
</head>
<body>
<h2>CAUTION: Icy Road Conditions</h2>
<h2>Please Slow Down!</h2>
</body>

The <link> element instructs the browser to load the external file specified by
the href attribute and to apply the CSS style declarations contained there.
Internal vs. External Style Sheets
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.
What Does "Cascading" Mean?
We use the term "cascading" because there is an established order of
priority to resolve formatting conflicts:
1. Inline style (highest priority)
2. Internal style sheet (second priority)
3. External style sheet (third priority)
4. Web browser default (only if not defined elsewhere)
For each HTML element, the browser will see which styles are defined inline
and from internal and external style sheets. For any conflicts detected, it will
use this priority system to determine which format to display on the page.

In the prior example, the heading text would display in the color specified by
the inline style, which outranks all the others.

If multiple, conflicting styles are defined in the same style sheet, only the final one will
be applied. Be careful, as this is another common mistake committed by beginners.

You might also like