CSS Tutorials 102 – Web Development

Hey!! Friends, we are back again with a new article of tutorial CSS Tutorials. Here we will start from where we finished in the previous article.

If you wanted the earlier articles, then check once CSS Tutorial 101.

CSS Fonts

This section will learn how to set the fonts of content present in an HTML element. We can set the following font properties of a component −

• The font-family property mainly uses for changing the face of a font.
• The font-style property uses for making a font italic or oblique.
• The font-variant property uses to create a small-caps effect.
• The font-weight property uses to increase or decreases how bold or light a font appears.
• The font-size property uses to improve or reduces the size of a font.
• The font property uses as shorthand to specify the number of other font properties.

In CSS, there are two kinds of the font family names:

• generic family – This is a group of font families with a similar look (like “Serif” or “Monospace”)
• font-family – This is a specific font family (e.g., “Calibri” or “Arial”)

Font Family

What is the font family in CSS?

The font family of a text is written with the font-family property.

The font-family property has held several font names as a “fallback” system. Generally, If the browser doesn’t support the first font, it tries the next font, and so on.

You can start with the font which you want, and finish with a generic family, to let the browser choose a similar font in the generic family if there is no other fonts are available.

More than one font family is defined in a comma-separated list:

.serif {
font-family: "Times New Roman", Times, serif;
}

.sansserif {
font-family: Arial, Helvetica, sans-serif;
}

.monospace {
font-family: "Lucida Console", Courier, monospace;
}

CSS Text

Text Color CSS

The color property uses to set the color of the text. The color is defined by:

• a color name – like “Yellow.”
• a HEX value – like “#ffff00.”
• an RGB value – like “rgb(255,255,0)”

body {
color: blue;
}

h1 {
color: green;
}

CSS Text Alignment

The text-align property uses to set the horizontal alignment of the text.

Text mainly aligned in four ways: to the left, right, centre or justified (straight left and right margins).

h1 { text-align: center; }
p { text-align: justify; }

 Text Decoration

The text-decoration property uses to set or remove decorations from the text of the content.

This property commonly accepts one of the following values: underline, overline, line-through, and none. You should avoid underlining text that is not a link, as it might confuse the visitor.

For example:

h1 { text-decoration: overline; } 
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }

CSS Text Transformation

The text-transform property uses to set the cases for a text.

We will learn more about this property in the coming transition and animation chapter.

h1 { text-transform: uppercase; }
h1 { text-transform: lowercase; }

CSS Text Indentation Property

The text-indent property uses to set the indentation of the first line of text within a block of text. It is commonly done by inserting the space before writing the first line of text.

The size of the paragraph can be specified utilising percentage (%), length values in pixels, ems, etc.

p { text-indent:100px; }

Letter Spacing

The letter-spacing part is used to set the extra spacing between the characters of the text.

h1 { letter-spacing: -3px; }

Word Spacing

The word-spacing part is used to specify the additional spacing between the words.

This property can receive a length value in pixels, ems, etc. Negative values are also provided.

p.normal { 
word-spacing: 20px; 
} 
p.justified { 
word-spacing: 20px; text-align: justify;
} 

Line Height

The line-height property is useful to set the height of the text line.

Generally, it uses for setting the distance between lines of text.

The value of this part can be a number, a percentage (%), or a length in pixels, ems, etc.

p { font-size: 14px; line-height: 20px; background-color: #f0e68c; }

CSS Links

 Styling Links with CSS

The Links are styled with any CSS property (e.g., color, font-family, background, etc.).

The CSS Links or hyperlinks are a very important part of any website. It allows us to navigate through the site. Therefore styling the links property is an important part of building a user-friendly website.

A link has four different types— link, visited, active, and hover.

These four states of a link can be styled differently by using the following anchor pseudo-class selectors.

• a: link — define styles as normal or unvisited links.

  a: visited — define styles for links that the user has previously visited.

  a: hover — it defines styles for a

  link while the user places the mouse pointer over it.a: active — define styles for links while they are being clicked.

The Change the Color of Links when Mouse is Over

The below given an example shows how to change the color of links when we bring a mouse arrow over that link. Possible conditions could be any color name in any valid format in CSS. This is a hover property.

<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>

<body>
<a href = "">Link</a>
</body>
</html> 

Making Text Links Look like Buttons

We can also make ordinary text links which look like button using CSS. For doing this, we need to utilize a few more CSS properties such as background-color, border, display, padding, etc.

Let’s check out the following example and see how it really works:

a:link, a:visited {
color: white; 
background-color: #1ebba3;
display: inline-block; 
padding: 10px 20px; 
border: 2px solid #099983;
text-decoration: none;
text-align: center;
font: 14px Arial, sans-serif;
} 
a:hover, a:active {
background-color: #9c6ae1; border-color: #7443b6;
}

FAQS in CSS Tutorials

This is all about the basics of CSS Tutorials. After this, we will be moving to the BOX model of CSS tutorials.