Posts

Showing posts with the label CSS

Objective Questions on CSS Syntax and Property set-6

1) ....... media type is used for use with printed material and documents viewed onscreen in print preview mode. A. Print B. Projection C. Aural D. Screen 2) In CSS length measurement unit ....... defines a measurement in picas. A. pi B. pc C. pt D. px 3) In CSS length measurement unit ......defines a measurement in screen pixel. A. pi B. pc C. pt D. px 4) ........ defines a measurement relative to a font's x-height. The x-height is determined by the height of the font's lowercase letter x. A. cm B. em C. ex D. hx 5) Which of the following is the correct CSS code to set the background color of all h1, h2 and h3 elements to orange. A. h1.h2.h3{background-color:orange;} B. h1, h2, h3{background-color:orange;} C. h1 h2 h3{background-color:orange;} D. h1, h2, h3{set-background:orange;} 6) The CSS selector E>F selects ... A. direct decedents B. adjacent siblings C. preceding siblings D. all elements 7) The CSS selector E-F selects ..... A. direct decedents B. adjacent siblings C....

Solved Multiple Choice Questions on Basic CSS set-5

1) All of the following statement about CSS styles are True Except. A. External style sheets can set and update styles for many documents at once. B. In inline style, it can be easily control style to a single character instance. C. In some cases @import is used in inline styles D. There is no additional network requests required to retrieve style information. 2) ............. requires extra download round-trip for t he style sheet, which might delay page rendering, particularly when multiple files are in use. A. External Style Sheets B. Document Wide Style C. Inline Style D. All of the above 3) For .............., it needs to reapply style information throughout the document and outside documents. A. External Style Sheets B. Document Wide Style C. Inline Style D. All of the above 4) Which of the following is the correct example of document wide style in CSS. A. <h1 style="color:red;"> I am red !</h1> B. <h1 color="red"> I am red ! </h1> C. ...

How to create fade effect image slideshow using CSS

Image
You can give fade effect animation for image slideshow using CSS. @keyframes 'at' rule and animation keyword in CSS can be used to make image slideshow with fade effect. With @keyframes 'at' rule, you can define the properties that will be animated in an animation rule and animation keyword to set all of the animation properties. Here I have used different types of animation properties like animation-name, animation-duration, animation-timing-function and animation-iteration-count. Where animation-name specifies name of the animation, animation-duration specifies animation duration in second(s) or milisecond(ms), animation-timing-function specifies how the animation will play like ease, ease-in, ease-in-out, ease-out and linear and animation-iteration-count:number of times animation should play. Simple fade effect image slideshow    Here is a sample CSS code for creating simple fade effect image slideshow written for safari browser. <style type="text/css"...

How to make rounded corners border using CSS

Image
While designing website, website template or blog template, you may want to make buttons, menus, paragraphs or any others border corners rounded to make your template more beautiful and attractive. It is possible by using a keyword "border-radius" in CSS. The keyword border-radius is used to make all the corners rounded by specifying the radius of corner. For example you can use the following CSS code. border-radius:10px;                     // makes radius of all the corners 10px; You can also specify the radius for each corners by using border-radius-top-right, border-radius-top-left, border-radius-bottom-right, border-radius-bottom-left keywords. For example you can use the following CSS code to make each corner rounded. border-radius-top-right:10px; border-radius-top-left:10px; border-radius-bottom-right:5px; border-radius-bottom-left:5px; The above code makes radius of left and right cor...

How to Create Custom CSS Template for Printing

Image
Along with the development of web technologies and web programming languages, web designing becoming more complex and the websites more flexible and user friendly. With the invention of CSS technology, web designing and programming becoming more easier than ever. By using cascading style sheet (CSS) and its properties, you can give custom design to your website for different medias like screen, print, tv and for different screen sizes. The CSS @media property allows you to do such task. Today I am going to describe "How to create custom CSS template for printing". Designing Custom CSS Template for Printing If you wanted to allow your website visitors to print the content of your website, you can design custom template for printing using CSS. You can define which part or your website will be printed or not and can add page setting for printing. Here is a sample CSS code for website template. body{ background:#00aaff; font-color:#00000; font-size:16px; } h1...

How to Create Responsive Website or Blogger Template

As the time goes, browsing websites from desktop computers decreasing and using Laptops, Tablets and Mobile devices increasing day by day. So why not to create our website design custom for each types of devices, that fits and looks more attractive for those devices to acquire the visitors entered from those devices. Responsive web design is the approach that suggests in which design and development should respond user behavior and environment based on the size of the browser screen, platform and orientation. Responsive web design includes the use of flexible layouts, images and intelligent use of media queries. You can make your blogger template responsive by using special tags in CSS. Media queries (@media) are such tags, which helps to make your CSS for every device screen size. You can make many media queries on CSS that matches for each screen size and you can put custom CSS codes for each media queries. Here I have explained some steps for creating your blog responsive. Step1: Ad...

How to Create Simple Blogger Template Easily?

To create successful blog, it needs to create blogger template more attractive and looks more professional. Even you can buy professional blogger template on the web, you may want to create blogger template by yourself for your blog. Creating a professional blogger template is more challenging task, but if you have some knowledge on HTML, XML, CSS and JavaScript , it is possible to create professional blogger template easily by yourself. In this series of tutorial, I am going to teach you basic to advanced steps to create blogger template. Today I am telling you "steps for creating a simple blogger template" with describing basic elements and along with its corresponding style sheet codes. Step1: Preparing demo blog for creating blogger template To test blogger template you have created, at first you need to set up a blogger blog and have to add some posts on the blog. To create a blog, go to blogger home page , log in using your Google user name and password and then click ...

How To Make Simple CSS Stylesheet for a Website ?

Image
CSS language is used to simplify the process of making web pages presentable. It handles the look and feel part of a web page. Not only it makes the web development process more fast and saves the time but also makes the page loading time more faster and easier for maintenance. So today's almost all of the websites are designed by using CSS. You can design and link the CSS file very easily to the web page. In this post I am telling you on "How To Make Simple CSS Style Sheet for a Website ?" by using very simple steps and ideas. I hope that after reading this post you will able to make simple design for your web page using CSS. The format of the HTML page will be as in the image on right side. Steps To Make Simple CSS Style Sheet for a Website 1. At first create a HTML file by using any text editor like notepad. On the HTML file write the following code and save it on the ".html" format. <html> <head> <title>How To Make Simple CSS StyleSheet for...

How To Create Simple Menu Using CSS ?

Image
By using CSS codes we can create websites menus more easily with very simple and small number of codes. So uses of CSS menus on websites makes your website lighter and faster, also runs on almost all of the browsers. Here I have given some useful steps and codes for creating simple menu using CSS. It may help you to make simple, attractive and awesome menu for your own website by using the following steps and codes. To Create Simple Menu Using CSS # At first create the following HTML codes on your webpage. Replace the "#" with your link URL included in the HTML code below. <div id="navigation"> <ul id="nav"> <li><a href= "#" >Home</a></li> <li><a href= "#" >Item1</a> <ul> <li><a href= "#" >SubItem1</a></li> <li><a href= "#" >SubItem2</a></li> <li><a href= "#" >SubItem3...

Solved Objective Questions of CSS set-4

Image
1. In CSS filters, ........................... will be used to create a shadow of object at the specified horizontal and vertical offset and color. A) Drop shadow effect B) Chroma filter C) Shadow object effect D) Shadow filter 2. ............................. will be used to create attenuated shadow in the direction and color specified. English: graphic of the main CSS table spaces (Photo credit: Wikipedia ) A) Drop shadow effect B) Chroma filter C) Shadow object effect D) Shadow filter 3. State whether the statements are true or false. i) Glow effect will be used to create a glow around the object. ii) The two parameters used in glow effect are color and intensity. iii) Invert effect will be used to create a negative image A) i-true, ii-true, iii-true B) i- true, ii-false, iii-true C) i-false, ii-true, iii-true D) i-false, ii-false, iii-true 4. Which of the following are the parameters used in wave effect of CSS filter property? i) add        ii) freq ...

Objective Questions of CSS with Answer set-3

Image
1. The following syntax to set margin around a paragraph will make- p{margin:10px 2%} A) Top and bottom margin will be 10px and left and right margin will be 2% of the total width. B) Left and right margin will be 10px and top and bottom margin will be 2% of the total height C) Top margin will be 10px and other margins will be 2% of the total width D) Left margin will be 10px and other margins will be 2% of the total width 2. The ...................... property allows you to control the shape or style of bullet point in the case of unordered lists, and the style of numbering characters in ordered list. A) list-style-type B) list-style-layout C) list-type-style D) list-type Box model in CSS (Photo credit: Wikipedia ) 3. The ......................... property allows to specify the distance between the list and the text relating to the list. A) list-spacing B) marker-spacing C) marker-offset D) list-offset 4. The ...................... property allows to specify how much space appear betw...

MCQ of CSS With Answer set-2

Image
English: css - absolute position (Photo credit: Wikipedia ) 1. Which of the following are the background properties in CSS ? i) background-color ii) background-image iii) background-repeat iv) background-position v) background A) i, ii, iii and iv only B) i, ii, iii and v only C) i, ii, iv and v only D) All i, ii, iii, iv and v 2. State whether the statement is/are True. i) font-family property is used to change the face of a font. ii) font-variant property is used to create small-caps effects. A) i-True, ii-False B) i-False, ii-True C) i-True, ii-True D) i-False, ii-False 3. The CSS links properties are A) :link, :visited, :hover, :active B) :link, :visit, :hover, :active C) :link, :visited, :over, :active D) :link, :visited, :hover, :active, :inactive 4. Internet Explorer uses ....................... property to create transparent images. A) -moz-opacity:x B) filter: alpha(opacity=x) C) Both of the above D) None of the above 5. The different ways to associate styles...