Welcome again, in part 2 we will discuss following properties.
 |
| CSS Training in Malad Mumbai |
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight
height
justify-content
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-top
margin-bottom
margin-right
margin-left
max-height
max-width
min-height
min-width
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
Properties Explanation
font : this is group properties of following child properties of font.
font-family
font-size
font-stretch
font-style
font-variant
font-weight
Syntax:
font: [font-style] [font-variant] [font-weight] [font-size] [font-family]
Example:
font: 10px courier, sans-serif;
font-family: To set the group/family of font for an element / html page. Benefit of using font-family properties is if one font is fail it will try next font so on…
That why in font-family we write group of fonts.
Syntax:
font-family: [fontname,fontname,fontname]
Example:
font-family: verdana,arial,courier;
font-size: To set the font size of element / html page. We can provide font size value in following basis:
small
medium
large
smaller
larger
%
???px
Syntax:
font-size: [value]
Example:
font-size: 12px;
font-size: small;
font-stretch: This help to display text wider(gap of each character) or narrow (reduce the gap of each character).
Syntax:
font-stretch: [condensed / normal / expanded]
Example:
font-stretch: condensed;
font-stretch: small;
font-style: To set the text style. This property having following predefined value options.
Syntax:
font-style: [normal / italic / initial ]
Example:
font-style: normal;
font-variant: To set the text case type.
Syntax:
font-variant: [normal / small-caps / initial]
small-caps = To set small capital letter but first character of paragraph will big size than rest of characters.
Example:
font-variant: small-caps;
font-weight: To set the bold or bold by values.
Syntax:
font-weight: [normal / bold / bolder / ??? /initial]
??? = Assign the value of weight.
Example:
font-weight: bolder;
font-weight: 200;
height: To set the height of element.
Syntax:
height: [auto / ???px / ???% // initial]
??? = Assign the value of weight.
Example:
height: auto;
height: 200px;
height: 20%;
justify-content: To set the alignment of element. By default its having some predefined values.
Syntax:
justify-content: [flex-start / flex-end / center / space-between / space-around / initial]
Example:
justify-content: flex-start; (set element at the starting of the container.)
justify-content: flex-end; (set element at the bottom of the container.)
[Rest of properties values are self-explanatory.]
left: To set element position from left side.
Syntax:
left: [auto / ???px / ???% / initial]
??? = Assign the value from left.
Example:
left: auto;
left: 20px;
letter-spacing: To set space between characters.
Syntax:
letter-spacing: [normal / ??px / initial]
??? = Assign the value of letter spacing.
Example:
letter-spacing: 10px;
line-height: To set the height of line.
Syntax:
line-height: [normal / ??? / initial]
??? = Assign the value of height in line value.
Example:
line-height: 2; [ This will leave two lines gap in between lines.]
list-style: To set the list style. This is group property of following sub properties.
list-style-image, list-style-position,list-style-type.
Syntax:
list-style: [list-style-type / list-style-position / list-style-image]
Example:
list-style: square; [ This will display square before list items content.]
list-style-image: To display fix image before list items.
Syntax:
list-style-image: [none / url / initial]
url = path of image.
Example:
list-style-image: url(“pointer.jpg”);
[This will display pointer image before list item content.]
list-style-position: To set the position of list items.
Syntax:
list-style-position: [inside / outside / initial]
Example:
list-style-position: inside
list-style-type: To set the list pointer (bullet / numbering).
Syntax:
list-style-type: [circle / square / disc / upper-roman / lower-roman / upper-alpha / lower-alpha / initial ]
Example:
list-style-type: square;
margin: This is group properties of margin’s sub properties.
margin-to,margin-bottom,margin-right,margin-left
Syntax:
margin: [margin-top, margin-right, margin-bottom, margin-left
Note: Write group properties in clock moving direction.
Example:
Margin: 10px 20px 10px 20px;
margin-top: To set top margin of element.
Syntax:
margin-top: [auto / ??px / ??% / initial]
Example:
margin-top: 10px;
margin-bottom: To set bottom margin of element.
Syntax:
margin-bottom: [auto / ??px / ??% / initial]
Example:
margin-bottom: 10px;
margin-right: To set right side margin of element.
Syntax:
margin-right: [auto / ??px / ??% / initial]
Example:
margin-right: 10px;
margin-left: To set left side margin of element.
Syntax:
margin-right: [auto / ??px / ??% / initial]
Example:
margin-right: 10px;
max-height: To set maximum height of element.
Syntax:
max-height: [ ??px / ??% / initial]
Example:
max-height: 10px;
max-width: To set maximum width of element.
Syntax:
max-width: [ ??px / ??% / initial]
Example:
max-width: 10px;
min-height: To set minimum height of element.
Syntax:
min-height: [ ??px / ??% / initial]
Example:
min-height: 10px;
min-width: To set minimum width of element.
Syntax:
min-width: [ ??px / ??% / initial]
Example:
min-width: 10px;
opacity: To set opacity level of element.
Syntax:
opacity: [ ?? / initial]
?? = 0.0 for full transparent of element
TO
1.0 for full opacity of element
Example:
opacity: 0.5;
order: To set the order / sequence of element. Rule of using order property is use order property to child element and parent element should declare display: flex property.
Syntax:
order: [ ?? / initial]
?? = set the serial number of element.
Example:
order: 2;
outline: This is group properties of all outline sub properties.
outline-color,outline-style,outline-width
Syntax:
outline: [outline-width outline-style outline-color]
Example:
outline:
outline-color: To set color of outline.
Syntax:
outline-color: [ color code];
Example:
outline-color: red;
outline-style: To set style of outline.
Syntax:
outline-style: [ none / dotted / dashed / solid / double ]
Example:
outline-style: dotted;
outline-width: To set width of outline.
Syntax:
outline-width: [ medium / thin / thick / ???px ]
Example:
outline-width: thin;
overflow: To set content overflow behaviour of element. If content not set in given width and height of element we can set overflow property.
Syntax:
hidden : Content which not come within width and height rest of content will be invisible.
scroll : Content which not come within width and height rest of content will be visible with help of scroll bar.
auto : If content will not come
Example:
overflow: auto;
HTML & CSS Code:
<html>
<head>
<title>CSS Tutorial Series 02</title>
<style>
#fontprop {
font: 16px verdana, courier;
}
#fontsubprop {
font-family: arial, courier;
font-size: 16px;
font-weight: bold;
}
#fontstretch {
font-family: arial, courier;
font-stretch: expanded;
font-style: italic;
font-variant: small-caps;
}
#img1 {
height: 200px;
width: 200px;
}
#img2 {
height: 100px;
width: 100px;
}
#justifyprop1 {
display: flex;
background-color: grey;
justify-content: flex-start;
}
#justifyprop2 {
display: flex;
background-color: lightblue;
justify-content: flex-end;
}
#leftprop {
position: relative;
left: 130px;
width: 300px;
border: 5px solid black;
}
.divbox {
border: 5px solid orange;
}
#letterspace {
letter-spacing: 7px;
}
#linehght {
line-height: 4;
}
#listimage {
list-style-image: url(images/bullets.png);
list-style-position: inside;
}
#listimage2 {
list-style-image: url(images/bullets.png);
list-style-position: outside;
}
#listtype {
list-style-type: square;
}
#marginprop {
margin: 100px 25px 50px 25px;
}
#margineach {
margin-top: 70px;
margin-right: 40px;
margin-bottom: 100px;
margin-left: 50px;
}
#maxheightwidth {
max-width: 40px;
max-height: 40px;
}
#minheightwidth {
min-width: 20px;
min-height: 20px;
}
#img3 {
height: 100px;
width: 100px;
opacity: 0.3;
}
#img4 {
height: 100px;
width: 100px;
opacity: 0.7;
}
#divcont {
display: flex;
}
#namediv {
order: 3;
border: 5px solid black;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
#phonediv {
order: 1;
border: 5px solid black;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
#hobbiesdiv {
order: 4;
border: 5px solid black;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
#addressdiv {
order: 2;
border: 5px solid black;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
}
#outlineprop {
outline-style: dotted;
outline-color: blue;
outline-width: 12px;
}
#overflowprop1 {
overflow: scroll;
width: 250px;
height: 100px;
}
#overflowprop2 {
overflow: hidden;
width: 100px;
height: 100px;
}
#overflowprop3 {
overflow: visible;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Tutorial Serial 02</h1>
<Br>
<Br>
<div id="fontprop" class="divbox">
<b><u>Div Assign #fontprop css</u></b>
<br>
<p>lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox </p>
</div>
<br>
<br>
<div id="fontsubprop" class="divbox">
<b><u>Div Assign #fontsubprop css </u></b>
<br>
<p>lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox </p>
<br>
<br>
<b><u>Paragraph Assign #fontstretch css</u></b>
<br>
<p id="fontstretch">lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox </p>
<br>
<br>
</div>
<Br>
<Br>
<div class="divbox">
<img id="img1" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png" /> image1 tag assign #img1 css
</div>
<Br>
<Br>
<div class="divbox">
<img id="img2" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png" /> image2 tag assign #img2 css
</div>
<Br>
<Br>
<Br>
<div id="div1" class="divbox">
<b>properties used: justify-content --> id : #justifyprop1 , #justifyprop2</b>
<ul>
<li id="justifyprop1">Testig Testing </li>
<li id="justifyprop2">Testing Testing </li>
</ul>
</div>
<br>
<br>
<div id="leftprop">
<b>properties used: left --> id: #leftprop</b>
<br> lazy dog jumps lazy dog jumps
</div>
<br>
<br>
<div class="divbox">
<b>properties used: letter-spacing --> id: #letterspace</b>
<p id="letterspace">lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox </p>
</div>
<br>
<br>
<div class="divbox">
<b>properties used: line-height --> id : #linehght</b>
<p id="linehght">lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox, lazy dog jumps over brown fox </p>
</div>
<br>
<br>
<div class="divbox">
<b>properties used: list-style-image --> id= listimage</b>
<p>inside</p>
<ul id="listimage">
<li>My List Item1</li>
<li>My List Item2</li>
<li>My List Item3</li>
<li>My List Item4</li>
<li>My List Item5</li>
</ul>
</div>
<br>
<br>
<div class="divbox">
<b>properties used: list-style-image --> id= listimage2</b>
<p>outside</p>
<ul id="listimage2">
<li>My List 2 Item1</li>
<li>My List 2 Item2</li>
<li>My List 2 Item3</li>
<li>My List 2 Item4</li>
<li>My List 2 Item5</li>
</ul>
</div>
<br>
<br>
<div class="divbox">
<b>properties used: list-style-type --> id= listtype</b>
<ul id="listtype">
<li>My List 3 Item1</li>
<li>My List 3 Item2</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<div class="divbox">
<b>properties used: margin -->id= marginprop</b>
<ul id="marginprop">
<li>My List 3 Item1</li>
<li>My List 3 Item2</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<div class="divbox">
<b>properties used: margin-top, margin-bottom, margin-left, margin-right --> id= margineach</b>
<ul id="margineach">
<li>My List 3 Item1</li>
<li>My List 3 Item2</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<div class="divbox">
<b>properties used: max-height, max-width --> id= maxheightwidth</b>
<ul id="maxheightwidth">
<li>My List 3 Item1</li>
<li>My List 3 Item2</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<div class="divbox">
<b>properties used: min-height, min-width --> id= minheightwidth</b>
<ul id="minheightwidth">
<li>My List 3 Item1</li>
<li>My List 3 Item2</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<br>
<div class="divbox">
<img id="img3" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png" /> image3 tag for opacity properties example opacity value 0.3
</div>
<Br>
<Br>
<Br>
<br>
<br>
<br>
<div class="divbox">
<img id="img4" src="http://csharpcorner.mindcrackerinc.netdna-cdn.com/App_Themes/CSharp/Images/SiteLogo.png" /> image4 tag for opacity properties example opacity value 0.7
</div>
<Br>
<Br>
<Br>
<div class="divbox">
<b>Inside divcont DIV there are four div : 1.namediv, 2.phonediv, 3.hobbiesdiv, 4.addressdiv </b>
<br>
<div id="divcont">
<div id="namediv">
namediv in coding placed in number 1
<Br>
</div>
<div id="phonediv">
phonediv in coding placed in number 2
<br>
</div>
<div id="hobbiesdiv">
hobbiesdiv in coding placed in number 3
<br>
</div>
<div id="addressdiv">
addressdivdiv in coding placed in number 4
<br>
</div>
</div>
</div>
<br>
<br>
<br>
<div class="divbox">
<b>properties used: outline-color, outline-style, outline-width --> id= outlineprop</b>
<ul id="outlineprop">
<li>My List 3 Item1</li>
<li>My List 3 Item2</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="divbox">
<b>properties used: overflow = scroll --> id= overflowprop1</b>
<ul id="overflowprop1">
<li>My List 3 Item1</li>
<li>My List 3 Item2</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<br>
<div class="divbox">
<b>properties used: overflow = hidden --> id= overflowprop2</b>
<ul id="overflowprop2">
<li>My List 3 Item1</li>
<li>My List 3 Item2</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<br>
<div class="divbox">
<b>properties used: overflow - visible --> id= overflowprop3</b>
<ul id="overflowprop3">
<li>My List 3 Item1</li>
<li>My List 3 Item3</li>
<li>My List 3 Item4</li>
<li>My List 3 Item5</li>
</ul>
</div>
<br>
<br>
<br>
</body>
</html>
