Subscribe:

Ads 468x60px

dropdown

Social Icons

CSS: CSS List - Learn CSS for Free and Fun ......

CSS List

With the help of CSS list properties; you can set an image as the list-item marker and place the list-item marker.

With CSS you can prepare your list item
You can add properties like
 image
 style

Tag:ol {list-style-type: decimal;}

The CSS list property allocates you to set an image as the list-item marker and place the list-item marker. You can easily add properties like image and style.

Example:

<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc;}
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ul.none {list-style-type: none;}
</style>
</head>
<body>
<ul class="disc">
     <li>Sun</li>
     <li>Moon</li>
     <li>Stars</li>
</ul>
<ul class="circle">
     <li>Sun</li>
     <li>Moon</li>
     <li>Stars</li>
</ul>
 <ul class="square">
       <li>Sun</li>
       <li>Moon</li>
       <li>Stars</li>
</ul>
<ul class="none">
      <li>Sun</li>
      <li>Moon</li>
      <li>Stars</li>
</ul>
</body>
</html>

Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS: CSS Outline - Learn CSS for Free and Fun



With CSS we can draw a line bounding your element. We can add properties like

 color
 style
 width

 Remember this option does not work with internet explorer.

 Tag: outline: green dotted thick;

 The CSS outline is used to make an element “stand out’. It is a line that is drawn around the
outside the border edge. Additional properties like color, style and width can be added.

 Example:

 <html>
<head>
<style type="text/css">
p {
border: red solid thin;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>
Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS: CSS Padding - Learn CSS for Free and Fun .......


With CSS we can define the space between the element border and the element content. Padding can be applied at

  top of the page
 left of the page
 bottom of the page
 right of the page

 Tags:

 padding-top: 2cm;
padding-left: 3cm;
padding-bottom: 4cm;
padding-right: 5cm;
padding: 2cm 3cm 4cm 5cm;

 The CSS padding identifies the space between the element border and the element content.
CSS padding can be applied to the top, bottom, left and right of the web page.

 Example:

 <html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm;}
td.test2 {padding: 0.5cm 2.5cm;}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
This is a tablecell with equal padding on each side.
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
This tablecell has a top and bottom padding of 0.5cm
and a left and right padding of 2.5cm.
</td>
</tr>
</table>
</body>
</html>

 Demo:
This is a tablecell with equal padding on each side.

This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.
Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS; CSS Margin - Learn CSS for Free and Fun ......


With CSS we can set Margins at the

 top of the page
 bottom of the page
 right of the page
 left of the page

 Tags:

 margin-top: 5cm;
margin-right: 6cm;
margin-bottom: 7cm;
margin-left: 8cm;
margin: 5cm 6cm 7cm 8cm;

 A margin is a space around an object. We can set margin in web pages using CSS. Using
separate properties within margin syntax we can define space all around the element.

 Example:

 <html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm;}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>
Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS: CSS Border - Learn CSS for Free and Fun


What we can do with CSS Border?

 We can set the color of the border
 We can set the style of the border
 We can set the width of the border

 The CSS border is used for the purpose of changing color, style and the width of the border.
The CSS border allows to use each side of the separately from the other three sides. Each of
the sides can have different color, style and width.

 The color of the border also has different syntaxes for the top, bottom, left and right. To set the color of four borders the syntax used is

 <style type="text/css">
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>

 The style of the CSS border varies in case of top, bottom, right and left borders. The syntax used in case of dotted, dashed, solid, double, groove, ridge, inset, outset paragraphs are

 <style type="text/css">
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
</style>

 The width of the CSS border also varies in case of top, bottom, right and left. To set the width
of the bottom border the syntax used is

 <style type="text/css">
p.one {
border-style: solid;
border-top-width: 15px;
}
p.two {
border-style: solid;
border-top-width: thin;
}
</style>
Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS: CSS Font - Learn CSS for Free and Fun


What we can do with CSS Font?

  We can set the font of a text
 We can set a paragraph font using the "caption" value
 We can set the size of the font
 We can set the style of the font
 We can set the variant of the font
 We can set the boldness of the font

How CSS Font is used?

Syntax: tag1 {font: < font style> || < font-variant> || < font size> || < font-family>;}

 Example: font: italic small-caps 12px Arial;

 The CSS font is used to set the font of the text, and the paragraph font can be set by using the
“caption” value. It helps to set the style, variant and size of the font. The boldness of the font
can be set by CSS font. The font in the webpage varies in color, style, size and others using
CSS.

 The CSS can set the font of a text by adding the syntax

 <style type="text/css">
h3 {font-family: times;}
p {font-family: courier;}
p.sans-serif {font-family: sans-serif;}
</style>

 To set the paragraph font by using the “caption” value, the following syntax is used

 <html>
<body>
<p>This is a normal paragraph</p>
<p style="font: caption">This is a paragraph with a "caption" font</p>
</body>
</html>

 The size and style of the font is set by the help of the following syntaxes respectively

 <style type="text/css">
h1 {font-size: 150%;}
h2 {font-size: 130%;}
p {font-size: 100%;}
</style>

 and

 <style type="text/css">
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
</style>

 To set the variant of the font, the syntax used is

 <style type="text/css">
p.normal {font-variant: normal;}
p.small {font-variant: small-caps;}
</style>

 CSS font can also set the boldness of the font, the syntax used is

 <style type="text/css">
p.normal {font-weight: normal;}
p.thick {font-weight: bold;}
p.thicker {font-weight: 900;}
</style>
Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS: CSS Text - Learn CSS for Free and Fun


What we can do with CSS Text?

 We can set the color of the text
 We can set the background-color of the text
 We can specify the space between characters
 We can specify the space between lines
 We can align the text
 We can add attributes to the text
 We can indent text
 We can control the letters in a text
 We can increase the white space between words
 We can disable text wrapping inside an element
How CSS Text is used?

 Syntax: tag1 { color: color1;}

 Example: p {color: red;}

 The CSS text decorates the text of the website and sets the background color. Besides this the
CSS text also sets the space between the characters and between lines. It further incorporates
indent text, aligns the text, controls the letters in the text and increases the white space
between the words. The CSS text adds attributes to the text, changes its direction wherever
necessary and disables text wrapping inside an element.

 The CSS text changes the webpage in terms of color and alignment with the following syntaxes
respectively:

 <style type="text/css">
h1 {color: #00ff00;}
h2 {color: #dda0dd;}
p {color: rgb(0,0,255);}
</style>

 and

 <style type="text/css">
h1 {text-align: center;}
h2 {text-align: left;}
h3 {text-align: right;}
</style>

 To change the background-color of the text, the syntax used is

 <style type="text/css">
span.highlight {
background-color:yellow;
}
</style>

 The text specifies the space between characters and lines, through these syntaxes respectively

 <style type="text/css">
h1 {letter-spacing: -3px;}
h4 {letter-spacing: 0.5cm;}
</style>

 and

 <style type="text/css">
p.small {line-height: 90%;}
p.big {line-height: 200%;}
</style>

 It adds to the indent text by adding the syntax

 <style type="text/css">
p {text-indent: 1cm;}
</style>

 It controls the letter in a text by the syntax

 <style type="text/css">
p.uppercase {text-transform: uppercase;}
p.lowercase {text-transform: lowercase;}
p.capitalize {text-transform: capitalize;}
</style>

 The CSS text also increases the white space between words and disables text wrapping inside
an element by adding the following syntax respectively

 <style type="text/css">
p {
word-spacing: 30px;
}
</style>
and
<style type="text/css">
p {
white-space: nowrap;
}
</style>
Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS: Group Selectors - Learn CSS for free and fun ........



Group Selectors

What are Group Selectors?
 By using Group Selectors we can assign styling for a group of text at a time
 Group selectors contain a common set of property & values, which can be combined/grouped logically for easier coding.

 How Group Selectors are used?

 tag1,tag2 {Property:Value;}

 tag1 {Property:changed value;}

 tag2 {Property:changed value;}

 Example
b,p {font-family:Arial, Helvetica, sans-serif; color:black; background:yellow;}
b {font-size:14px;}
p {font-size:10px;}

 group selectors are used to define the common styles at once.
.headlines, .sublines, .infotext

  {
font-family:Arial, Helvetica, sans-serif; color:red; background:blue;
}
.headlines {font-size:14px;}
.sublines {font-size:12px;}
.infotext {font-size: 10px;}
With group selectors the typing time becomes less and editing becomes easy.
Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS: CSS Background - Learn CSS for Free and Fun


What we can do with CSS Background?

 We can set the background color
 We can set image as the background
 We can repeat a background image only vertically, only horizontally or display a background image only one time
 We can place the background image
 We can position a background image using % or pixels
 We can set a fixed background image

How CSS background is used?

Syntax: tag1 {background-color: color1;}

 Example: body {background-color:cyan;}

 CSS background enables to set the background color or the image. The image can be set as the
background of the webpage which can be repeated in vertical, horizontal form or in neither
direction. The CSS background is formulated in such a way that the background image can be
changed. Apart from this, the position of the background image can be changed by using % or
pixels or can be fixed. The CSS background helps to change the webpage on the basis of color,
gradient, image and other properties.

 The webpage can be made more attractive by adding a color in the background. To change the
color of the background into cyan, the syntax added is body {background-color: cyan;}. Thus
the syntax remains same in case of any color only the shade of the color is to be replaced. The
syntax used is

 <style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: transparent;}
p {background-color: rgb(250,0,255);}
</style>

 Similarly by adding image, the background can be made more attractive by using the syntax 

 p {
background-image: url(image1.jpg);}.
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
}
</style>

 To repeat the background image the syntax used is

 <style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat;
}
</style>

 For the vertical repetition, the syntax used is

 <style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat-y;
}
</style>

 For horizontal repetition the syntax used is

 <style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat-x;
}
</style>

 To display the background image only once, the syntax used is

 <style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>

 To place the background image the syntax used is

 <style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>

 To change the position of the background image using %, the syntax used is

 <style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>

 To change the position of the background image using pixel, the syntax used is

 <style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>

 To set a fixed background image the syntax used is

 <style type="text/css">
body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
Posted by Unknown at Wednesday, July 10, 2013 0 comments

CSS: Context Dependents - Learn CSS for Free and Fun


What are Context Dependents?

 By using Group Selectors we can assign styling to make selectors that will only work in
certain contexts.
 We can use context dependent and grouped selectors simultaneously.

 How Context Dependents are used?

 i b { color:red;}

 This means the font color of those texts will be red which are bold and written in italics.
You may require to change a property of text depending on its other property. Let us suppose
we have two sentences, one written in bold and the other written in both italics and bold. You
want to change the color of the sentence written in both bold and italics and not for the
sentence written in bold. You can make this happen by context dependents.

 Let us consider the example

 i b { color:red;}

 This means only the texts which are both bold and written in italics will appear in red.

 It is possible to make selectors that will only work in certain contexts.
For example, you can define a style for the <b> tag that is only triggered if the text is not only
bold but also written in italics.

 For example, the style should be in effect here:

 <i><b>example</b></i>
but not here :
<b>example</b>.
Posted by Unknown at Wednesday, July 10, 2013 0 comments
Subscribe to: Posts (Atom)