×
Clear all filters including search bar
Valeri Tandilashvili's CSS Notes
Results: 126
::after, ::before, ::first-letter, ::first-line
CSS3 introduced these notations (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept 
:after
, 
:before
, 
:first-letter
, 
:first-line
, introduced in CSS2
several ways to put space between table rows CODE
fThe First way is to use 
border-spacing
property
table {
    border-collapse:separate;
    border-spacing:0 15px;
}
Another way is to put additional separator TRs 
<tr class="separator" />
between rows
.separator {
    height: 10px;
}
Third way is to use 
margin-bottom
property
tr { 
    display: block;
    margin-bottom: 15px;
}
load CSS resource only for mobile devices using PHP 
<?php
if(stristr($_SERVER['HTTP_USER_AGENT'], "Mobile")){ // if mobile browser
?>
        <link rel="stylesheet" href="style-400.css" type="text/css" />
<?php
} else { // desktop browser
?>
        <link rel="stylesheet" href="style.css" type="text/css" />
<?php
}
?>
load external CSS file only for desktop or mobile devices
Load CSS resource only for mobile devices
<link href="css/d1.m.min.css?t=2.9" rel="stylesheet" media="screen and (max-width: 500px)" type="text/css" />
Another way is to use 
handheld
on 
media
attribute
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld"/>
PHP's way to load CSS file for 
mobile
devices
if(stristr($_SERVER['HTTP_USER_AGENT'], "Mobile")){
    echo '<link rel="stylesheet" href="style-400.css" type="text/css" />';
}
Load CSS resource only for desktop
<link href="css/d1.min.css?t=2.9" rel="stylesheet" media="screen and (min-width: 501px)" type="text/css" />
Another way is to use 
screen
on 
media
attribute
<link rel="stylesheet" type="text/css" href="screen.css" media="screen"/>
Using PHP
if(!stristr($_SERVER['HTTP_USER_AGENT'], "Mobile")){
    echo '<link rel="stylesheet" href="style.css" type="text/css" />';
}
Note: Remember this always loads the 
d1.m.min.css
but activates it only on screens having max width as 
500px
em CODE
Relative to the font-size of the parent element (2em means 2 times the size of the parent font-size). We should be careful when we use 
em
because if we have 3 containers nested inside of each other with 
2em
, then the child element will have 8 times more font-size than it's grand parent container (it means they cascade) 
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_em
https://youtu.be/-GR52czEd-0?t=279
vw CODE
Relative to 1% of the width of the viewport. If our browser viewport is set to 1,000 x 1,200 pixels, then:
1.5vw = 15px font size
1.5vh = 18px font size
1.5vmin = min(1.5vw, 1.5vh) = 15px font size
implementing a fallback for viewport units 
h1 {
    height: 500px;
    height: 100vh;
}
font-weight CODE
100, 200, 300, 400, 500, 600, 700, 800, 900 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold. In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the Fallback weights system
property "font-family" 
h1 { font-family: Arial, Helvetica, sans-serif; }
The 
font-family
property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available
New Note
The new note 
source
code4123 new code line one more line1h
Results: 126