[go: up one dir, main page]
Scribd
Upload
72 views9 pages

Font-Family Color: Tahoma

The document provides examples of using various CSS properties and selectors including: 1. Combining CSS properties for multiple elements into one ruleset. 2. Specifying inline and block level HTML elements. 3. Linking an external CSS stylesheet to an HTML page. 4. Transforming text case using the text-transform property. Some examples demonstrate styling text decorations, indentation, alignment, lists, tables, borders, and pseudo-classes. Media queries, attribute selectors, background images, gradients, transitions, animations, and positioning are also covered with code samples.

Uploaded by

gk.mobm33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
72 views9 pages

Font-Family Color: Tahoma

The document provides examples of using various CSS properties and selectors including: 1. Combining CSS properties for multiple elements into one ruleset. 2. Specifying inline and block level HTML elements. 3. Linking an external CSS stylesheet to an HTML page. 4. Transforming text case using the text-transform property. Some examples demonstrate styling text decorations, indentation, alignment, lists, tables, borders, and pseudo-classes. Media queries, attribute selectors, background images, gradients, transitions, animations, and positioning are also covered with code samples.

Uploaded by

gk.mobm33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 9

1. How to combine css properties of Html elements in CSS give one example?

Elem ents in a stylesheet sometimes share properties. Instead of re-writing previous


code, why not just combine them? For example, your h1, h2, and h3 elements might
all share the same font and color
h1, h2, h3 {font-family: tahoma, color: #333}
2. According to css which are the inline elements and which are Block elements in
Html?
the lists of elements that are either inline or block:
span, a, strong, em, img, br, input, abbr, acronym
block elements:
div, h1...h6, p, ul, li, table, blockquote, pre, form
3. write syntax to link a css style sheet to a Html webpage?
<link rel="stylesheet" type="text/css" href="mystyle.css">
4. How to transform text of inside a label from upper case to lower case or lower to
upper case using only css give example?
.uppercase {
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}
5. How to strike, under line,over line for a text using css give example?
.overline {
text-decoration: overline;
}

.strike {
text-decoration: line-through;
}

.underline {
text-decoration: underline;
}
6. How to give indent for a text using css, give example?
p{
text-indent: 50px;
}
7. How to align text justify,center,left,right using css, give example?
h1 {
text-align: center;
}

p.date {
text-align: right;
}

p.main {
text-align: justify;
}
8. How to change list icons(Bullets,Romans,Alphabets) using css give example?
ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}
9. How to change table alternate row color using css give one example?
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
10. Write a css class to apply border color with 3D outset border for a div?
.div{
border-style: outset;
border-width: 5px;
}

11. How many types of Combinators in css give example?


Descendant Selector
div p {
background-color: yellow;
}
Child Selector
div > p {
background-color: yellow;
}
Adjacent Sibling Selector
div + p {
background-color: yellow;
}
General Sibling Selector
div ~ p {
background-color: yellow;
}
12. Explain about pseudo classes and pseudo elements in css with example?
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>

<p>This is some text.</p>


<p>This is some text.</p>
<p><b>Note:</b> For :first-child to work in IE8 and earlier, a DOCTYPE must be
declared.</p>

</body>
</html

13. Explain about @media rule in css and give one example?
@media screen {
p{
font-family: verdana, sans-serif;
font-size: 17px;
}
}

@media print {
p{
font-family: georgia, serif;
font-size: 14px;
color: blue;
}
}
@media tv {
p{
font-family: georgia, serif;
font-size: 14px;
color: blue;
}
}
14. Explain about Attribute selectors in css,you have some ‘a’ tags,some tags have
attribute ‘target’ then write css to change background color of Anchor tags which
have ‘target’ attribute , no need to change remaining tags?
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>

<p>The links with a target attribute gets a yellow background:</p>

<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>

<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE


must be declared.</p>

</body>
</html>

15. How to change normal textbox to round corner textbox using css?
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

16. Apply border radius for a html element with image as shown in figure below.(use
border-image property)

#borderimg3 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 40% round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 40% round; /* Opera 11-12.1 */
border-image: url(border.png) 40% round;
width:27.5%;
}
17. Apply border radius for a html element with image as shown in figure below.(use
border-image property)

border-image: url(border.png) 10 streatch;

18. How to apply multiple background images for a from as shown in figure below?

background-image: url(img_flwr.gif), url(paper.gif);


background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 15px;
height:300px;
width:600px;

19. Create box with gradient colors using css as shown in figure below(colors
involved: red,blue, green)?

20. Create box with gradient colors using css as shown in figure below (colors
involved: red,orange,yellow,green,blue,indigo,violet)?

21. How to use text-overflow:ellipsis,text-overflow:clip in html using css?


Hint:

div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
text-overflow:ellipsis;
}
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
text-overflow:clip ;
}

22. How to use transition in css3, give one example?’


div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
div:hover {
width: 300px;
}
23. How can CSS Animation is useful write syntax and give small example?
24. Observe the following figure
How to change the above paragraph in to news paper layout(3 columns) as shown in
figure below.

25. How to apply drop cap for a paragraph by using CSS as shown in figure below
(you need to change design from figure1 from to figure2)?
26. How to use the property Z-index in css give one example?
27. How to use the property Clip in css with simple example?
28. Can you use multiple css classes for a single element give example?

You might also like