Css Class 2
https://www.tutorialspoint.com/css/css_visibility.htm
This chapter teaches you how to set fonts of a content, available in an HTML element. You can set following font properties of an element −
The font-family property is used to change the face of a font.
The font-style property is used to make a font italic or oblique.
The font-variant property is used to create a small-caps effect.
The font-weight property is used to increase or decrease how bold or light a font appears.
The font-size property is used to increase or decrease the size of a font.
The font property is used as shorthand to specify a number of other font properties.
Set the Font Family
Following is the example, which demonstrates how to set the font family of an element. Possible value could be any font family name.
<html> <head> </head> <body> <p style = "font-family:georgia,garamond,serif;"> This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. </p> </body> </html>
This will produce following result −
Set the Font Style
Following is the example, which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.
<html> <head> </head> <body> <p style = "font-style:italic;"> This text will be rendered in italic style </p> </body> </html>
This will produce following result −
Set the Font Variant
The following example demonstrates how to set the font variant of an element. Possible values are normal and small-caps.
<html> <head> </head> <body> <p style = "font-variant:small-caps;"> This text will be rendered as small caps </p> </body> </html>
This will produce following result −
Set the Font Weight
The following example demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
<html> <head> </head> <body> <p style = "font-weight:bold;"> This font is bold. </p> <p style = "font-weight:bolder;"> This font is bolder. </p> <p style = "font-weight:500;"> This font is 500 weight. </p> </body> </html>
This will produce following result −
Set the Font Size
The following example demonstrates how to set the font size of an element. The font-size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.
<html> <head> </head> <body> <p style = "font-size:20px;"> This font size is 20 pixels </p> <p style = "font-size:small;"> This font size is small </p> <p style = "font-size:large;"> This font size is large </p> </body> </html>
This will produce following result −
Set the Font Size Adjust
The following example demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.
<html> <head> </head> <body> <p style = "font-size-adjust:0.61;"> This text is using a font-size-adjust value. </p> </body> </html>
This will produce following result −
Set the Font Stretch
The following example demonstrates how to set the font stretch of an element. This property relies on the user's computer to have an expanded or condensed version of the font being used.
Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.
<html> <head> </head> <body> <p style = "font-stretch:ultra-expanded;"> If this doesn't appear to work, it is likely that your computer doesn't have a <br>condensed or expanded version of the font being used. </p> </body> </html>
This will produce following result −
Shorthand Property
You can use the font property to set all the font properties at once. For example −
<html> <head> </head> <body> <p style = "font:italic small-caps bold 15px georgia;"> Applying all the properties on the text at once. </p> </body> </html>
This will produce following result −
This chapter teaches you how to manipulate text using CSS properties. You can set following text properties of an element −
The color property is used to set the color of a text.
The direction property is used to set the text direction.
The letter-spacing property is used to add or subtract space between the letters that make up a word.
The word-spacing property is used to add or subtract space between the words of a sentence.
The text-indent property is used to indent the text of a paragraph.
The text-align property is used to align the text of a document.
The text-decoration property is used to underline, overline, and strikethrough text.
The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
Set the Text Color
The following example demonstrates how to set the text color. Possible value could be any color name in any valid format.
<html> <head> </head> <body> <p style = "color:red;"> This text will be written in red. </p> </body> </html>
It will produce the following result −
Set the Text Direction
The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<html> <head> </head> <body> <p style = "direction:rtl;"> This text will be rendered from right to left </p> </body> </html>
It will produce the following result −
Set the Space between Characters
The following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space..
<html> <head> </head> <body> <p style = "letter-spacing:5px;"> This text is having space between letters. </p> </body> </html>
It will produce the following result −
Set the Space between Words
The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space.
<html> <head> </head> <body> <p style = "word-spacing:5px;"> This text is having space between words. </p> </body> </html>
This will produce following result −
Set the Text Indent
The following example demonstrates how to indent the first line of a paragraph. Possible values are % or a number specifying indent space.
<html> <head> </head> <body> <p style = "text-indent:1cm;"> This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property. </p> </body> </html>
It will produce the following result −
Set the Text Alignment
The following example demonstrates how to align a text. Possible values are left, right, center, justify.
<html> <head> </head> <body> <p style = "text-align:right;"> This will be right aligned. </p> <p style = "text-align:center;"> This will be center aligned. </p> <p style = "text-align:left;"> This will be left aligned. </p> </body> </html>
This will produce following result −
Decorating the Text
The following example demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink.
<html> <head> </head> <body> <p style = "text-decoration:underline;"> This will be underlined </p> <p style = "text-decoration:line-through;"> This will be striked through. </p> <p style = "text-decoration:overline;"> This will have a over line. </p> <p style = "text-decoration:blink;"> This text will have blinking effect </p> </body> </html>
This will produce following result −
Set the Text Cases
The following example demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase.
<html> <head> </head> <body> <p style = "text-transform:capitalize;"> This will be capitalized </p> <p style = "text-transform:uppercase;"> This will be in uppercase </p> <p style = "text-transform:lowercase;"> This will be in lowercase </p> </body> </html>
This will produce following result −
Set the White Space between Text
The following example demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.
<html> <head> </head> <body> <p style = "white-space:pre;"> This text has a line break and the white-space pre setting tells the browser to honor it just like the HTML pre tag. </p> </body> </html>
This will produce following result −
Set the Text Shadow
The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.
<html> <head> </head> <body> <p style = "text-shadow:4px 4px 8px blue;"> If your browser supports the CSS text-shadow property, this text will have a blue shadow. </p> </body> </html>
It will produce the following result −
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.
The following CSS properties can be used to control lists. You can also set different values for the padding on each side of the box using the following properties −
The padding-bottom specifies the bottom padding of an element.
The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding properties.
Now, we will see how to use these properties with examples.
The padding-bottom Property
The padding-bottom property sets the bottom padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html> <head> </head> <body> <p style = "padding-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom padding </p> <p style = "padding-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom padding in percent </p> </body> </html>
This is a paragraph with a specified bottom padding
This is another paragraph with a specified bottom padding in perce
The padding-top Property
The padding-top property sets the top padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html> <head> </head> <body> <p style = "padding-top: 15px; border:1px solid black;"> This is a paragraph with a specified top padding </p> <p style = "padding-top: 5%; border:1px solid black;"> This is another paragraph with a specified top padding in percent </p> </body> </html>
It will produce the following result −
This is a paragraph with a specified top padding
This is another paragraph with a specified top padding in percent
The padding-left Property
The padding-left property sets the left padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html> <head> </head> <body> <p style = "padding-left: 15px; border:1px solid black;"> This is a paragraph with a specified left padding </p> <p style = "padding-left: 15%; border:1px solid black;"> This is another paragraph with a specified left padding in percent </p> </body> </html>
It will produce the following result −
This is a paragraph with a specified left padding
This is another paragraph with a specified left padding in percent
The padding-right Property
The padding-right property sets the right padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html> <head> </head> <body> <p style = "padding-right: 15px; border:1px solid black;"> This is a paragraph with a specified right padding </p> <p style = "padding-right: 5%; border:1px solid black;"> This is another paragraph with a specified right padding in percent </p> </body> </html>
It will produce the following result −
This is a paragraph with a specified right padding
This is another paragraph with a specified right padding in percent
The Padding Property
The padding property sets the left, right, top and bottom padding (space) of an element. This can take a value in terms of length of %.
Here is an example −
<html> <head> </head> <body> <p style = "padding: 15px; border:1px solid black;"> all four padding will be 15px </p> <p style = "padding:10px 2%; border:1px solid black;"> top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document. </p> <p style = "padding: 10px 2% 10px; border:1px solid black;"> top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px </p> <p style = "padding: 10px 2% 10px 10px; border:1px solid black;"> top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px </p> </body> </html>
It will produce the following result −
all four padding will be 15px
top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document.
top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px
top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px
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 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.
The following table shows the possible values for the cursor property −
| Sr.No. | Value & Description |
|---|---|
| 1 | auto Shape of the cursor depends on the context area it is over. For example an I over text, a hand over a link, and so on... |
| 2 | crosshair A crosshair or plus sign |
| 3 | default An arrow |
| 4 | pointer A pointing hand (in IE 4 this value is hand) |
| 5 | move The I bar |
| 6 | e-resize The cursor indicates that an edge of a box is to be moved right (east) |
| 7 | ne-resize The cursor indicates that an edge of a box is to be moved up and right (north/east) |
| 8 | nw-resize The cursor indicates that an edge of a box is to be moved up and left (north/west) |
| 9 | n-resize The cursor indicates that an edge of a box is to be moved up (north) |
| 10 | se-resize The cursor indicates that an edge of a box is to be moved down and right (south/east) |
| 11 | sw-resize The cursor indicates that an edge of a box is to be moved down and left (south/west) |
| 12 | s-resize The cursor indicates that an edge of a box is to be moved down (south) |
| 13 | w-resize The cursor indicates that an edge of a box is to be moved left (west) |
| 14 | text The I bar |
| 15 | wait An hour glass |
| 16 | help A question mark or balloon, ideal for use over help buttons |
| 17 | <url> The source of a cursor image file |
NOTE − You should try to use only these values to add helpful information for users, and in places, they would expect to see that cursor. For example, using the crosshair when someone hovers over a link can confuse visitors.
Here is an example −
<html> <head> </head> <body> <p>Move the mouse over the words to see the cursor change:</p> <div style = "cursor:auto">Auto</div> <div style = "cursor:crosshair">Crosshair</div> <div style = "cursor:default">Default</div> <div style = "cursor:pointer">Pointer</div> <div style = "cursor:move">Move</div> <div style = "cursor:e-resize">e-resize</div> <div style = "cursor:ne-resize">ne-resize</div> <div style = "cursor:nw-resize">nw-resize</div> <div style = "cursor:n-resize">n-resize</div> <div style = "cursor:se-resize">se-resize</div> <div style = "cursor:sw-resize">sw-resize</div> <div style = "cursor:s-resize">s-resize</div> <div style = "cursor:w-resize">w-resize</div> <div style = "cursor:text">text</div> <div style = "cursor:wait">wait</div> <div style = "cursor:help">help</div> </body> </html>
Move the mouse over the words to see the cursor change:
CSS - Dimension
You have seen the border that surrounds every box ie. element, the padding that can appear inside each box and the margin that can go around them. In this tutorial we will learn how we can change the dimensions of boxes.
We have the following properties that allow you to control the dimensions of a box.
The height property is used to set the height of a box.
The width property is used to set the width of a box.
The line-height property is used to set the height of a line of text.
The max-height property is used to set a maximum height that a box can be.
The min-height property is used to set the minimum height that a box can be.
The max-width property is used to set the maximum width that a box can be.
The min-width property is used to set the minimum width that a box can be.
The Height and Width Properties
The height and width properties allow you to set the height and width for boxes. They can take values of a length, a percentage, or the keyword auto.
Here is an example −
<html> <head> </head> <body> <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400pixels wide and 100 pixels high </p> </body> </html>
It will produce the following result −
The line-height Property
The line-height property allows you to increase the space between lines of text. The value of the line-height property can be a number, a length, or a percentage.
Here is an example −
<html> <head> </head> <body> <p style = "width:400px; height:100px; border:1px solid red; padding:5px; margin:10px; line-height:30px;"> This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels. This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels. </p> </body> </html>
It will produce the following result −
The max-height Property
The max-height property allows you to specify maximum height of a box. The value of the max-height property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html> <head> </head> <body> <p style = "width:400px; max-height:10px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px </p> <br> <br> <br> <img alt = "logo" src = "/css/images/logo.png" width = "195" height = "84" /> </body> </html>
This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px This paragraph is 400px wide and max height is 10px
The min-height Property
The min-height property allows you to specify minimum height of a box. The value of the min-height property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html> <head> </head> <body> <p style = "width:400px; min-height:200px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px This paragraph is 400px wide and min height is 200px </p> <img alt = "logo" src = "/css/images/logo.png" width = "95" height = "84" /> </body> </html>
It will produce the following result −
The max-width Property
The max-width property allows you to specify maximum width of a box. The value of the max-width property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html> <head> </head> <body> <p style = "max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px </p> <img alt = "logo" src = "/images/css.gif" width = "95" height = "84" /> </body> </html>
This will produce following result −
This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px
The min-width Property
The min-width property allows you to specify minimum width of a box. The value of the min-width property can be a number, a length, or a percentage.
NOTE − This property does not work in either Netscape 7 or IE 6.
Here is an example −
<html> <head> </head> <body> <p style = "min-width:400px; height:100px; border:1px solid red; padding:5px; margin:10px;"> This paragraph is 100px high and min width is 400px This paragraph is 100px high and min width is 400px </p> <img alt = "logo" src = "/css/images/css.gif" width = "95" height = "84" /> </body> </html>
Comments
Post a Comment