Scribd
Upload
74 views

Css - Cascading Style Sheets: An Inline CSS Uses The Style Attribute of An HTML Element

CSS (Cascading Style Sheets) is used to describe the presentation of HTML documents, including things like colors, layout, fonts, etc. There are three types of CSS: inline CSS uses the style attribute within HTML tags, internal CSS defines rules in the <head> section, and external CSS links to a separate .css file. CSS rules have an order of precedence from highest to lowest of inline, internal, then external. Selectors like IDs (#) and classes (.) allow targeting specific elements by unique identifiers or common attributes.

Uploaded by

minecrafthometours
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
74 views

Css - Cascading Style Sheets: An Inline CSS Uses The Style Attribute of An HTML Element

CSS (Cascading Style Sheets) is used to describe the presentation of HTML documents, including things like colors, layout, fonts, etc. There are three types of CSS: inline CSS uses the style attribute within HTML tags, internal CSS defines rules in the <head> section, and external CSS links to a separate .css file. CSS rules have an order of precedence from highest to lowest of inline, internal, then external. Selectors like IDs (#) and classes (.) allow targeting specific elements by unique identifiers or common attributes.

Uploaded by

minecrafthometours
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

PART 2

CSS – CASCADING STYLE SHEETS


CSS stands for Cascading Style Sheets. 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.CSS is used along with HTML and JavaScript in most websites to create
user interfaces for web applications and user interfaces for many mobile applications.

There are three types of CSS which are given below :


• Inline CSS
• Internal or Embedded CSS
• External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with
element is known as inline CSS. This kind of style is specified within an HTML tag using
the style attribute.An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.

Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML file in the head section i.e the
CSS is embedded within the HTML file.

External CSS: External CSS contains separate CSS file which contains only style property
with the help of tag attributes (For example class, id, heading, … etc). CSS property written
in a separate file with .css extension and should be linked to the HTML document using link
tag. This means that for each element, style can be set only once and that will be applied
across web pages.The file which contains CSS property must be save with .css extension.
For Ex: styles.css

• link tag is used to link the external style sheet with the html webpage.
• href attribute is used to specify the location of the external style sheet file.

Properties of CSS:
Inline CSS has the highest priority, then comes Internal/Embedded followed by External
CSS which has the least priority. Multiple style sheets can be defined on one page. If for an
HTML tag, styles are defined in multiple style sheets then the below order will be followed.
• As Inline has the highest priority, any styles that are defined in the internal and
external style sheets are overridden by Inline styles.
• Internal or Embedded stands second in the priority list and overrides the styles in the
external style sheet.
• External style sheets have the least priority. If there are no styles defined either in
inline or internal style sheet then external style sheet rules are applied for the HTML
tags.
CSS Syntax
For Eg;

• 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.
INLINE CSS

AIM : To create a web page with a <h1> and <p> element, which shows a Blue Heading
and a red paragraph using Inline CSS.

PROGRAM

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>

OUTPUT

RESULT

The program hasbeen executed succesfully and output obtained.


INTERNAL OR EMBEDDED CSS
AIM : To create a web page that sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will
be displayed with a "powderblue" background color,using Internal CSS.

PROGRAM

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT

RESULT

The program hasbeen executed succesfully and output obtained.


EXTERNAL STYLE SHEET
AIM : To create an External style sheet with background color of the webpage will be
powderblue and any h1 headings will appear in blue colour, and paragraph with red colour.

PROGRAM

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

"styles.css":

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

OUTPUT

RESULT

The program hasbeen executed succesfully and output obtained.


Using element IDs with CSS
Element IDs
When writing HTML it is possible to give an element its own unique identifier. If a webpage had
three different paragraphs, the code within the body could look like this:
<body>
<p>All text for paragraph 1 would go here</p>
<p>All text for paragraph 2 would go here</p>
<p>All text for paragraph 3 would go here</p>
</body>
These are three different paragraphs, each containing some random text. It is possible to give a
paragraph a unique ID.
Here is the updated version of the HTML code.
<body>
<p id="introduction">All text for paragraph 1 would gohere</p>
<p>All text for paragraph 2 would go here</p>
<p>All text for paragraph 3 would go here</p>
</body>
The first paragraph now has an id assigned, the id is "introduction". It would be possible to create a
CSS rule that will apply to any HTML element called "introduction".
For example:
#introduction { color: black; font-size: 16px; font-family:
verdana;}
The # symbol is used in CSS to let the browser know that the selector will apply a style to any
element with the id "introduction".
Using classes with CSS
The use of classes is also very common when creating webpages. Classes operate in a similar way
to element IDs but rather than relating to the id of an individual element, styles for a class can be
applied across a range of elements.
In the last example, the first paragraph was assigned a unique id and the related style was applied
using the CSS # selector.
In this example, paragraphs two and three make use of a class known as mainbody. This class style
can be defined as follows:

.mainbody { color: red;


font-size: 16px;
font-family: Arial;}

The symbol used for class selectors is . and comes before the name of the class. In the
example, lines 2 and 3 now make use of the mainbody class.

<body>
<p id="introduction">All text for paragraph 1 would go
here</p>
<p class="mainbody">All text for paragraph 2 would go
here</p>
<p class="mainbody"=>All text for paragraph 3 would go
here</p>
</body>

Paragraph one would display on screen in the style defined for the introduction id and
paragraphs two and three would appear on screen with the style defined for the mainbody
class.

You might also like