Scribd
Upload
24 views

Working With TextCSS

The document discusses various text formatting properties in CSS including: - Letter spacing to increase or decrease space between characters - Line height to specify space between lines - Text alignment to set horizontal alignment (left, right, center, justify) - Text decoration to add lines over, under, or through text - Text transformation to change text to uppercase, lowercase, or capitalize - Text indentation to specify indentation of the first line It also introduces CSS selectors to select and style HTML elements based on name, id, class, relationships between elements, states, parts of elements, and attributes.

Uploaded by

ssp979410
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views

Working With TextCSS

The document discusses various text formatting properties in CSS including: - Letter spacing to increase or decrease space between characters - Line height to specify space between lines - Text alignment to set horizontal alignment (left, right, center, justify) - Text decoration to add lines over, under, or through text - Text transformation to change text to uppercase, lowercase, or capitalize - Text indentation to specify indentation of the first line It also introduces CSS selectors to select and style HTML elements based on name, id, class, relationships between elements, states, parts of elements, and attributes.

Uploaded by

ssp979410
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Unit3 Lecture2: Working with text:

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

color: red;

</style>

</head>

<body>

<p>Every paragraph will be affected by the style.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Letter Spacing
The letter-spacing property is used to specify the space between the
characters in a text.

The following example demonstrates how to increase or decrease the space


between characters:

h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}

Line Height
The line-height property is used to specify the space between lines:

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

Text Alignment
The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-align: center;

h2 {

text-align: left;

h3 {

text-align: right;

}
</style>

</head>

<body>

<h1>Heading 1 (center)</h1>

<h2>Heading 2 (left)</h2>

<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>

</html>

Add a Decoration Line to Text


The text-decoration-line property is used to add a decoration line to text.

Tip: You can combine more than one value, like overline and underline to
display lines both over and under a text.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

text-decoration: overline;

h2 {
text-decoration: line-through;

h3 {

text-decoration: underline;

p.ex {

text-decoration: overline underline;

</style>

</head>

<body>

<h1>Overline text decoration</h1>

<h2>Line-through text decoration</h2>

<h3>Underline text decoration</h3>

<p class="ex">Overline and underline text decoration.</p>

<p><strong>Note:</strong> It is not recommended to underline text that


is not a link, as this often confuses

the reader.</p>

</body>

</html>

Text Transformation
The text-transform property is used to specify uppercase and lowercase
letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or
capitalize the first letter of each word:

<!DOCTYPE html>

<html>

<head>

<style>

p.uppercase {

text-transform: uppercase;

p.lowercase {

text-transform: lowercase;

p.capitalize {

text-transform: capitalize;

</style>

</head>

<body>

<h1>Using the text-transform property</h1>

<p class="uppercase">This text is transformed to uppercase.</p>

<p class="lowercase">This text is transformed to lowercase.</p>

<p class="capitalize">This text is capitalized.</p>

</body>

</html>
Text Indentation
The text-indent property is used to specify the indentation of the first line of
a text:

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-indent: 50px;

</style>

</head>

<body>

<h1>Using text-indent</h1>

<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>
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to
style.

We can divide CSS selectors into five categories:

 Simple selectors (select elements based on name, id, class)


 Combinator selectors (select elements based on a specific relationship
between them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 Attribute selectors (select elements based on an attribute or attribute
value)

The CSS element Selector


The element selector selects HTML elements based on the element name.

You might also like