Lokang 

HTML and CSS

☜ ☞

text and font properties

font-family

The font-family property in CSS specifies the font family for the text. It allows you to choose a specific font for your text content, rather than relying on the default font for the web browser.

For example:

p {
 font-family: Arial, sans-serif;
}

In the example above, the font-family is set to "Arial", and if "Arial" is not available, it will fall back to a generic sans-serif font.

You can specify multiple font families, separated by commas, in case the first choice is not available. This allows you to provide a backup font in case the first choice is not installed on the user's device.

It's important to remember that not all fonts are available on all devices, so it's a good practice to specify multiple fonts to ensure that the text will be displayed as intended on all devices.

 

font-size

The font-size property in CSS is used to specify the size of the font. The size can be specified in several ways, including pixels, ems, and percentages.

For example:

p {
 font-size: 16px;
}

In the example above, the font size is set to 16 pixels.

Using ems allows you to specify the size relative to the parent element's font size. For example:

p {
 font-size: 1em;
}

In the example above, the font size is set to 1 times the size of the parent element's font size.

Percentages can also be used to specify the font size as a percentage of the parent element's font size. For example:

p {
 font-size: 100%;
}

In the example above, the font size is set to 100% of the parent element's font size.

It's important to note that different browsers have different default font sizes, so it's a good practice to specify the font size in your CSS to ensure that the text will be displayed consistently across all devices.

 

font-style

The font-style property in CSS specifies the style of the font. The possible values for this property are normal, italic, and oblique.

For example:

p {
 font-style: italic;
}

In the example above, the font style is set to italic.

The normal value sets the font to a normal, non-italic style. The italic value sets the font to an italic style, and the oblique value sets the font to an oblique style, which is similar to italic but with less slant.

It's important to keep in mind that not all fonts have both italic and oblique styles, so it's a good practice to specify multiple fonts for the font-family property in case the desired style is not available.

 

font-weight

The font-weight property in CSS specifies the weight (or thickness) of the font. The possible values for this property range from 100 to 900, with 400 being equivalent to the normal weight, and 700 being equivalent to bold.

For example:

p {
 font-weight: bold;
}

In the example above, the font weight is set to bold.

The values for font-weight can also be specified using keywords, such as normal, bold, lighter, and bolder.

For example:

p {
 font-weight: lighter;
}

In the example above, the font weight is set to lighter.

It's important to keep in mind that not all fonts have the same range of weights, so it's a good practice to specify multiple fonts for the font-family property in case the desired weight is not available.

 

 

color

The color property in CSS is used to specify the color of the text. The color can be specified in several ways, including using color names (e.g. red, blue, etc.), hexadecimal values (e.g. #ff0000 for red), RGB values (e.g. rgb(255, 0, 0) for red), and RGBA values (e.g. rgba(255, 0, 0, 1) for red).

For example:

p {
 color: blue;
}

In the example above, the text color is set to blue.

For example:

p {
 color: #ff0000;
}

In the example above, the text color is set to red.

It's important to keep in mind that different devices may display colors differently, so it's a good practice to specify the color in your CSS to ensure that the text will be displayed consistently across all devices.

 

text-align

The text-align property in CSS is used to specify the horizontal alignment of text within an element. The possible values for this property are left, right, center, and justify.

For example:

p {
 text-align: center;
}

In the example above, the text within the p element is centered.

The left value sets the text to be aligned to the left, the right value sets the text to be aligned to the right, and the center value centers the text. The justify value spreads the text evenly across the entire width of the element.

It's important to note that the text-align property only affects the horizontal alignment of the text and does not affect the vertical alignment. To control the vertical alignment of text, you can use the vertical-align property.

 

text-decoration

The text-decoration property in CSS is used to add decorations to text. The possible values for this property are none, underline, overline, line-through, and blink.

For example:

a {
 text-decoration: underline;
}

In the example above, the text within a elements (i.e. links) will be underlined.

The none value removes any existing text decorations, the underline value adds an underline to the text, the overline value adds an overline to the text, the line-through value adds a line through the text, and the blink value causes the text to blink.

It's important to keep in mind that the blink value is not widely supported by modern browsers and should be used with caution.

 

 

text-transform

The text-transform property in CSS is used to control the capitalization of text. The possible values for this property are none, uppercase, lowercase, and capitalize.

For example:

p {
 text-transform: uppercase;
}

In the example above, the text within the p element will be displayed in uppercase letters.

The none value leaves the text as is, the uppercase value converts all letters to uppercase, the lowercase value converts all letters to lowercase, and the capitalize value capitalizes the first letter of each word.

It's important to keep in mind that the text-transform property only affects the capitalization of the text and does not affect the font size, weight, or style. To control these aspects of the text, you can use the font-size, font-weight, and font-style properties.

 

 

line-height

The line-height property in CSS is used to specify the height of a line of text. The value for this property can be a length (e.g. 20px), a percentage (e.g. 150%), or a number (e.g. 1.5).

For example:

p {
 line-height: 1.5;
}

In the example above, the line height of the text within the p element is set to 1.5, meaning that the line height will be 1.5 times the size of the font.

The line-height property controls the amount of space above and below the text within an element. A larger line height will result in more space above and below the text, while a smaller line height will result in less space.

It's important to note that the value of the line-height property is not the actual height of the text, but rather the height of the line box that contains the text. The actual height of the text is determined by the font size, the font family, and other factors.

 

 

letter-spacing

The letter-spacing property in CSS is used to control the spacing between characters in a block of text. The value for this property can be a length (e.g. 2px) or a percentage (e.g. 150%).

For example:

p {
 letter-spacing: 2px;
}

In the example above, the spacing between characters within the p element is set to 2px.

The letter-spacing property allows you to increase or decrease the space between characters in a block of text. A positive value for letter-spacing will increase the space between characters, while a negative value will decrease the space.

It's important to note that the letter-spacing property only affects the spacing between characters and does not affect the overall font size or weight. To control these aspects of the text, you can use the font-size and font-weight properties.

 

 

word-spacing

The word-spacing property in CSS is used to control the spacing between words in a block of text. The value for this property can be a length (e.g. 10px) or a percentage (e.g. 150%).

For example:

p {
 word-spacing: 10px;
}

In the example above, the spacing between words within the p element is set to 10px.

The word-spacing property allows you to increase or decrease the space between words in a block of text. A positive value for word-spacing will increase the space between words, while a negative value will decrease the space.

It's important to note that the word-spacing property only affects the spacing between words and does not affect the overall font size or weight. To control these aspects of the text, you can use the font-size and font-weight properties.

 

 

text-indent

The text-indent property in CSS is used to control the indentation of the first line of a block of text. The value for this property can be a length (e.g. 20px), a percentage (e.g. 10%), or an absolute length (e.g. 5mm).

For example:

p {
 text-indent: 20px;
}

In the example above, the first line of text within the p element will be indented 20px from the left margin.

The text-indent property is commonly used to indent the first line of a paragraph, but it can be used on any block-level element. A positive value for text-indent will move the first line of text to the right, while a negative value will move it to the left.

It's important to note that the text-indent property only affects the first line of text in an element and does not affect subsequent lines. To control the indentation of subsequent lines, you can use the padding or margin properties.

 

 

text-shadow

The text-shadow property in CSS is used to add a shadow to text. The value for this property is a set of values that define the shadow's position, size, and color.

For example:

p {
 text-shadow: 2px 2px 3px gray;
}

In the example above, a gray shadow is added to the text within the p element. The shadow is positioned 2px to the right and 2px down from the text, and has a blur radius of 3px.

The syntax for the text-shadow property is as follows:

text-shadow: [horizontal offset] [vertical offset] [blur radius] [color];

The horizontal and vertical offsets determine the position of the shadow relative to the text. A positive horizontal offset moves the shadow to the right, while a negative offset moves it to the left. A positive vertical offset moves the shadow down, while a negative offset moves it up.

The blur radius determines the spread of the shadow, with larger values resulting in a more blurred shadow and smaller values resulting in a more defined shadow.

The color value determines the color of the shadow. You can specify the color using any valid CSS color value, such as a named color (e.g. gray), a hexadecimal value (e.g. #808080), or an RGB value (e.g. rgb(128, 128, 128)).

It's important to note that the text-shadow property only affects the text within an element and does not affect the background or other elements on the page.

 

 

@font-face

The @font-face rule in CSS allows you to specify a custom font to be used in your web page, rather than relying on the user's device to have a particular font installed.

Here's an example of using @font-face to embed a font file:

@font-face {
 font-family: "My Custom Font";
 src: url("path/to/font.ttf") format("truetype");
}

In this example, you specify the font-family property with a unique name for the font. This name is used to reference the font in your CSS. The src property specifies the location and format of the font file. The format of the font file is specified in parentheses after the url() function. In this case, the font is in TrueType format (.ttf).

You can then use the custom font in your CSS like this:

p {
 font-family: "My Custom Font", sans-serif;
}

In this example, the font-family property is set to the custom font you specified in the @font-face rule, followed by a fallback font (in this case, sans-serif).

The @font-face rule works in most modern browsers and is a powerful way to add unique typography to your web page. However, it's important to keep in mind that not all browsers support all font formats, so you should specify multiple sources for different font formats if possible to ensure maximum compatibility.

 

 

font-variant

The font-variant property in CSS is used to specify the font variation of a text. This property is used to display small capital letters, or to turn off the display of special characters (such as ligatures) in a font.

There are two main values for the font-variant property: normal and small-caps.

  • The normal value specifies that the text should be displayed in its normal variation.
  • The small-caps value specifies that the text should be displayed in small capital letters.

Here's an example of using the font-variant property to display text in small capital letters:

p {
 font-variant: small-caps;
}

In this example, the text within the p element will be displayed in small capital letters.

It's worth noting that not all fonts support small capital letters, so using this property may result in unexpected behavior in some cases. Additionally, the appearance of small capital letters can vary greatly between fonts, so you may need to experiment to find a font that gives you the desired result.



☜ ☞