CSS Division, text color, text align

 

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

Division

<Div> tag is standard HTML tag mostly used in CSS to divide the piece of code using class / id etc. 

Example -

<!DOCTYPE html>
<html>
    <head>
        <title> CSS with Style </title>
        <style type = "text/css" >
            .red
            {
                color:red;
                 
            }
            .large{
           
                font-size:250%;
            }
           
            .underline
            {
                text-decoration:underline;
            }
            #first-section
            {
                color:brown;
                font-size:150%;
                background-color:pink;
                width:90%;
            }
            .underlined
            {
                text-decoration:underline;
                font-size:120%;
                color:green;
            }
            #second-section
            {
                background-color:yellow;
                width:200px;
            }
        </style>
    </head>
   
    <body>
        <div id= "first-section">
            <p> The quick brown fox jumped over the lazy dog.</p>
            <p> Wow this is awesome </p>
        </div>
       
        <div id= "second-section">
            <p class="red"> This is some more text and <span class="underlined"> this text is underlined.</span></p>
            <p><h1 class="red"> CSS is cool </h1></p>
        </div>
    </body>
</html>

output

The quick brown fox jumped over the lazy dog.

Wow this is awesome

This is some more text and this text is underlined.

CSS is cool


More about the colors: 

Here the color:"red" is used for text color , while color-background: "yellow" is used for background color 

Text color:

These are the ways to select a color for text

i) using color:color_name
ii) using hex format #000000 ex- #FF0000 (red), #00FF00 (green), #0000FF(blue)
iii) using rgb method - rgb(255,0,0)

<h2 style="background-color: rgb(0, 255, 255);

Text transform: 

to change text format to capital, lower etc.

property name - text-transform
possible values - uppercase, lowercase, capitalize 

Text decoration

This attribute is used to decorate text, underline, passthrough,dash,solid etc.

property name - text-decoration
possible values - none
                            overline
                            underline
                            line-through

Text - Spacing

property name - text-indent
possible values - pixel

property name - letter-spacing
possible values - pixel

property name - line-height
possible values - pixel

property name - word-spacing
possible values - pixel

Font

property name - font-family
possible values - font name

property name - font-size
possible values - pixel

property name - font-style
possible values - italic

property name - font-weight
possible value - bold

body{
            background-color: pink;
            color:black;
            font-family: 'Courier New', Courier, monospace;
            font-size: 20px;
            font-style:italic;
            font-weight: bold;

        }
        h2{
            text-shadow: 3px 2px 0px white  ;
        }





Comments

Post a Comment