HTML
₹2,000.00
₹300.00
- 24 students
- 7 lessons
- 2 quizzes
- 10 week duration
Applying CSS— CSS Selectors
CSS or Cascading Stylesheet is used for styling of elements in a web page. CSS can be defined in many ways.
- Inline. Here the CSS is applied directly to the element.
<div style=”background-color:red;color:blue’>This is a div</div> - Styles will be defined inside a <style></style> tag inside the page. Usually in the head section.
- Via ID. Style for an element can be defined by using its ID. An element with id xyz will have its style named #xyz.
- Using classes. Classes are defined in the style section using .classname syntax. A css class called c1 wil be defined as .c1, it will referred to as c1.
- Using the element name. A style for table would be defined using table, div, p etc.
Here is some sample code.
<!DOCTYPE html>
<!--
There are four main methods for applying css to HTML elements.
They are
1. Inline
2. Id
3. Class
4. Element types
These are called selectors. There is a lot of flexibility and we will learn later
-->
<html>
<head>
<title>CSS-Applying Styles</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#mydiv
{
background-color: green;
color:yellow;
}
.c1{
background-color: yellow;
color:green;
}
table{
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1 style="color:blue;background-color:black;">Inline CSS</h1>
<div id="mydiv">This Div has the id mydiv. Its style will be #mydiv</div>
<input type="text" id="mydiv"/>
<p class="c1">This paragraph will use a class called c1</p>
<table border="2">
<tr><td>This is a table</td></tr>
</table>
</body>
</html>
Styles can be combined in the following manner.
<!DOCTYPE html>
<!--
Combining CSS
Nearest defined CSS has the highest priority in case of clashes.
-->
<html>
<head>
<title>Combining CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.yellowbackground
{
background-color: yellow !important;/*This will not be overriden*/
}
.bluebackground
{
background-color: blue;
}
.whitetext
{
color:white;
}
</style>
</head>
<body>
<h1 style="background-color: red;" class="bluebackground">Background color is red by inline and blue by class.</h1>
<h2 class="bluebackground yellowbackground">Two classes. One gives yellow background other blue</h2>
<h2 class="bluebackground whitetext">Blue background and white text.</h2>
</body>
</html>
Prev
Tables in HTML
Next
Positioning Modes–1