CSS Class Day 3
# CSS Notes
CSS Properties
Index
1 Outline
2 Text
Akash Technolabs www.akashsir.com
CSS Outline
CSS outline
The CSS outline properties specify the style, color, and width of an outline.
Akash Technolabs www.akashsir.com
outline-style
The outline-style property specifies the style of the outline.
div {
border: 1px solid red;
padding: 15px;
outline-style: dotted;
}
<div>This is div tag has border and outline ....</div>
Akash Technolabs www.akashsir.com
outline-color
The outline-color property is used to set the color of the outline.
div {
border: 1px solid red;
padding: 15px;
outline-style: dotted;
outline-color: chocolate;
}
<div>This is div tag has border and outline ....</div>
Akash Technolabs www.akashsir.com
outline-width
The outline-width property specifies the width of the outline.
div {
border: 5px solid red;
padding: 15px;
outline-style: solid;
outline-color: chocolate;
outline-width: 10px;
}
<div>This is div tag has border and outline ....</div>
Akash Technolabs www.akashsir.com
Shorthand property
p{
outline: 1px dotted red;
// width – style - color
}
Akash Technolabs www.akashsir.com
outline-offset
The outline-offset property adds space between an outline and the edge or border of an
element.
div {
width: 500px;
height: 200px;
margin-top: 50px;
margin-left: 30px;
padding: 15px;
border: 5px solid red;
outline: 10px solid chocolate;
outline-offset: 15px;
}
<div>This is div tag has border and outline ....</div>
Akash Technolabs www.akashsir.com
TEXT FORMATTING
properties
Text
Some of the TEXT FORMATTING properties
Text-color
Text-alignment
Text-decoration
Text-transformation
Text-indentation
Letter spacing
Word spacing
Line height
Text-shadow
Akash Technolabs www.akashsir.com
Text Color
The color property is used to set the color of the text.
div
{
color: red;
}
<div>This is div tag ....</div>
Akash Technolabs www.akashsir.com
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
div {
color: red;
text-align: center;
}
<div>This is div tag ....</div>
Akash Technolabs www.akashsir.com
Text Decoration
Text decoration is used to add or remove decorations from the text.
Text decoration can be underline, overline, line-through or none.
div {
Text-decoration: underline;
}
<div>This is div tag ....</div>
Akash Technolabs www.akashsir.com
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
h1 { text-transform: uppercase; }
h2 { text-transform: lowercase; }
h3 { text-transform: capitalize; }
<h1>This is uppercase text</h1>
<h2>This is uppercase text</h2>
<h3>This is uppercase text</h3>
Akash Technolabs www.akashsir.com
Text Indentation
Text indentation property is used to indent the first line of the paragraph.
The size can be in px, cm, pt.
p{
text-indent: 80px;
}
<p>This is p tag...</p>
<div>This is div tag ....</div>
Akash Technolabs www.akashsir.com
Line Height
This property is used to set the space between the lines.
p{
line-height: 40px;
}
<p>This is p tag...</p>
<p>This is p tag...</p>
Akash Technolabs www.akashsir.com
letter-spacing
The letter-spacing property is used to specify the space between the characters in a text.
div {
color: red;
font-size: 25px;
letter-spacing: 5px;
}
<div>This is div tag ....</div>
Akash Technolabs www.akashsir.com
word-spacing
The word-spacing property is used to specify the space between the words in a text.
div {
color: red;
font-size: 25px;
word-spacing: 8px;
}
<div>This is div tag ....</div>
Akash Technolabs www.akashsir.com
text-shadow
The text-shadow property adds shadow to text.
You can specify the horizontal size, vertical size, blur effect size and shadow color for the
text.
div {
color: red;
font-size: 25px;
text-shadow: 5px 5px 5px yellow;
}
<div>This is div tag ....</div>
Akash Technolabs www.akashsir.com
Get Exclusive
Video Tutorials
www.aptutorials.com
https://www.youtube.com/user/Akashtips
www.akashsir.com
Rating Us Now
Just Dial
https://www.justdial.com/Ahmedabad/Akash-Technolabs-
Navrangpura-Bus-Stop-Navrangpura/079PXX79-XX79-
170615221520-S5C4_BZDET
Sulekha
https://www.sulekha.com/akash-technolabs-navrangpura-
ahmedabad-contact-address/ahmedabad
Connect With Me
# Social Info
Akash.padhiyar
Akashpadhiyar
Akash Padhiyar
#AkashSir Akash_padhiyar
+91 99786-21654
www.akashsir.com
www.akashtechnolabs.com #Akashpadhiyar
www.akashpadhiyar.com #aptutorials
www.aptutorials.com
