madhabi's Profile
Default
1
Points

Questions
2

Answers
8

  • Default Asked on November 26, 2018 in CSS.

    The different ways to visually hide content:
    There are multiple ways of hiding an element in CSS. You can hide it by setting opacity to 0, visibility to hidden, display to none or by setting extreme values for absolute positioning.
    Opacity:

    
    .hide {
    
    opacity: 0;
    
    }
    
    

    Visibility:

    
    .hide {
    
    visibility: hidden;
    
    }
    
    

    Display:

    
    .hide {
    
    display: none;
    
    }
    
    

    Position:

    
    .hide {
    
    position: absolute;
    
    top: -9999px;
    
    left: -9999px;
    
    }
    
    
    • 223 views
    • 1 answers
    • 0 votes
  • Default Asked on November 26, 2018 in CSS.

    There are four types of @media properties.

    all – for all media type devices
    print – for printers
    speech – for screenreaders that “reads” the page out loud
    screen – for computer screens, tablets, smart-phones etc.

    Here is an example of @media property other than screen:

    
    @media print {
    
    body {
    
    color: red;
    
    }
    
    }
    
    
    • 253 views
    • 1 answers
    • 0 votes
  • Default Asked on November 26, 2018 in CSS.
    • Avoid key selectors that match large numbers of elements.
    • Prefer class and ID selectors over tag selector.
    • Avoid redundant selectors.
    • Preferably don’t use universal selector.
    • 329 views
    • 1 answers
    • 0 votes
  • Default Asked on November 26, 2018 in CSS.

    Advantages

    1. Nested syntax
    2. Ability to define variables
    3. Ability to define mixins
    4. Ability to add functions
    5. Less Time to Code
    6. Joining of multiple files

    Disadvantages

    1. Debugging is harder
    2. Compilation time slows down development
    • 224 views
    • 1 answers
    • 0 votes
  • Default Asked on November 26, 2018 in CSS.
    <html>
    <head>
    <title>non-standard fonts</title>
    <style type="text/css">
    @font-face {
    font-family: DejaVu Serif Web;
    src: url(/fonts/DejaVuSerif.ttf) format("truetype");
    }
    </style>
    </head>
    <body>
    <h1>DejaVu Serif</h1>
    <div style="font-family: DejaVu Serif Web;">
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled it to make a type
    specimen book.It has survived not only five centuries, 
    but also the leap into electronic typesetting, remaining essentially unchanged.
    It was popularised in the 1960s with the release of Letraset sheets containing
    Lorem Ipsum passages, and more recently with desktop publishing software like
    Aldus PageMaker including versions of Lorem Ipsum
    </p>
    </div>
    </body>
    </html>
    
    • 254 views
    • 1 answers
    • 0 votes
  • Default Asked on November 25, 2018 in CSS.

     

    <html>
    <head>
    <style>
    p {color: blue;}
    p.demo1 {display: none;}
    p.demo2 {display: inline;}
    p.demo3 {display: block;}
    p.demo4 {display: inline-block;}
    </style>
    </head>
    <body>
    <h1>Display Property</h1>
    <h2>display: none:</h2>
    <div>
    Lorem <p class="demo1">ipsum dolor</p> sit amet
    </div>
    <h2>display: inline:</h2>
    <div>
    Lorem <p class="demo2">ipsum dolor</p> sit amet
    </div>
    <h2>display: block:</h2>
    <div>
    Lorem <p class="demo2">ipsum dolor</p> sit amet
    </div>
    <h2>display: inline-block:</h2>
    <div>
    Lorem <p class="demo2">ipsum dolor</p> sit amet
    </div>
    </body>
    </html>
    

     

    • 230 views
    • 1 answers
    • 0 votes
  • Default Asked on November 25, 2018 in CSS.

    The browser reads selectors from right to left so having unnecessary selectors can lead to inefficient code  if the browser can determine the target element with only one specific selector  it can be more efficient.

    #nav ul li a { color: #F00; }

    That means the browser first checks for a, then li, then ul, and then #nav

    • 238 views
    • 1 answers
    • 0 votes
  • Default Asked on November 25, 2018 in CSS.

     

    <h1> inline element and inline-block</h1>
    
    <div class="example">
    
    Lorem ipsum dolor sit amet<br/>
    
    consectetur adipiscing elit<br/>
    
    </div>
    
    <div>
    
    This is <span class="demo">inline Element</span> Example.<br/>
    
    sed do eiusmod tempor incididunt<br/>
    </div>
    <style>
    
    h1 { font-size: 20px; font-weight: bold; }
    
    .example { border: solid 1px #c0c0c0; padding: 8px; margin: 12px; background-color: #f0f0e9; width: 70% }
    
    .demo { display: inline; height: 100px; border: dotted 1px red; background-color: white; }
    </style>
    

     

    inline

     

    • 241 views
    • 1 answers
    • 0 votes