Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
2 views

HTML & CSS

The document explains the use of HTML and CSS for styling web pages, detailing the structure of style sheets and the different methods for applying styles: inline, internal, and external styles. It provides examples of each method and introduces the @import rule for linking stylesheets. Overall, it emphasizes the flexibility and power of CSS in web design.

Uploaded by

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

HTML & CSS

The document explains the use of HTML and CSS for styling web pages, detailing the structure of style sheets and the different methods for applying styles: inline, internal, and external styles. It provides examples of each method and introduces the @import rule for linking stylesheets. Overall, it emphasizes the flexibility and power of CSS in web design.

Uploaded by

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

HTML & CSS(Cascading Style Sheets):

Style sheets represent the World Wide Web consortium‟s effort to improve on the tag
and attribute based style of formatting. Style sheets provide a way of customizing
whole pages all at once and in much richer detail than the simple use of tags and
attributes.

The format of style sheet will be:

<style type=”text/css”>

selector{property:value;property:value;}

selector{property:value;property:value;}

</style>

Every line in <style> tag is called as a „Rule‟ and a style rule has two parts:

a. Selector.b. Set of declarations.

A selector is used to create a link between the rule and the HTML tag.

The declaration has two parts again i.e. Property and Value.

A property specifies additional information and value specifies property value.

Example:

<style type=”text/css”>

body {background-color: #d0e4fe;}

h1 {

color: orange;

text-align: center;

p{

font-family: "Times New Roman";

font-size: 20px;

</style>
If we add above code in the <head> element of web page , entire web page will be
displayed in various styles given in style element.

Style sheets are implemented with cascading style sheets specification. Conventionally
styles are cascaded i.e., we don‟t have to use just a single set of styles inside a
document, but we can import as many styles as we like. There are three mechanisms
by which we can apply styles to our HTML documents:

1. Inline Style sheets.

2. Internal Style sheets.

3. External Style sheets.

Inline Style sheet:-

Inline CSS is a method that applies CSS styling directly to HTML elements using the
‘style’ attribute. This approach allows developers to define styles for individual
elements, making it an effective tool for applying unique styles to specific HTML
elements.

<tag style = " "></tag>


Ex:-

<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Internal Style sheet:-

Internal CSS is a method for defining CSS styles directly within an HTML document.
It’s particularly useful for applying unique styles to a single web page, and it’s
embedded within the <style> element located in the <head> section of the HTML file.
To use internal CSS, you need to include CSS rules within a <style> tag inside
the HTML document’s <head>. This allows you to define styles by selecting HTML
elements or classes and applying styling rules within the tag. The styles defined by
internal CSS apply only to the specific web page where they are included.
Syntax:
<head>
<style>
/* Internal CSS starts here */
</style>
</head>
Example:-
<html>
<head>
<title>Internal CSS</title>
<style>
/* Internal CSS */
h1 {
color: green;
font-size: 50px;
text-align: center;
}

p{
color: blue;
font-size: 25px;
line-height: 1.5;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal..!</p>
</body>
</html>
External Style Sheets:
External style sheets are just that the style sheets are stored separately from our web
page.These are useful especially if we are setting the styles for an entire website. When
we change the styles in external style sheet we change the styles of all pages. We use
„<link>‟ element to access the style sheet file defined into our web page. The format
of <link> element is:
<link rel=”stylesheet” type=”text/css” href=”extstylesheet.css”>
Example:
extern.css:
body {background-color: #d0e4fe;}
h1 {
color: orange; text-align: center;
}
p{
font-family: "Times New Roman"; font-size: 20px;
}
extern.html:
<html>
<head>
<title>External Style Sheets</title>
<link rel=”stylesheet” type=”text/css” href=”extern.css”>
</head>
<body>
<h1>External Style Sheets</h1><br>
<p>This is a paragraph
</body>
</html>
@import rule:-
The @import rule is used to import one style sheet into another style sheet.. The
@import rule must be declared at the top of the document after any @charset
declaration.
Syntax:- @import url|string list-of-mediaqueries;

Styles.css
P{color:cyan;font-size:30px;background-color:red;}

The @import rule is used for this purpose as it links a stylesheet in a document.
The style file includes the styles for this HTML document.
<html>
<head>
<style type="text/css">
@import url(style.css);
body {
background-color: honeydew;
}
</style>
</head>
<body>
<p>This is demo paragraph one.</p>
<p class="two">This is demo paragraph two.</p>
<p>This is demo paragraph three</p>
</body>
</html>

You might also like