Scribd
Upload
28 views13 pages

Unit 3 WD

The document provides an overview of CSS (Cascading Style Sheets), explaining its purpose in styling HTML elements and its advantages such as faster page speed and better user experience. It details the syntax of CSS, the different methods of adding CSS to a webpage (external, internal, and inline), and categorizes CSS selectors. Additionally, it introduces XML (Extensible Markup Language), highlighting its structure and the requirements for a valid XML document.

Uploaded by

Sandhiya Saravanan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views13 pages

Unit 3 WD

The document provides an overview of CSS (Cascading Style Sheets), explaining its purpose in styling HTML elements and its advantages such as faster page speed and better user experience. It details the syntax of CSS, the different methods of adding CSS to a webpage (external, internal, and inline), and categorizes CSS selectors. Additionally, it introduces XML (Extensible Markup Language), highlighting its structure and the requirements for a valid XML document.

Uploaded by

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

UNIT 2

UNIT 3

What is CSS?

• CSS stands for Cascading style sheets.


• It describes to the user how to display HTML elements on the screen in a
proper format.
• CSS is the language that is used to style HTML documents.
• In simple words, cascading style sheets are a language used to simplify the
process of making a webpage.
• CSS is used to handle some parts of the webpage. With the help of CSS, we
can control the colour of text and style of fonts.

Advantages of CSS

1. Faster page speed


2. Better user experience
3. Quicker Development time
4. Easy Formatting changes

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

CSS Syntax

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.

Why We Use CSS?


As we all know, CSS is a powerful style sheet language used to control
the HTML document to improve the webpage design.
o CSS provides efficiency in webpage design: It also provides
updates so our webpage works appropriately. With the help of
CSS, we can create and apply those rules within the website. If we
create a webpage design separately, we can make changes in our
style sheet, and it will affect all the style sheets.
o CSS provides faster page download: CSS helps with faster page
download because when we download a page, we get the cache
that helps to load a page, but with the help of CSS, we can lead to
load a lighter page which helps to improve the performance.

ADDING CSS IN web page


When a browser reads a style sheet, it will format the HTML document
according to the information in the style sheet.
There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
External CSS
With an external style sheet, you can change the look of an entire
website by changing just one file!
Each HTML page must include a reference to the external style sheet file
inside the <link> element, inside the head section.
Example
External styles are defined within the <link> element, inside the <head>
section of an HTML page:

Example:index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
EXAMPLE: mystyle.css
An external style sheet can be written in any text editor, and must be
saved with a .css extension.
The external .css file should not contain any HTML tags.
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

OUTPUT:

Internal CSS
An internal style sheet may be used if one single HTML page has a
unique style.
The internal style is defined inside the <style> element, inside the head
section.
Example
Internal styles are defined within the <style> element, inside the
<head> section of an HTML page:<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
Example
Inline styles are defined within the "style" attribute of the relevant element:
<!DOCTYPE html>
<head>
<title>website</title>
</head>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

GROUPING STYLES

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want
to style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or
attribute value)
This page will explain the most basic CSS selectors.

The CSS element Selector


The element selector selects HTML elements based on the element
name.
Example
Here, all <p> elements on the page will be center-aligned, with a red
text color:
p{
text-align: center;
color: red;
}

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.

Example
The CSS rule below will be applied to the HTML element with
id="para1":
#para1 {
text-align: center;
color: red;
}
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.
Example
In this example all HTML elements with class="center" will be red and center-
aligned:
.center {
text-align: center;
color: red;
}
XML

XML (Extensible Markup Language) is a markup language similar to HTML, but


without predefined tags to use. Instead, you define your own tags designed
specifically for your needs. This is a powerful way to store data in a format that can
be stored, searched, and shared.

Structure of an XML document


The whole structure of XML and XML-based languages is built on tags.

XML declaration

XML - declaration is not a tag. It is used for the transmission of the meta-data of a
document.

<?xml version="1.0" encoding="UTF-8"?>

Comments
<!-- Comment -->

"Correct" XML (valid and well-formed)


Correct design rules

For an XML document to be correct, the following conditions must be fulfilled:

●​ Document must be well-formed.


●​ Document must conform to all XML syntax rules.
●​ Document must conform to semantic rules, which are usually set in an XML
schema or a DTD (Document Type Definition).
Example

<?xml version="1.0" encoding="UTF-8"?>


<message>
<warning>
Hello World
<!--missing </warning> -->
</message>

You might also like