Scribd
Upload
8 views

12. CSS Types by JS Rao Sir

Uploaded by

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

12. CSS Types by JS Rao Sir

Uploaded by

dassbabu8799
Copyright
© © All Rights Reserved
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