Skip to main content

DAY 12 - AUG 4

CSS – CASCADING STYLE SHEET

 

HOW TO LINK CSS WITH HTML

1. USING STYLE ATTRIBUTE

2. USING STYLE TAG

3. USING LINK TAG TO LINK EXTERNAL CSS FILE


<head>
    <title>CSS CLASS</title>
    <style>
        h1 {
            color: red;
        }

        #p {
            color: yellow;

        }

        .p2 {

            color: sienna;
        }

        
    </style>

    <link rel="stylesheet" href="style.css">


</head>

<body>
    <h1>CSS</h1>
    <p style="color: green">I am Ok</p>
    <!--METHOD 1 ATTRIBUTE-->

    <p id="p">We are ok</p>
    <!--METHOD 2 STYLE TAG-->

    <p class="p2">Everybody is ok</p>
    <!--METHOD 3 EXTERNAL CSS FILE-->

</body>


CSS RULE ----- PROPERTY + VALUE

color: red;      color – property  /   red  -- value

CSS   is Case Sensitive

In CSS between two words we need to use hyphen

CSS SELECTOR

1.ELEMENT SELECTOR – tag /h1

2. ID  SELECTOR - #hash

3.CLASS SELECTOR - .dot

4. GROUP SELECTOR – h1,#p,.p2

5.UNIVERSAL SELECTOR - *


<head>
    <title>CSS CLASS</title>
    <style>
        h1 {
            color: red;
        }

        #p {
            color: yellow;

        }

        .p2 {

            color: sienna;
        }

        * {
            background-color: slateblue;
           
        }

        #p, .p2 {
            font-size : 25px;
        }

        
    </style>


</head>

<body>
    <h1>CSS</h1>
    <p style="color: green">I am Ok</p>
   
    <p id="p">We are ok</p>
   
    <p class="p2">Everybody is ok</p>
   
</body>

PREFERENCE -

1. STYLE ATTRIBUTE

2. ID SELECTOR

3. CLASS SELECTOR

EXTERNAL FILE which has .p that present under style tag too

! important

! important need to add at the end of CSS value it will change the preference


        .p2{
            color: red !important;
        }
           


ATTRIBUTES - GV

Colour

Background-colour

Font-size

Font-family

Display  :None ,Inline,Block ,inline-block

OVERFLOW : hidden; visible; scroll ; auto

Visible helps to see the overflow content also.

Hidden will hide the overflow content (content out of the box)

Both auto and scroll are same auto will display the scroll down condition only in necessary/required situation

CSS COLOR

Color :

Background-color :

Border : size type color


 .p2{
            color: red;
            background-color: green;
            border : 5px solid  black;
         }
           


CSS BORDER

Border : size  type  color

TYPE ATTRIBUTES

Dotted

Dashed

Solid

Double

Groove

Ridge

Inset

Outset

None

Hidden


If we want to have mixed border then starts from top clockwise direction


.p2{
            color: red;
            background-color: green;
            border-style : dashed dotted solid dotted;}
           

ROUND BORDER : border-radius

.p2{
            color: red;
            background-color: green;
            border-style : dashed dotted solid dotted;
            border-radius : 10px}

BOX MODEL


Distance between border and content is padding.

Distance between two borders is margin.

The sizes or mentioned on clockwise direction TRBL (Top,Right,Bottom,Left)


  p{
           border :10px solid black;
           padding : 10px 20px;
           margin : 10px 20px 
        }

Comments

Post a Comment

Popular posts from this blog

CODEKATA BITWISE

Given a number N and an array of N elements, find the Bitwise XOR of the array elements. Input Size : N <= 100000 Sample Testcase : INPUT 2 2 4 OUTPUT 6   // ONE TESTCASE PASSED const   readline  =  require ( "readline" ); const   inp  =  readline . createInterface ({    input :   process . stdin }); const   userInput  = []; inp . on ( "line" , ( data )  =>  {    userInput . push ( data ); }); inp . on ( "close" , ()  =>  {    var   N  =  Number ( userInput [ 0 ]);    var   str  = String ( userInput [ 1 ])    var   arr  =  str . split ( ' ' ). map (( val ) => Number ( val ))       var   first  =  arr [ 0 ]       for ( i = 1 ; i < N ; i ++)   {  first  = first ^ arr [ i ]}    console . log ( first ...
Post a Comment
Read more

DATA BASE

  DATA BASE Backend deals with Server and Data Base CLOUD COMPUTING Cloud – Cloud Computing -- Rented Computer Service Ram, Processor, OS, Storage WHY WE PREFER CLOUD COMPUTING 1. Capital Investment (at initial stage renting is better than purchasing) 2. Maintenance Problem (Power Backup, Hard Disk, Upgrade) 3. Easily Swappable (Scale Up & Scale Down) (festival time ecommerce need extra storage and facilities after that it may need less, College websites during exam time (E.g)   Anna university website ,recent time – income tax website – pan card & aadhar card linking) 4.   Don’t need any separate place to keep those Systems. TOP COMPANIES AWS – Amazon Web Service - Netflix GCP – Google Cloud Platform Azure - Microsoft Azure WHY LINUX PREFERRED THAN OTHER OS Linux, Windows, Mac 1. Open Source 2.   Secure than Windows & Mac. 3. Command Line Usage In the Linux OS, the command line is a very handy and powerful tool used for...
Post a Comment
Read more

DAY 15 - AUG 08

  DOM – DOCUMENT OBJECT MODE   HTML DOC –Browser – Browser Engine(html parser) – DOM   Tree structure takes less time for searching that’s why we prefer tree structure in DOM. Why we prefer object model? Object model means OOPS concept based it have features like data abstraction, encapsulation…. Window   -- Window is the default thing available in the Browser’s JavaScript Engine. Document -- Document is property of Window Screen – Physical dimension of   the browser   Draw some sampl tree We can create html with the help of tag and make it dynamic(to do some action) by adding   javascript   using script tag then why specifically we need this dom à Will understand in future classes that we can’t do something directly with the tag.   DOM MANIPULATION   var element =document.createElement(‘tag’) Element.setAttribute(“attribute”,”name”) If we have morethan one same attribute for the element we can’t use s...
Post a Comment
Read more