₹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