CSS: Cascading Style Sheets (series)
#00000; #FFFFF confused? Read more
Things aren’t always #000000 and #FFFFFF and so here we are with our next blog to break this 0000 and FFFF. Confused what this 0’s and F’s are?
Worry not! check out our blog on CSS and check in to the new one-The wonder that fonts and colors can make. Read now!
In the previous blog, we have learned the basics of CSS
but today why not make it colorful? we will learn about fonts and text alignments
FONTS:
Succeding colors of the webpage, the font is probably the most basic property of a page. Font creates a hierarchy in the content.
Content can be easily understood just by identifying how the fonts are set out. Readers will see what’s most important when fonts of different types and sizes are used. This hierarchy created by fonts will also make way for a good flow of information that’s easy for the viewers’ eyes.
In CSS there are five common font families:
1. Serif: The word serif itself means “a slight projection finishing off a stroke of a letter.” which implies that the letters of this font project the finishing.
2. Sans-serif: Sans means “without” so, it is a font without the projection.
3. Monospace: It is a font where each letter occupies equal width/horizontal space.
4. Cursive: These fonts are a recreation of the normal handwritten font.
5. Fantasy: It is primarily based on the looks of the font i.e., the attractiveness of the font or beauty of the font.
Every different font names are the branches of the common font families
Fallback fonts:
Though a font is chosen, the probability of the font being found or installed is not one. hence, there is always a possibility that the font is not found or is not installed properly.
Therefore, it is very crucial to always utilize fallback fonts.
These convey that a list of similar “backup fonts” should be added to the font-family property. If the given font does not work, the browser will try the next one, the next one, and consequent one, etc. But always ends the list with a common font family name.
The 5 basic fonts mentioned above are the most common fallback fonts.
Font Style
The font-style function is commonly utilized to specify italic text.
This property has three values:
- normal — The text is shown normally
- oblique — The letters in this text are similar to normal text but the letters are slanted.
- italic — The text is shown in letters that are a bit different from normal text and similar to oblique the letters are slanted.
Font Weight
The font-weight is a function used to verify whether the given font is “bold” or “normal”?
Font Variant
It is used to specify a text whether should be displayed in lowercase font or not.
If the given text is in lowercase font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters are displayed in a smaller font size than the original uppercase letters in the text.
Font Size
The font-size function is used to set the size of the text.
The ability to control the text size is important in web designing. However, one should not use font size regulations to make paragraphs look like headings, or headings look like paragraphs.
A web designer must always use the proper HTML tags, like <h1> — <h6> for headings and <p> for paragraphs.
The font-size value is of two types:
Absolute size:
- Sets the text to a given size.
- Doesn’t have the option of changing text size in all browsers.
- Absolute size is useful when the physical size of the output is known beforehand.
Relative size:
- Sets the size based on surrounding elements i.e., relative to surrounding elements.
- Has the option of changing text size in all browsers.
Google Fonts
When the web designer does not want to use the inbuilt fonts, he/she can use google fonts which provide well over 1000 fronts for free.
How To Use Google Fonts:
Just add a special style sheet link in the <head> section and then refer to the font in the CSS.
Font Pairing
How to combine fonts — rules, tips, and tricks
• Using Complementary fonts makes the text more visually interesting.
• Establish a visual hierarchy.
• The fonts must be considered based on the context.
• Mixing sans serifs and serifs.
• There should be a clear contrast between fonts.
• Fonts that conflict with each other must be avoided.
• Fonts that are too similar must be avoided.
• Fonts from the same family are better suited for pairing.
For example, Georgia and Verdana and are safe fonts.
The CSS Font Property
To reduce the no of lines of the code, the web designer can declare multiple properties as on property.
The font properties are:
- font-style
- font-variant
- font-weight
- font-size/line-height
- font-family
Note: The font size and font-family values are needed to declare a font and if any value is missing a default value is considered.
Property
Description
font
All the font properties are set in one declaration
Font-family
Describes the font family for text
Font-size
Describes the font size of text
Font-style
Describes the font style for text
Font-variant
Describes whether or not a text should be displayed in a lowercase font
Font-weight
Describes the weight of a font
TEXT:
Text Colour
The color property determines or sets the color of the text. The color is specified by:
- a color name — like “blue”
- a HEX value — like “#ff2000”
- an RGB value — like “RGB(254,0,0)”
Text Alignment:
The text-align property is used to align the text horizontally so that all the lines are uniform.
A text can be “left-aligned” or “right-aligned”, centered, or justified.
When the text-align property is set to "justify” every line on that page start at the left margin and ends at the right margin.
The direction and Unicode-bidi properties are used to determine how a bidirectional text is handled.
Text Decoration
It is utilized to set decoration for a text or remove the decoration from a text.
To get rid of underlines from the link or text “None” is assigned as the decoration value.
The rest of the values are utilized to decorate the text.
Text Transformation
The text-transform property is used to specify capital letters and small letters in a text.
It can be used to turn everything into capital letters or small letters or capitalize the first letter of each word.
Text Indentation
The text-indent property is used to specify the length of indentation of the first line of a block before starting the text.
The letter-spacing property is used to specify i.e., increase or decrease the space between the characters in a text.
The line-height property is used to set the gap between two lines on a page.
The word-spacing property is used to specify i.e., increase or decrease the space between the words in a text.
The white-space property specifies how the white space on the page is handled.
Text Shadow
The text-shadow property adds a shadow to the text. In its simplest use, the web designer only specifies the horizontal shadow and the vertical shadow.
Fonts are just for decoration or to make it attractive, it also helps to make the webpage, articles, and so on, interesting and readable.
Let’s meet again with more excitement as well as with amazing topics.
STAY TUNED TO OUR BLOG………
