Media

There are many more ways to access a webpage than simply via computer monitor. Each different media has its own characteristics. It might be monochrome, it might be limited in size or it might read webpage content aloud. Styles can be made to behave differently for different media.

The @media Rule

The @media rule allows different style rules for different media in the same style sheet.

For example:

@media screen 
{
   p 
   {
      font-size: 14px;
      background-colour:red;
   }
}

@media print 
{
   p
   {
      font-size: 11px;
      background-colour:none;
   }
}

@media screen, print
{
   font-family:"Times New Roman", Georgia, Serif;
}

The @media Query

We can add 'and', 'not' and 'only' conditions to an @media rule, as shown below:

@media mediaType and|not|only (feature) 
{
    CSS-Code;
}

The @media query is useful when designing webpages that have a responsive layout, as it allows us to tailor the css based on the screen size.

The example below will only apply to screen devices that have a width of 350px:

@media screen and (max-width:350px) 
{
   body 
   {
      background-color:red;
   }
}

Printing

Printing styles allow us to control how a webpage should appear when it is being printed. The two most useful printing styles are:

The only useful property of both the above printing styles is the keyword:

As shown earlier in these notes, the usual way of using webpage breaking is to set up a class style and to attach it as needed. For example:

.pageBreak
{ 
  page-break-before : always
}

To attach this style to a particular instance of (for example) a <h1> tag, use the code below:

<h1 class = "pageBreak">

To attach the same style to a particular instance of a <p> tag, use the code below:

<p class = "pageBreak">
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>