HTML- Hyper Text Markup Language and CSS Cascading Style Sheets

champak
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.

  1. Inline. Here the CSS is applied directly to the element.
    <div style=”background-color:red;color:blue’>This is a div</div>
  2. Styles will be defined inside a <style></style> tag inside the page. Usually in the head section.
    1. Via ID. Style for an element can be defined by using its ID. An element with id xyz will have its style named #xyz.
    2. 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.
    3. 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>

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *