Scribd
Upload
15 views

12. CSS Types by JS Rao Sir

Uploaded by

dassbabu8799
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
15 views

12. CSS Types by JS Rao Sir

Uploaded by

dassbabu8799
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/ 3

CSS ( Cascading Style Sheets )

 CSS stands for Cascading Style Sheets


 CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
 CSS are used to apply styles like font settings , border settings , background , table settings, layouts,
colors and so on the existing html elements.
 CSS will improve the "look" and "feel" of the web page

CSS can be added to HTML elements in 3 ways:


1. Inline styles
2. Internal styles
3. External styles

1. Inline CSS styles


 When ever CSS is applied for a "specific" tag of a html is known as inline css.
 By using the "style" attribute in HTML elements we are adding "inline" styles.
 Inline styles are applied in the opening tag only.
 Inline css styles we are adding to current tag and inside current html file must be saved with extension
.html
Syntax : <tag_name style = "css_PropertyName1 : PropertyValue1; css_PropertyName2 :
PropertyValue2; ...." > Content here </close_tag>

Q) Write a program to apply the "Inline CSS" to HTML elements ?


<html>
<head>
<title>Inline CSS</title>
</head>

<body style="background-color: darkcyan">

<h1 style="color: darkblue;background-color: red;


font-size: 100px; font-family: cursive"> Welcome to Facebook</h1>
</body>
</html>

2. Internal Styles:
 Internal styles are applied by using a <style> element inside the <head> tag section.
 It is used to apply the styles for the whole webpage that meens any where inside the same web-page.
 By using Internal CSS styles, we can apply the same styles for multiple HTMl tags with in the current
html file.

Syntax:
<html>
<head>
<style>
tag_name {
css_property1 : value1 ;
css_property2 : value2 ;
........ .......
}
</style>
</head>

<body>
=====
=====
</body>
</html>

Q) Write a program to apply the "Internal CSS" to HTML elements ?


==== ========== ======== ************** ===============

<html>
<head>
<title>Internal CSS</title>
<style>
h1{
color: darkblue;
font-family: cursive;
font-size: 100px;
text-align: center;
background-color: orchid;
border-radius: 100px;
}
body{
background-color:blue;
}
</style>
</head>

<body>
<h1>Welcome to Facebook</h1>
</body>
</html>

3. External Styles:
 External styles are applied by using an external CSS file (.css file)
 All external css styles , we are writing inside one separate file and save the file name as with .css
extension.
For example: demo.css
 Finally, we have to provode the link between .css file and .html files by using <link> tag inside
<head> tag.
For example: <link rel="stylesheet" href="demo.css">

 We can apply these styles for all html tags which are available in current html file.
 We can use external css styles in multiple web pages for getting reusability styles purpose.

Syntax: <link rel="stylesheet" href="External_styles.css">


Note: Inside <head> tag we are writing this <link> tag to Map between html file and css file

Advantages :
 Reusability of code for multiple pages.
 Length of the html programs are reduced
 Burden on the developer is reduced while updating the web-page.

Q) Write a program to apply the "External CSS" to HTML elements ?


home.html
<html>
<head>
<title>CSS Types</title>
<link rel="stylesheet" href="home.css">
</head>

<body>
<h1>Welcome to Facebook</h1>
</body>
</html>

home.css
h1{
color: red;
text-align: center;
font-size: 100px;
font-family: cursive;
}
body{
background-color: green;
}

You might also like