Showing posts with label Css. Show all posts
Showing posts with label Css. Show all posts

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 }
   }
-->
</style>

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">
<html>
<head>
<title>link to a target medium</title>
<link rel="stylesheet"  type="text/css"  media="print, handheld"  href="nova.css">
</head>
<body>
<p>The body of the document</p>
</html>
-->
</style>

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:



Value

Description

all

Suitable for all devices.

aural

Intended for speech synthesizers.

braille

Intended for braille tactile feedback devices.

embossed

Intended for paged braille printers.

handheld

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

print

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

projection

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

screen

Intended primarily for color computer screens.

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

tv

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

Tuesday, March 13, 2018

Css outline (Css tutorial)

Hello guys! welcome to this wonderful section of my tutorial on CSS. In this tutorial i want to talk about CSS Outline.

Outlines are very similar to borders, but there are few major differences as well, which are listed out below:
  • An outline does not take up space.
  • Outlines do not have to be rectangular.
  • Outline is always the same on all sides; you cannot specify different values for different sides of an element.
NOTE: The outline properties are not supported by IE 6 or Netscape 7.

Sunday, March 11, 2018

Css cursor

Hello guys! evening and a happy sunday to you all. Welcome to another wonderful section of my tutorial post on CSS, we have really come a long way on CSS and i want to say a big congrats to you all.

In my last tutorial i talked about CSS padding, now in this tutorial post i want to talk about CSS cursors.

The cursor property of CSS allows you to specify the type of cursor that should be displayed to the user.

One good usage of this property is in using images for submit buttons on forms. By default, when a cursor hovers over a link, the cursor changes from to a pointer to a hand. However, it does not change form for a submit button on a form. Therefore, whenever someone hovers over an image that is a submit button, it provides a visual clue that the image is clickable.

Saturday, March 10, 2018

Css padding (Css tutorial)

Hello guys! evening and welcome to this section of my tutorial on CSS. In this tutorial i want to talk about CSS Paddings.

The padding property allows you to specify how much space should appear between the content of an element and its border:

The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

Thursday, March 8, 2018

Css List (Css tutorial)

Hello guys! morning and welcome to this new section of my tutorial on CSS, we have really gone a little bit far on CSS and i believe by now you all can do some few stuffs using CSS.

In my last tutorial post i talked about CSS margin and it various properties, now in this tutorial post i want to talk about CSS list.
NOTE: that CSS list is not too different from HTML List. The only difference is that CSS list has CSS style rules applied to it.

Saturday, March 3, 2018

Css margin (Css tutorial)


Hello guys! good afternoon and welcome to another section of my tutorial on CSS. In this tutorial i want to talk about CSS Margins.
The margin property defines the space around a HTML element. It is possible to use negative values to overlap content.

The values of a margin property are not inherited by the child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only the greater of the two margins or the same size as one margin if both are equal.

Friday, March 2, 2018

Css border (Css tutorial)


Hello guys! morning and welcome to this section of my tutorial on CSS. I want to also use this medium to wish you all a happy new month. In my last tutorial i talked about CSS Tables and i believe that you guys understand every thing about CSS Tables by now.

Now in this tutorial post i want to talk about CSS borders. The border property allows you to specify how the border of the box representing an element should look. There are three properties of a border you can change:

Tuesday, February 27, 2018

Css table (Css tutorial)


Hello guys! morning to you all. I welcome you all to this section of my tutorial on CSS. In this tutorial i want to talk about CSS Tables, this is the same with HTML Tables but the only difference is that in CSS Tables CSS rules are applied to it.

This section teaches you how to set different properties of a HTML Table using CSS. You can set the following properties of a table:

Tuesday, February 20, 2018

Links (Css tutorial)


Hello guys! evening and welcome to this section of my tutorial on CSS, in my last tutorial post i talked about CSS Images. Now i want to talk about CSS Links.

This section of my tutorial on CSS teaches you how to set different properties of a hyper link using CSS. You can set the following properties of a hyper link:

Monday, February 19, 2018

Images (Css tutorial)

Hello guys! afternoon. Welcome to this tutorial on CSS , in my last tutorial i talked about CSS Text and now i want to talk CSS Images. I believe by now you all are familiar with images in web design because i also talked about HTML Images in our tutorials on HTML.

Images play an important role in any webpage. Though it is not recommended to include alot of images in a webpage, but it is still important to use good images wherever required.

Thursday, February 8, 2018

Text (Css tutorial)

Hello guys! morning and welcome to another episode of my tutorial on Cascading Style Sheets. In my last tutorial i talked about CSS Fonts and am believing that right now you guys have full knowledge of it. In this tutorial i will be talking about Cascading Style Sheets Text and it's properties.

This section of my tutorial on CSS teaches you how to manipulate text using CSS properties. You can set the following text properties of an element:

Wednesday, January 31, 2018

Fonts (Css tutorial)

Hello guys! good afternoon and welcome to this section of my tutorial, hope you have all learned alot so far from my tutorials? In this tutorial i want to talk about CSS Fonts.
This section teaches you how to set fonts of a content, available in a HTML element. You can set the following font properties of an element: