HTML and CSS Reference
In-Depth Information
above 992px. The set of media queries also includes a media query to target
displays with a high-pixel density.
<!-- For all browsers -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="print" href="css/print.css">
<!-- For progressively larger displays -->
<link rel="stylesheet" media="only screen and (min-width: 480px)"
href="css/480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)"
href="css/600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)"
href="css/768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)"
href="css/992.css">
<!-- For Retina displays -->
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio:
1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-
device-pixel-ratio: 1.5)" href="css/2x.css">
You should check their GitHub project for updates to this set of rules, found at
CSS Precompilers (SASS)
If you have had experience with CSS in the past, you know some of its
limitations. For instance, you cannot define variables that may affect the way in
which your CSS is presented or reuse elements of code. Producing and
maintaining a long chain of inheritance within your CSS can also prove to be a
pain as your application grows, as shown in the code below where there are
several elements within an element that require similar styling.
/**
* A common way to style a block in CSS
**/
.block {
/** style your block here **/
}
.block h1.heading {
/** style your header here **/
}
.block ul.alternating {
/** style your block ul here **/
}
