intro to website development ( text properties and margins )
TRANSCRIPT
![Page 1: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/1.jpg)
![Page 2: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/2.jpg)
A B D U L B A S I T KAYA N I B - 1 6 7 2 9KA L E E M WA H E E D B - 1 6 8 5 7
PRESENTATIONMEMBERS
![Page 3: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/3.jpg)
TOPIC
•TEXT Properties • Margin Properties
![Page 4: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/4.jpg)
TEXT PROPERTIES
• Text Color.• Text Alignment. • Text decoration.• Text Transformation.• Text Indentation.• Text Spacing.
![Page 5: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/5.jpg)
TEXT COLOR
The color property is used to set the color of the text.With CSS, a color is most often specified by:• a HEX value - like "#ff0000"• an RGB value - like "rgb(255,0,0)"• a color name - like "red"
![Page 6: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/6.jpg)
<!DOCTYPE html><html><head><style>body {color:red;}h1 {color:#00ff00;}p.ex {color:rgb(0,0,255);}</style></head>
<body><h1>This is heading 1</h1><p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p><p class="ex">This is a paragraph with class="ex". This text is blue.</p></body></html>
TEXT COLOR
![Page 7: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/7.jpg)
RESULT
![Page 8: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/8.jpg)
<html><head><style>h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}</style></head><body><h1>CSS text-align Example</h1><p class="date">May, 2009</p><p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p><p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p></body></html>
Text Alignment
![Page 9: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/9.jpg)
RESULT
![Page 10: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/10.jpg)
<!DOCTYPE html><html><head><style>h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;}h4 {text-decoration:blink;}</style></head>
<body><h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p></body>
</html>
Text decoration
![Page 11: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/11.jpg)
Result
![Page 12: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/12.jpg)
<!DOCTYPE html><html><head><style>p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}</style></head>
<body><p class="uppercase">This is some text.</p><p class="lowercase">This is some text.</p><p class="capitalize">This is some text.</p></body></html>
Text Transformation
![Page 13: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/13.jpg)
Result
![Page 14: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/14.jpg)
<!DOCTYPE html><html><head><style>p {text-indent:100px;}</style></head><body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body></html>
Text Indentation
![Page 15: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/15.jpg)
Result
![Page 16: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/16.jpg)
<!DOCTYPE html><html><head><style>h1 {letter-spacing:2px;}h2 {letter-spacing:-3px;}</style></head>
<body><h1>This is heading 1</h1><h2>This is heading 2</h2></body></html>
TEXT SPACING
![Page 17: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/17.jpg)
Result
![Page 18: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/18.jpg)
<!DOCTYPE html><html><head><style>p{ word-spacing:30px;}</style></head><body>
<p>This is some text. This is some text.</p>
</body></html>
Word Spacing
![Page 19: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/19.jpg)
Result
![Page 20: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/20.jpg)
MARGIN PROPERTIES
The margin shorthand property sets all the margin properties in one declaration. This property can have from one to four values.
Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the containing element
inherit Specifies that the margin should be inherited from the parent element
![Page 21: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/21.jpg)
•Margin Bottom•Margin Left•Margin Right•Margin Top
Margin Properties
![Page 22: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/22.jpg)
<!DOCTYPE html><html><head><style>p.ex1 {margin-bottom:2cm}</style></head>
<body>
<p>A paragraph with no margins specified.</p><p class="ex1">A paragraph with a 2cm bottom margin.</p><p>A paragraph with no margins specified.</p>
</body></html>
MARGIN BOTTOM
![Page 23: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/23.jpg)
MARGIN BOTTOM
![Page 24: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/24.jpg)
<!DOCTYPE html><html><head><style>p.ex1 {margin-left:2cm;}</style></head>
<body>
<p>A paragraph with no margins specified.</p><p class="ex1">A paragraph with a 2cm left margin.</p><p>A paragraph with no margins specified.</p>
</body></html>
MARGIN LEFT
![Page 25: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/25.jpg)
MARGIN LEFT
![Page 26: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/26.jpg)
<!DOCTYPE html><html><head><style>p.ex1 {margin-right:4cm}</style></head>
<body>
<p>A paragraph with no margins specified. A paragraph with no margins specified. A paragraph with no margins specified.</p><p class="ex1">A paragraph with a 4cm right margin. A paragraph with a 4cm right margin. A paragraph with a 4cm right margin.</p>
</body></html>
MARGIN RIGHT
![Page 27: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/27.jpg)
MARGIN RIGHT
![Page 28: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/28.jpg)
<!DOCTYPE html><html><head><style>p.ex1 {margin-top:2cm;}</style></head>
<body>
<p>A paragraph with no margins specified.</p><p class="ex1">A paragraph with a 2cm top margin.</p><p>A paragraph with no margins specified.</p>
</body></html>
MARGIN TOP
![Page 29: Intro to WebSite Development ( Text properties and margins )](https://reader035.vdocument.in/reader035/viewer/2022062704/555e5a29d8b42a8e4c8b5305/html5/thumbnails/29.jpg)
MARGIN TOP