0% found this document useful (0 votes)
6 views25 pages

CSS Class Day 3

Learn CSS with this pdf. Easy to understand.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
6 views25 pages

CSS Class Day 3

Learn CSS with this pdf. Easy to understand.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

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

You might also like