CASCADING STYLE SHEET
Border Property:
Border: We can set the border for our HTML elements using the border property.
Syntax: border: width style color;
Eg: <div style="border: 1px solid black">Hello World</div>. Live example click here.
We can set the border for only the left or right or top or bottom or combine with these.
Eg: <div style="border-top: 1px solid black;border-bottom: 1px solid black">Hello World</div>. Live example click here.
Border-style: border-style sets the style for the border. See the various styles of the border click here. we can set the top, left, right, bottom property for this also See demo.
Eg: <div style="border-style: double">Hello World</div>.
Border-collapse: This property sets whether the table borders are collapsed and look like a single border. It has also the three values.
- inherit.
- collapse.
- separate.
See difference in here without collapse and with collapse.
Border-width: we can set the width of the border using this property. This property also supports the top, right, left, bottom property.
Eg: <div style="border-style: solid; border-width: 5px;">Hello World</div>
Live example click here. This has the default property value also. They are
- thin
- thick
- medium
Border-color: we can set the color for the border. These property also supports the top, left, right, bottom and we have use the colors as HTML colors.
Eg: <div style="border-style: double;border-width: 5px;border-color: red;">Hello World</div>
Live Example click here.
Border-radius: This property is used to add the rounded border our HTML elements. We can give the values for radius as pixel, percentage, em. We can give the border-radius for only the top-left, top-right, bottom-left, bottom-right.
Eg1: <div style="border: 5px solid black; border-radius: 6px;">Hello World</div>
Live Example click here.
Eg2: <div style="border: 5px solid black; border-radius: 10px 8px 4px 1px;">Hello World</div>.
In the above example border-radius can differ each border. It sets the border in clockwise rotation i.e., top-left, top-right, bottom-right, bottom-left.
Live Example click here.
Border-spacing: we can give space between the each borders in table. This can be done with the help of this property.
Click here to see example. In these example we set the spacing for both the horizontal and vertical. We can also sets the various spacing for horizontal and vertical. See Demo, In here first value represents the vertical spacing and second one is horizontal spacing.
Border-image: we can also sets the border as a image. Example.
Bottom:
This property is used to set the elements at the bottom of the container. Its place your element to the bottom edge. Before using this property we can set that element position as absolute or relative, without setting the position it has no effect click here.
Eg: bottom: 2px; Live Example click here.Box Shadow:
This property shows the shadow for the HTML elements.
Syntax: box-shadow: h-shadow v-shadow blur spread color inset;
Eg: box-shadow: 10px 10px 5px #868686. Live Example click here.Color:
This property is used to set the font color.
Syntax: color: colorvalues;
Eg: color: red; Live Example click here.Cursor:
This property is used to change the style of the cursor. There are different values for the cursor. To see the example of all cursor click below.
- auto
- default
- pointer
- text
- crosshair
- move
- help
- no-crop
- not-allowed
- none
- all-scroll
- ne-resize
- nw-resize
- n-resize
- se-resize
- sw-resize
- s-resize
- w-resize
- ew-resize
- ns-resize
- nesw-resize
- nwse-resize
- col-resize
- row-resize
- cell
- context-menu
- progress
- vertical-text
- wait
- copy
- alias
- none
Eg: cursor: pointer; Live example click here.Clear:
This property does not allow the floating element on its elements, its work only if the floating elements are presented. See example below to get the complete understand about clear property. These has the following values.
- left
- right
- both
- none
- inherit
Eg: clear: both; Live Example click here.Display:
This property tells how the HTML elements can be displayed in the browser. It has the various values.
- none
- inline
- inline-block
- list-item
- table
- inline-table
- table-row
- table-cell
- table-caption
- inherit
- block.
Eg: display: inline; Live Example click here.Direction:
This property is used to specify the text direction from where it starts. It's also like the alignment of the paragraph. It has the two property values ltr(left to right), rtl (right to left);
Eg: direction: rtl; Live Example click here.Font:
This property is used to set the font family, size, style, font-variant. It sets all the other font property to one declaration
Eg: font: italic small-caps bold 20px TimesNewRoman; Live Example click here.
Font-size: Its used to set the font size for the text. We can set the size of the font in pixel, percentage, em. It has the various values they are
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
Eg: font-size: 20px; Live Example click here.
Font-family: Its used to set the various font for the text and it takes system default font to set. we can give the values separated with commas, like this it tries for the first font and its not available then it tries for the next font.
Eg: font-family: arial, "Times New Roman"; Live Example click here.
In the above example, it takes the system default font. If we want to display the non-system fonts then we use the "@font-face"
Eg:
@font-face{
font-family: fontname; src: url('overwrite.ttf') format ('truetype');
}
Font-style: Its used to set the style for the font. It has the following values.
- normal
- italic
- oblique
- inherit.
Eg: font-style: italic; Live Example click here.
Font-weight: This property shows the text can be display with the specified thickness or thinness. It has the following property value
- normal
- bold
- bolder
- lighter
- 100 to 900.
- inherit
Eg: font-weight: bold; Live Example click here.Float:
This property used to float the elements in the HTML page. Its ignored when the position is absolute. It has the following values
- left
- right
- none
- inherit
Eg: float: left. Live Example click here.Height:
Its used to set the height for the elements. It accepts the value as pixel, percentage, em. and also we give the value as auto.
Eg: height: 400px; Live Example click here.Left:
Its used to set the elements position left. It response only when the element is positioned as absolute or relative.It also accept the value as pixel, percentage. See the below example to get a clear understand of left property.
Eg: left: 50%; Live Example click here.Letter Spacing:
This property is used to increase or decrease the space between the characters in the text.
Eg: letter-spacing: 5px; Live Example click here.Line Height:
Its puts the space between the each lines. i.e., heights between the two lines. This property is applied only when the text exceeds more than one line.
Eg: line-height: 30px; Live Example click here.List style:
This is used to style the listed item. It has the following values
- none
- disc
- decimal
- circle
- square
- lower-roman
- upper-roman
- lower-greek
- lower-alpha
- upper-alpha
Eg: list-style: disc; Live Example click here.
List style image: We can also set image as a bulleted in HTML using this property.
Eg: list-style-image: url("imageurl.png") ; Live Example click here.
List style position: We can set the position of the list by inside or outside.
Eg: list-style-position: inside; Live Example click here.
List style type: This property is same as the list style in that property we can give all the other list properties with the single declaration in here we can specify only the type of style for the list
Eg: list-style-type: disc; Live Example click here.Margin:
Margin property is used to set the elements spacing between the margin, its supports the top, left, right, bottom property also and we can give the values as pixels, percentage, cm, em.
Eg1: margin: 4px; Live Example click here. In this example it sets the margin for all the four directions. we can set the margin for them separately.
Eg2: margin-left: 4px; (or) margin: 3px 2px 10px 2px; Live example click here. In here the margins can be set in the clock wise direction i.e., top, right, bottom, left. we can also specify this like Eg3: margin: 3px 10px Live Example click here. In here it set fir vertical and then horizontal.
Min Height:
This property sets the minimum height for the element. If your height property value is less than the min-height property value then it ignores the height value.
Eg: min-height: 40px; Live Example click here.Max Height:
This property sets the maximum height for the element. It also ignores the height property value if the value is greater than the maximum height value.
Eg: max-height: 50px; Live Example click here.Min Width:
This property is same as the min-height property its sets the minimum width for the element.
Eg: min-width: 60px; Live Example click here.Max Width:
This property sets the maximum width for the element. Its also same as the max-height property.
Eg: max-width: 150px; Live Example click here.Opacity:
This property sets the alpha level for the element i.e., opacity as we studied previously in the background-color property. This has values from 0.0 to 1.0. We can hide the element by setting the opacity level as 0.
Eg: opacity: 0.4; Live Example click here.Overflow:
This property says when the content overflow from the element what would be happen. It has the following values.
- scroll
- hidden
- auto
- visible
- inherit
Eg: overflow: scroll; Live Example click here.
Overflow-x: This property says what would be happen when the content overflow horizontally.
Eg: overflow-x: hidden. Live Example click here.
Overflow-y: This property says what happen when the content overflow vertically.
Eg: overflow-y: auto. Live Example click here.Padding:
This property sets the spacing between the border of the element from inside. It is opposite to the margin property. In margin property it gives the space outside from the border. In here it gives inside from the border. It also supports for left, right, bottom, top and we can give the values as pixel, cm, em, percentage.
Eg1: padding: 5px; Live Example click here.
Eg2: padding-top: 20px; Live Example click here.
Eg3: padding: 10px 20px 10px 5px; Live Example click here.Pointer Events:
This property is used to disable the events going to run. This property is more useful while instead of removeListening in Javascript. We can set the events back by setting the property value as auto
Eg: pointer-events: none; Live Example click here.Position:
This property is used to set the elements positioning in the HTML page. It has the following values.
- absolute
- relative
- inherit
- fixed
- static
Eg1: position: absolute. Live Example click here. Using this property value we can move our HTML element in any of the position. It means the element is taken completely out of the normal flow of the page layout.
Eg2: position: relative. Live Example click here. The relative position is take the rest of the space where the other elements can be occupied.
Eg3: position: fixed. Live Example click here. In the fixed positioned element cannot move from the occupied space. This type of positioning is mostly used for header. In these live example, the fixed position element cannot be scrolled.Right:
This property sets the elements can be positioned from the right side. We can give values as pixel, percentage, cm, em. This property works only when that elements position is absolute or relative
Eg: right: 10px; Live Example click here.Top:
This property is also same as the right property inhere we sets the elements position from the top of the document. This property is also works when the elements position is absolute or relative.
Eg: top: 20px; Live Example click here.Text align:
This property is used to align the text of the element. It has following values
- center
- justify
- left
- right
- start
- end
- inherit
Eg: text-align: center. Live Example click here.Text Decoration:
This property sets the style or decoration for the text in the element. It has the following values
- none
- underline
- overline
- line-through
- inherit
Eg: text-decoration: underline; Live Example click here.Text indent:
This property specifies the indentation of the first line of paragraph.
Eg: text-indent: 50px; Live Example click here.Text overflow:
This property specifies what happens when the text overflow from the container. It has the values of ellipsis, clip,
Eg: text-overflow: ellipsis. Live Example click here.Text shadow:
This property applies the shadow to the text in the element. It also same as the box-shadow. we can give the values as pixel.
Syntax: text-shadow: hshadow vshadow blur color;
Eg: text-shadow: 3px 3px 5px red; Live Example click here.Text transform:
This property can change the case of the text i.e., it can convert lower case letter upper case. It has the following values.
- capitalize
- uppercase
- lowercase
- none
Eg: text-transform: uppercase; Live Example click here.Continue in part3.
No comments:
Post a Comment