Tuesday, August 14, 2018

Media types (Css tutorial)

Hello guys!! afternoon, welcome to this new tutorial on CSS. In today's tutorial i want to talk about CSS Media Types.

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on the paper, with a speech synthesizer, with a braille device, etc.

Here are currently the two ways to specify media dependencies for style sheets:

  • Specify the target medium from a style sheet with the @media or @import at-rule.
  • Specify the target medium within the document language.
The @media rule:

An @media rule specifies the target media types (separated by commas) of a set of rules.

Below is a short example:

<style type="text/css">
@media print {
      body { font-size: 12pt }
@media screen {
      body { font-size: 14pt }
@media screen, print {
     body { line-height: 1.4 }

You can also read: Html Formating

The document language:

In HTML 4.0, the media attribute on the link element specifies the target media of an external style sheet:

Below is a short example:

<style type="text/css">
<!doctype  html public "-//w3c//dtd html 4.0//en">
<title>link to a target medium</title>
<link rel="stylesheet"  type="text/css"  media="print, handheld"  href="nova.css">
<p>The body of the document</p>

You can practice the above code using the Notepad++ for better understanding.

You can also read: Html Document structure

Recognized media types:

The names chosen for CSS media types reflect target devices for which the relevant properties make sense. They give a sense of what device the media type is meant to refer to. Following is the list of various media types:




Suitable for all devices.


Intended for speech synthesizers.


Intended for braille tactile feedback devices.


Intended for paged braille printers.


Intended for handheld devices (typically small screen, monochrome, limited bandwidth).


Intended for paged, opaque material and for documents viewed on screen in print preview mode.


Intended for projected presentations, for example projectors or print to transparencies.


Intended primarily for color computer screens.

Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities.


Intended for television-type devices.

Note: Media type names are case-insensitive.

Alright guys we have come to the end of this tutorial on CSS media types. Always feel free to ask questions in areas that you don't understand very well and your questions will be attended to as soon as possible.

Also appreciate this wonderful information shared on this blog by commenting below. Like our facebook page, follow us on google+, and subscribe with us to get our tutorial posts sent directly to your email.

Am also happy to inform you all that very soon i will start my tutorials on javascript, always check up on our updates and invite your friends to this great blog. See you in my next tutorial post, bye for now.

Sunday, August 12, 2018

@ Rules (Css tutorial)

Hello guys! evening and welcome to a brand new episode  of my tutorial on CSS. I know you guys are not really happy that i don't update my tutorial posts regularly, i apologise.

In my last tutorial post on CSS i talked about Pseudo elements which i explained in details the various Pseudo elements and their applications. Now in this tutorial post i want to talk about the @ Rules  and their applications.

Tuesday, July 17, 2018

Pseudo elements (Css tutorial)

Hello guys! morning to you all, wishing you all a happy wednesday. Alright in my previous tutorial post i talked about Css Pseudo-classes. Am going to move on to the next topic which is Css Pseudo element.

Css Pseudo-elements are used to add special effects to some selectors. You do not need to use javascript or any other script to use those effects. A simple syntax of Pseudo-element is as follows:

Friday, July 6, 2018

Css Pseudo Classes (Css tutorial)

Hello guys! good evening to you all. Without wasting much time let me introduce you guys to the topic for this tutorial section, i will be talking about pseudo-classes. I know you must be wondering what i mean by that, just relax and read through the tutorial so you can understand.

CSS pseudo-classes are used to add special effects to some selectors. Javascript or any other script is not needed in other to use those effects. Below is the syntax of pseudo-classes:

Friday, June 8, 2018

Css Layers (Css tutorial)

Hello guys! afternoon and welcome to this new section of my tutorial on CSS. Once again i apologize for not droping any tutorial post for some time now. Without wasting much time lets go down to the topic for this tutorial.

In my last tutorial i talked about CSS positioning so in this tutorial am moving on to CSS layers.

Sunday, May 13, 2018

Positioning (Css tutorial)

Hello Web design tutorialz readers! morning to you all. Welcome to a new section on my tutorials on CSS. Before i continue i want to first apologize to you guys for not droping any tutorial post since last month, was very busy with other stuffs.

Am going to continue from where i stoped, in my last tutorial on CSS i talked about Visibility and i showed you guys how it works. Now in this tutorial am going to be talking about Positioning in CSS. Without wasting much time, lets go down to business.

Monday, April 16, 2018

Visibility (Css tutorial)

Hello guys! afternoon and welcome to this section of my tutorial on CSS. For some time now i haven't posted any tutorial post here, i just want to use this medium to apologize to all my blog readers.

In my last tutorial on CSS i talked about CSS Scrollbar and now i want to discuss about CSS Visibility with you guys. 

Wednesday, March 28, 2018

Scrollbar Css

Hello guys! morning and welcome to this new section of my tutorial on CSS. Very soon i will round up my tutorials on CSS and start a new tutorial on JAVASCRIPT.

You guys are always free to ask your questions in areas you don't understand fully and you can also appreciate the good work of this great blog by droping your comments in the comment box below and by inviting your friends too.

Wednesday, March 21, 2018