Scribd
Upload
10 views

The CSS Font

The document discusses various CSS properties including font-family, font-size, letter-spacing, text-transform, and text-align. It describes what each property controls, possible values for each property, and examples of syntax.

Uploaded by

rcsup91
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

The CSS Font

The document discusses various CSS properties including font-family, font-size, letter-spacing, text-transform, and text-align. It describes what each property controls, possible values for each property, and examples of syntax.

Uploaded by

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

The CSS font-family Property :

 The font-family property in CSS is used to specify the typeface of a text.


 If the font name has more than one word, such as "Times New Roman,"
quotation marks must be used.
 Example: The following code applies a font family to a paragraph using class
ids:I

Code :

Output :
The CSS font-size Property :

 The font-size attribute controls a font's size.


 It has an impact on the text size of an element. Every element can use it, and its
default value is medium. This attribute has values like xx-small, small, x-small,
etc.
 Font-size can also be specified in pixels (which sets the font to a fixed size in px)
and percentages (which sets the font to a percentage of the font size of the
parent element).
 (| signifies OR in syntax).
 Available font-sizes are x-small,xx-small, small,large, x-large, xx-large.

o Syntax :

font-size : 20px
Code:

Output :
font-variant property in CSS

 The font-variant property determines if a text should be shown in small capitals or


not.
 Every lowercase character is changed into uppercase characters by using a
small-caps font. But compared to the text's original capital characters, the
converted uppercase letters have a smaller font size.

o Syntax for font-variant :

font-variant: value

Values :

1. normal : It shows text in normal font. Font-variant is set to normal by default.


2. small-caps : It displays fonts in small caps.
Code:

Output :

CSS letter-spacing Property :

Character spacing in a text can be altered via the letter-spacing property.

o Syntax :

letter-spacing: value;

Values :

 normal : defines the standard character spacing. Normal value is the default
value for letter-spacing
 length :establishes a length that is used as the character spacing (negative
values are also allowed).
 initial : returns this property's default setting.

Different ways to add CSS into your document :

Inline style CSS : By using the inline CSS approach, CSS can be applied to a single
element. The "style" attribute of the relevant element defines inline styles.

Example :

<p style="color: yellow"> Changes the font color to yellow for this paragraph.</p>

Only the <p> element's font color will be altered by the code previously mentioned.

Pros :

1. Due to potential spam several email clients DO NOT permit the usage of
external.css referencing. Embedding could be beneficial in such cases.
2. Saves time by eliminating the need to go back and forth between the HTML file
and the CSS document for quick updates, prototyping, and easy tests.
3. As with the external style, you don't need to generate and upload a separate
document.

Cons :

1. Adding the code to the HTML file can make the page larger and take longer to
load.
2. Every HTML element must have a CSS rule added to it, which takes time and
complicates the HTML structure.

When to use Inline style CSS :

1. When you need one-time formatting for a particular tag, utilize inline style CSS.
2. You wish to alter the default CSS for a particular tag, which was specified
externally or at the top of the file.

Embedded/Internal CSS : It is applied to give a single document its unique style.


Embedded CSS is the process of adding CSS rules to an HTML document using the
<style> element.

Example :
<style> p{color:yellow} </style>

Advantages :

1. You don't need to upload several files because the code will only be added to the
one HTML file.

Disadvantages :

1. Since most webmail clients remove the head-tags, certain email clients do not
permit styles in the [head].
2. The size and loading time of the page may increase by adding the code to the
HTML content.

When to use Internal style CSS :

1. If the styles are only required for one file and you don't expect them ever
changing to apply to other pages, you can use internal style CSS to place your
css at the top of the file.

External CSS :To add CSS to several pages or all pages, utilize external CSS. In this
case, a css file contains all of the CSS code. It must have a.css extension, such as
style.css.

Example :

If the following styles are included in the style.css file:

p{color:yellow}

This style.css file needs to be linked to your html pages in the following way:

<link rel="stylesheet" type="text/css" href="style.css">

The head section of HTML is where the link tag must be added.

Advantages :

1. Your HTML files will be smaller and have a better structure because the CSS
code is in a separate document.
2. The same.css file can be applied to many pages.
Disadvantages :

1. It's possible that until the external CSS is loaded, your pages won't render
correctly.
2. The download time of your website may rise if you upload or link to several CSS
files.

When to use External style CSS :

1. When you want to keep the look and feel consistent.


2. When you wish to make changes on numerous pages.

CSS text-transform Property

 The capitalization of text is managed via the text-transform attribute.

Values :

 capitalize : It will capitalize each word’s first letter.


 none :The text appears as it is. None if the default value of text-transform
property.
 uppercase : It will change all the characters to uppercase format.
 lowercase : It will change all the characters to lowercase format.

o Syntax :

text-transform: value;

Code :
Output :

CSS text-align Property

 The horizontal alignment of text within an element is specified by the text-align


attribute.
 Values:

o right : text is aligned to the right direction


o left : text is aligned to the left direction
o center : text is aligned at center
o justify : each line is stretched so that every line has the same width.
o Syntax :

text-align: value;

Code :
Output:

You might also like