Cascading Style Sheet
What is CSS?
CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including
colours, layout, and fonts, thus making our web pages presentable to the users.
CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based
markup language. Now let’s try to break the acronym:
Cascading: Falling of Styles
Style: Adding designs/Styling our HTML tags Sheets: Writing our
style in different documents
CSS ruleset
A CSS ruleset is various affirmations to various pieces or elements of the document. The objective is to apply a bunch
of properties for certain distinct qualities to a solitary, or a particular arrangement of components in the connected
HTML page.
CSS Syntax
CSS Syntax Structure
The HTML element you wish to style is indicated by the selector. One or even more declarations are contained in the
declaration block, and they are divided by semicolons. A comma separates the name of the CSS property from its value
in each declaration. Semicolons are used to separate multiple CSS declarations while curly braces are used to enclose
declaration blocks.
Example
In this example, all <V> elements will be centre-aligned, with a BLUE text colour: V {
colour: blue;
text-align: centre;
}
Features of CSS
In CSS, a global style sheet could be used so that users can perform any improvements in the style without
trouble and take less space.
One external style sheet can be produced and used to design several websites.
You can connect a different style sheet to a web page by modifying one line.
Benefits of CSS
It enables you to describe a design for each feature of HTML. Each style can be applied to as many web
pages as you like.
You can easily configure the formatting of documents and keep different documents consistent.
It enables formatting to be shared among several pages, reducing the data transfer size, and helping to
load pages faster.
It provides independence from the web and supports new browsers as well.
It has more features for representation than HTML. It enables you to boost the appearance of your HTML
files better than just using presentational features and properties of HTML.
Advantages of CSS
CSS saves time
Easy maintenance
Superior styles to HTML
Multiple Device Compatibility
Global web standards
Difference between HTML and CSS
Types of CSS (Cascading Style Sheet)
There are basically 3 ways in which we can insert a Slide Sheet. Those 3 ways are:
Inline Style
External Style Sheet
Internal Style Sheet
Inline Style
Inline Style can be used to apply special effects to particular
elements. This method has to be used very carefully as in this
method the content mixes with the presentation. To use the
inline style method we have to use the style attributes in the
relevant tag itself. For example:
SYNTAX<h1 style="color:blue;text-align:center;">This is a
heading</h1>
<p style="color:red;">This is a paragraph.</p>
Using this code we can change the alignment of the heading and can change the color of the paragraph .
Internal Style Sheet
Internal Style sheet is usually used if a single page of HTML has its unique style. For this, we have to define the styles in
the head sector with the <STYLE> tag. The following code shows how to use Internal Style Sheet:
<head>
<style> body {
Background-color: Orange;
}
h1 {
color: red;
}
</style>
</head>
External Style Sheet
By using an external style sheet, we can change the look of the entire web page by changing one single file. An
external Style Sheet contains the CSS rules that are to be applied to the HTML document. Every HTML page must
have the reference to the style sheet in the <LINK> tag.
Add an External Style Sheet
To add an External Style Sheet, we need to follow these simple steps:
Select the web project you are working on.
On the project menu, click on the Add New Item option to open the Add New dialog box.
Select the Web Project items in the left pane
Click on the Style Sheet icon on the right pane
Enter the name of our style sheet in the Name box.
Select Open option.
The following is the code that is to be used:
<head>
<link rel="stylesheet" type=" text/css" href="v.css">
</head>
Example:
Main Page Style Sheet page
Note:-This page should be saved with the same
name that you link with main page like “1.css”
<html> body {
<head> background-color: black;
<link rel="stylesheet" href="1.css"> }
</head>
<body> h1 {
color: navy;
<h1>This is a heading</h1> margin-left: 20px;
<p>This is a paragraph.</p> }
p{
</body> background-color: red;
</html> color:#C0C0C0;
margin-left: 20px;
font-size:30;
}
Save this file with .html Save this file with .css
More Examples of CSS
Table in CSS
<html>
<head>
<style>
table, th, td {
border: 1px solid;
color:#7FFF00;
}
table {
width: 50%;
height:70%;
background: teal;
}
</style>
</head>
<body>
<h2>Full-width Table</h2>
<font color="red">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</font>
</body>
</html>
Image in CSS:-
<html>
<head>
<style>
img {
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Circled Image</h2>
<p>Use the border-radius property to create
circled images:</p>
<img src="1.png" alt="Paris" width="300" height="300">
</body>
</html>
Text in CSS
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>
</body>
</html>
List in CSS:-
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>The list-style-type Property</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Worksheet
1.CSS stands for
a. Cascading style sheet b.Cyber style sheet
c. Cassandra style sheet d.None of the above
2.Three types of style sheet
a.Inline, internal, extreme b. Internal, external, inline
c.Insidious, internal, external d.None of the above
3.<link type="stylsheet" href="exx.css"> belongs to
a.External b.Internal
c.Inline d.None of the above
4. When CSS is written inside HTML it will be saved as
a.CSS b.XML
c.HTML d.All of the above
5. It is used to make webpage presentable.
a. MS-Paint b.XML
c. HMLL d.CSS
6. What symbols go around the properties for each CSS selector?
a.<<< b.{}
c.&& d.@@
7. http://www.google.com is an example of a what?
a.URL b. IP address
c. ISP d. Hardware
8. This tag is used to give style in CSS.
a.<style> tag b. <body> tag
c. <java> tag d. <con> tag
9. Style will come inside head for..
a.Inline b. Internal
c.Link d. none
10. When CSS is written inside HTML it will be saved as….
a. .net b.Jsp c.html d.php
Que/Ans:
Que1.Write any three difference between HTML and CSS.
Que2.Difference between Internal and Inline CSS.
Que3.Write any three benefits of CSS.
