These are CSS shadow properties:

1. text-shadow
2. box-shadow

1).CSS text shadow

The text-shadow property is used to apply shadow to the text.

Using text-shadow property you can add horizontal or vertical shadow with different color and blur radius.

This table summarizes use and properties of text-shadow:

i).Simple text shadow

Syntax:

text-shadow: offset-x offset-y;

p{
    text-shadow: 2px 2px;
    font-size: 20px;
}

Output:

This paragraph has shadow property.

ii).Text shadow with different color

Syntax:

text-shadow: offset-x offset-y color;

p{
    text-shadow: 2px 2px blue;
    font-size: 20px;
}

Output:

This paragraph has blue shadow.

iii).Text shadow with different color and blur-radius

Syntax:

text-shadow: offset-x offset-y blur-radius color;

p{
    text-shadow: 2px 2px 5px blue;
    font-size: 20px;
}

CSS

This paragraph has blue shadow with blur-radius 5px.

iv).Multiple shadow

Syntax:

text-shadow: shadow1,shadow2,shadow3...;
#Where shadow = offset-x offset-y blur-radius color

p{
    text-shadow: 2px 2px 5px blue, 4px 4px 5px red, 6px 6px 5px #006699;
    font-size: 20px;
}

Output:

This paragraph has blue shadow with blur-radius 5px.

2).CSS box shadow

The box-shadow property is used to create shadow for elements.

CSS have the same property values for box-shadow as in text-shadow.

div{
    box-shadow: 10px 10px gray;
    width: 200px;
    height: 100px;
    background-color: silver;
}

Output:

This is a div element.

Creating CSS box-shadow with blur effect.

div{
    box-shadow: 10px 10px 10px gray;
    width: 200px;
    height: 100px;
    background-color: silver;
}

Output:

This is a div element.

CSS Position defines how a certain element should be positioned on a web page. The main importance of this article is to show how to control the position part and display of the content. Doing Positioning with CSS old version is quite complicated therefore a new standard CSS flexible Layout has newer versions. Coming to the positioning and layout model it is quite a difficult part as they have to cope with the browser implementation issues. This positioning property has five different methods namely static, relative, absolute, sticky, fixed.

Syntax Relative:

Position:relative;
Top:10px;
Right:25px;

By default relative positioned element can be moved around with the initial element or we can say it is done in a normal position. The box position is calibrated to the normal flow later it can be used as left, right, top, bottom property.

Syntax Absolute:

Position:absolute;
Top:12px;
Right:23px;

This act according to the parent element. It is positioned exactly at the specified location.

Syntax Static:

Position:static;
display:inline;
Display:inline-block
float:left;
clear:both;
overflow:hidden;

How does CSS Position Work?

This property helps to calculate the layout and content specified in the websites.

There are three sets of properties done in positioning:

• Property 1: Left, Right, Top, Bottom (This implies the distance of an element from the edge corner of the viewport).
• Property 2: The positioning concepts.
• Property 3: Z-Index.
• Property 4: Formatting style.

Given below are some of the CSS positions with their working:

1. Static

Static position elements are set by default and they have no impact on the properties like right, left, bottom, top. They don’t have any special direction it was made positioned with respect to the normal Page.

2. Relative

It is helpful while creating CSS layout and it finds quite difficult. An HTML element with this property works the same as static and they differed by setting the right, left values to the ancestor element.

3. Fixed

Fixed positions are exactly similar to absolute positioning, but they are violated from the normal flow of the text and made fixed in an exact point on the web page and all other elements of HTML behave as it doesn’t exist on the page. The key difference between absolute positioning and fixed positioning is a fixed position will retain their space on the ongoing page when there happened to have some page Scroll.

4. Absolute

In this position, an element is placed with respect to themselves and it is excluded from the normal flow of the document. In general, they are placed in the top-left of their ancestor or parent element.

5. Z-Index

There occurs a scenario where the elements in the web page get overlapped in the normal flow, to determine the exact positioning of those elements on the top or bottom Z- index is used. In layman terms, it sets the stacking order of an element or can be termed as a three-dimension viewport. The positive margin specifies an element should be pushed to the top and the negative margin implies to the bottom. And Z-index doesn’t make well with static positioning principles.

Examples to Implement CSS Position

Below are the different examples of CSS positions:

Examples #1: Using Static Position

This is the example of CSS static position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Static Positioning</title>
<style>
.box{
color: #fff;
background: #73AD21;
padding: 5px;
}
.container{
padding: 50px;
margin: 50px;
position: relative;
border: 5px dotted;
font-family: Arial, sans-serif;
}
.container p{
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Static Positioned Box example</h2>
</div>
<p> HTML along with CSS makes websites beautiful </p> </div>
</body>
</html>

Output:

Examples #2: Using Relative Positioning

This is the example of the CSS relative position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example Relative Positioning</title>
<style>
.box{
position: relative;
left: 50px;
color: #fff;
background: yellow;
padding: 15px;
}
.container{
padding: 45px;
margin: 45px;
border: 4px solid black;
font-family: italic, sans-serif;
}
.container p{
line-height: 40px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Relative Box</h2>
</div>
<p> Hello Folks.</p>
</div>
</body>
</html>

Below Output makes a border created in CSS and notes that an element can be moved in a layout.

Output:

Examples #3: Using Fixed Positioning

This is the example of the CSS fixed position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Fixed Positioning</title>
<style>
.box{
position: fixed;
top: 100px;
left: 150px;
color: #cce;
width: 50%;
background: #efefef;
padding: 20px;
}
.container{
padding:40px;
margin: 40px;
position: relative;
border: 4px solid black;
font-family: calibri, sans-serif;
}
.container p{
line-height: 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<h2>Fixed Positioned demo</h2>
<div><strong>Note:</strong> The position of this box is fixed relative to the document's viewport. It doesn't scroll with the page.</div>
</div>
<p> A new request has been posted according to the skills . And please decide to to apply for the course</p>
</div>
</body>
</html>

Output:

Examples #4: Using Absolute Positioning

This is the example of the CSS’s absolute position as follows.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS Absolute</title>
<style>
.box-green {
position: absolute;
background: green;
width: 90px;
height: 95px;
left: 6px;
top: 8px;
}
</style>
</head>
<body>
<div class="container">
<div class="box-green"></div>
<div class="box-blue"></div>
</div>
</body>
</html>

Below output displays an element at the beginning of its parent.

Output:

Examples #5: Demo Using all Three Positioning

This is the example of the CSS’s positions that is by using relative, static and absolute as follows.

Code: ppp.html

<!DOCTYPE HTML>
<html>
<head>
<title> CSS Positioning Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="EDUCBA">
<h1> <c>Position demo <c></h1>
<section>
<h2>relative type</h2>
<div>Static part</div>
<div class="relative">Relat type</div>
<div>Static box</div>
</section>
<section>
<h2>absolute</h2>
<div>Static test</div>
<div class="absolute">Absolute class</div>
<div>Static</div>
</section>
<section>
<h2>fixed Demo</h2>
<div>Static</div>
<div class="fixed">Fixed test</div>
<div>Static</div>
</section>
</body>
</html>

Code: new.css

body {
border: 2px solid black;
}
section {
border: 1px solid black;
margin: 1rem;
position: relative;
}
div {
background: linear-gradient(to bottom, blue, white);
border: 2px dashed black;
height: 26px;
margin: inherit;
width: 80px;
top: 81px;
left: 71px;
}
.relative {
background: linear-gradient (50deg, black, white);
position: relative;
}
.absolute {
background: red;
position: absolute;
}
.fixed {
background: yellow;
position: fixed;
}

Output:

Note: An invisible element also take up the space on the page. By using display property you can create invisible elements that don’t take up space.

Syntax:

1. visibility: visible|hidden|collapse|initial|inherit;  

CSS Visibility Parameters

visible:It is the by default value. It specifies that the element is visible.

Are programmers terrified or excited about being a “Jack Of All Trades”? | Specialist or generalist?

hidden: It specifies that the element is invisible (but still takes up space).

collapse: It is used only for table elements. It is used to remove a row or column, but it does not affect the table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as “hidden”

initial: It is used to set this property to its default value.

inherit: It is used to inherit this property from its parent element.

CSS Visibility Example

<!DOCTYPE html>  

<html>  

<head>  

<style>  

h1.visible {  

    visibility: visible ; 

}  

h1.hidden {  

    visibility: hidden  ;

}  

</style>  

</head>  

<body>  

<h1 class=”visible”>I am visible</h1>  

<h1 class=”hidden”>I am invisible</h1>  

<p><strong>Note:</strong> An invisible element also take up the space on the page.   

By using display property you can create invisible elements that don’t  

 take space.</p>  

</body>  

</html>  

The CSS specification defines the default display value for all the elements, e.g. the <div> element is rendered as block, while the <span> element is displayed inline.

Changing the Default Display Value

Overriding the default display value of an element is an important implication of the display property. For example, changing an inline-level element to be displayed as block-level element or changing the block-level element to be displayed as an inline-level element.

Note: The CSS display property is one of the most powerful and useful properties in all the CSS. It can be very useful for creating web pages that looks in a different way, but still follow the web standards.

The following section describes you the most commonly used CSS display values.

Display Block

The block value of the display property forces an element to behave like block-level element, like a <div> or <p> element. The style rules in the following example displays the <span> and <a> elements as block-level elements:

Example

span {
    display: block;
}
a {
    display: block;
}

Note: Changing the display type of an element only changes the display behavior of an element, NOT the type of element it is. For example, an inline element set to display: block; is not allowed to have a block element nested inside of it.

Display Inline

The inline value of the display property causes an element to behave as though it were an inline-level element, like a <span> or an <a> element. The style rules in the following example displays the <p> and <li> elements as inline-level elements:

Example

p {
    display: inline;
}
ul li {
    display: inline;
}

Display Inline-Block

The inline-block value of the display property causes an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content. The following style rules displays the <div> and <span> elements as inline-block:

Example

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Display None

The value none simply causes an element to generate no boxes at all. Child elements do not generate any boxes either, even if their display property is set to something other than none. The document is rendered as though the element did not exist in the document tree.

Example

h1 {
    display: none;
}
p {
    display: none;
}

The CSS margin properties allow you to set the spacing around the border of an element’s box (or the edge of the element’s box, if it has no defined border).

An element’s margin is not affected by its background-color, it is always transparent. However, if the parent element has the background color it will be visible through its margin area.

Setting Margins for Individual Sides

You can specify the margins for the individual sides of an element such as top, right, bottom, and left sides using the CSS margin-top, margin-right, margin-bottom, and the margin-left properties, respectively. Let’s try out the following example to understand how it works:

Example

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
}
p {
    margin-left: 75px;
    margin-right: 75px;
}

The margin properties can be specified using the following values:

• length – specifies a margin in px, em, rem, pt, cm, etc.
• % – specifies a margin in percentage (%) of the width of the containing element.
• auto – the browser calculates a suitable margin to use.
• inherit – specifies that the margin should be inherited from the parent element.

You can also specify negative margins on an element, e.g., margin: -10px;, margin: -5%;, etc.

The Margin Shorthand Property

The margin property is a shorthand property to avoid setting margin of each side separately, i.e., margin-top, margin-right, margin-bottom and margin-left.

Let’s take a look at the following example to understand how it basically works:

Example

h1 {
    margin: 50px; /* apply to all four sides */
}
p {
    margin: 25px 75px; /* vertical | horizontal */
}
div {
    margin: 25px 50px 75px; /* top | horizontal | bottom */
}
hr {
    margin: 25px 50px 75px 100px; /* top | right | bottom | left */
}

This shorthand notation can take one, two, three, or four whitespace separated values.

• If one value is specified, it is applied to all four sides.
• If two values are specified, the first value is applied to the top and bottom side, and the second value is applied to the right and left side of the element’s box.
• If three values are specified, the first value is applied to the top, second value is applied to right and left side, and the last value is applied to the bottom.
• If four values are specified, they are applied to the top, right, bottom and the left side of the element’s box respectively in the specified order.

It is recommended to use the shorthand properties, it will help you to save some time by avoiding the extra typing and make your CSS code easier to follow and maintain.

Horizontal Centering with Auto Margins

The auto value for the margin property tells the web browser to automatically calculate the margin. This is commonly used to center an element horizontally within a larger container.

Let’s try out the following example to understand how it works:

Example

div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}

The above style rules lets the <div> element take up 300 pixels of all the horizontal space available, and the remaining space will be equally divided between left and right margins.

The CSS border properties allow you to define the border area of an element’s box.

Borders appear directly between the margin and padding of an element. The border can either be a predefined style like, solid line, dotted line, double line, etc. or an image.

The following section describes how to set the style, color, and width of the border.

Understanding the Different Border Styles

The border-style property sets the style of a box’s border such as: solid, dotted, etc. It is a shorthand property for setting the line style for all four sides of the elements border.

The border-style property can have the following values: none, hidden, solid, dashed, dotted, double, inset, outset, groove, and ridge. Now, let’s take a look at the following illustration, it gives you a sense of the differences between the border style types.

The values none and hidden displays no border, however, there is a slight difference between these two values. In the case of table cell and border collapsing, the none value has the lowest priority, whereas the hidden value has the highest priority, if any other conflicting border is set.

The values inset, outset, groove, and ridge creates a 3D like effect which essentially depends on the border-color value. This is typically achieved by creating a “shadow” from two colors that are slightly lighter and darker than the border color. Let’s check out an example:

Example

h1 {
    border-style: dotted;
}
p {
    border-style: ridge;
}

Note: You must specify a border style in order to make the border appear around an element, because the default border style is none. Whereas, the default border width or thickness is medium, and the default border color is the same as the text color.

Setting the Border Width

The border-width property specifies the width of the border area. It is a shorthand property for setting the thickness of all the four sides of an element’s border at the same time.

Let’s try out the following example to understand how it works:

Example

p {
    border-style: dashed;
    border-width: 10px;
}

Tip: The border width can be specified using any length value, such as px, em, rem, and so on. In addition to length units, the border width may also be specified using one of three keywords: thin, medium, and thick. Percentage values are not allowed.

Specifying the Border Color

The border-color property specifies the color of the border area. This is also a shorthand property for setting the color of all the four sides of an element’s border.

The following style rules adds a solid border of red color around the paragraphs.

Example

p {
    border-style: solid;
    border-color: #ff0000;
}

Note: The CSS border-width or border-color property does not work if it is used alone. Use the border-style property to set the style of the border first.

The Border Shorthand Property

The border CSS property is a shorthand property for setting one or more of the individual border properties border-width, border-style and border-color in a single rule.

Let’s take a look at the following example to understand how it works:

Example

p {
    border: 5px solid #00ff00;
}

If the value for an individual border property is omitted or not specified while setting the border shorthand property, the default value for that property will be used instead, if any.

For instance, if the value for the border-color property is missing or not specified when setting the border, the element’s color property will be used as the value for the border color.

In the example below, the border will be a solid red line of 5 pixels width:

Example

p {
    color: red;
    border: 5px solid;
}

But, in the case of border-style, omitting the value will cause no border to show at all, because the default value for this property is none. In the following example, there will be no border:

Example

p {
    border: 5px #00ff00;
}

Every element that can be displayed on a web page is comprised of one or more rectangular boxes. CSS box model typically describes how these rectangular boxes are laid out on a web page. These boxes can have different properties and can interact with each other in different ways, but every box has a content area and optional surrounding padding, border, and margin areas.

The following diagram demonstrates how the width, height, padding, border, and margin CSS properties determines how much space an element can take on a web page.

Padding is the transparent space between the element’s content and its border (or edge of the box, if it has no border), whereas margin is the transparent space around the border.

Also, if an element has the background color it will be visible through its padding area. The margin area is always remain transparent, it is not affected by the element’s background color, however, it causes the background color of the parent element to be seen through it.

Width and Height of the Elements

Usually when you set the width and height of an element using the CSS width and height properties, in reality you are only setting the width and height of the content area of that element. The actual width and height of the element’s box depends on the several factors.

The actual space that an element’s box might take on a web page is calculated like this:

You will learn about each of these CSS properties in detail in upcoming chapters.

Now let’s try out the following example to understand how the box model actually works:

Example

div {
    width: 300px;
    height: 200px;
    padding: 15px; /* set padding for all four sides */
    border: 10px solid black; /* set border for all four sides */
    margin: 20px auto; /* set top and bottom margin to 20 pixels, and left and right margin to auto */
}

Note: In CSS box model; the content area of an element’s box is the area where its content, e.g., text, image, video, etc. appears. It may also contain descendant elements boxes.

List can be ordered or unordered. Ordered list shows list contents using numbers while unordered list shows list content using bullets.

In CSS we have following list properties to style list:

• CSS list-style-type This allows the user to change the shape of bullets or markers.
• CSS list-style-position Control content to be inside or outside of the bullet.
• CSS list-style-image This property replaces marker/bullet with specified image.
• CSS list-style This property let us use multiple list property at once.

Types of HTML Lists

There are three different types of list in HTML:

• Unordered lists — A list of items, where every list items are marked with bullets.
• Ordered lists — A list of items, where each list items are marked with numbers.
• Definition list — A list of items, with a description of each item.

Styling Lists with CSS

CSS provides the several properties for styling and formatting the most commonly used unordered and ordered lists. These CSS list properties typically allow you to:

• Control the shape or appearance of the marker.
• Specify an image for the marker rather than a bullet point or number.
• Set the distance between a marker and the text in the list.
• Specify whether the marker would appear inside or outside of the box containing the list items.

In the following section we will discuss the properties that can be used to style HTML lists.

Changing the Marker Type of Lists

By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, and so on), whereas in an unordered list, items are marked with round bullets (•).

But, you can change this default list marker type to any other type such as roman numerals, latin letters, circle, square, and so on using the list-style-type property.

Let’s try out the following example to understand how this property actually works:

Example

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

Changing the Position of List Markers

By default, markers of each list items are positioned outside of their display boxes.

However, you can also position these markers or bullet points inside of the list item’s display boxes using the list-style-position property along with the value inside. In this case the lines will wrap under the marker instead of being indented. Here’s an example:

Example

ol.in li {
    list-style-position: inside;
}
ol.out li {
    list-style-position: outside;
}

Let’s take a look at the following illustration to understand how markers or bullets are positioned.

Using Images as List Markers

You can also set an image as a list marker using the list-style-image property.

The style rule in the following example assigns a transparent PNG image “arrow.png” as the list marker for all the items in the unordered list. Let’s try it out and see how it works:

Example

ul li {
    list-style-image: url("images/bullet.png");
}

Sometimes, the list-style-image property may not produce the expected output. Alternatively, you can use the following solution for better control over the positioning of image markers.

As a work-around, you can also set image bullets via the background-image CSS property. First, set the list to have no bullets. Then, define a non-repeating background image for the list element.

The following example displays the image markers equally in all browsers:

Example

ul {
    list-style-type: none;
}
ul li {
    background-image: url("images/bullet.png");
    background-position: 0px 5px;    /* X-pos Y-pos (from top-left) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

Setting All List Properties At Once

The list-style property is a shorthand property for defining all the three properties list-style-type, list-style-image, and list-style-position of a list in one place.

The following style rule sets all the list properties in a single declaration.

Example

ul {
    list-style: square inside url("images/bullet.png");
}

Note: When using the list-style shorthand property, the orders of the values are: list-style-type | list-style-position | list-style-image. It does not matter if one of the values above is missing as long as the rest are in the specified order.

Creating Navigation Menus Using Lists

HTML lists are frequently used to create horizontal navigation bar or menu that typically appear at the top of a website. But since the list items are block elements, so to display them inline we need to use the CSS display property. Let’s try out an example to see how it really works:

Example

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}

We can provide texts of these different properties using CSS font properties.

The CSS font properties are as follows:

• CSS font family
• CSS font size
• CSS font style
• CSS font-weight
• CSS font-variant

Font Family

The font-family property is used to specify the font to be used to render the text.

This property can hold several comma-separated font names as a fallback system, so that if the first font is not available on the user’s system, browser tries to use the second one, and so on.

Hence, list the font that you want first, then any fonts that might fill in for the first if it is not available. You should end the list with a generic font family which are five — serif, sans-serif, monospace, cursive and fantasy. A typical font family declaration might look like this:

Example

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

Note: If the name of a font family contains more than one word, it must be placed inside quotation marks, like "Times New Roman", "Courier New", "Segoe UI", etc.

The most common font families used in web design are serif and sans-serif, because they are more suitable for reading. While monospace fonts are commonly used to display code, because in this typeface each letter takes up the same space which looks like typewritten text.

The cursive fonts look like cursive writing or handwriting. The fantasy font represents artistic font, but they’re not used widely because of poor availability across the operating systems.

Difference Between Serif and Sans-serif Fonts

Serif fonts have small line or stroke at the extremities of characters, whereas sans-serif fonts are straighter and do not have these small strokes. See the following illustration.

To learn about commonly used font combinations, please check out the reference on web safe fonts.

Font Style

The font-style property is used to set the font face style for the text content of an element.

The font style can be normal, italic or oblique. The default value is normal.

Let’s try out the following example to understand how it basically works:

Example

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

Note: At first glance both oblique and italic font styles appear the same thing, but there is a difference. The italic style uses an italic version of the font while oblique style on the other hand is simply a slanted or sloped version of the normal font.

Font Size

The font-size property is used to set the size of font for the text content of an element.

There are several ways to specify the font size values e.g. with keywords, percentage, pixels, ems, etc.

Setting Font Size with Pixels

Setting the font size in pixel values (e.g. 14px, 16px, etc.) is a good choice when you need the pixel accuracy. Pixel is an absolute unit of measurement which specifies a fixed length.

Let’s try out the following example to understand how it basically works:

Example

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

Defining the font sizes in pixel is not considered very accessible, because the user cannot change the font size from the browser settings. For instance, users with limited or low vision may wish to set the font size much larger than the size specified by you.

Therefore, you should avoid using the pixels values and use the values that are relative to the user’s default font size instead if you want to create an inclusive design.

Tip: The text can also be resized in all browsers using the zoom feature. However, this feature resizes the entire page, not just the text. The W3C recommends using the em or percentage (%) values in order to create more robust and scalable layouts.

Setting Font Size with EM

The em unit refers to the font size of the parent element. When defining the font-size property, 1em is equal to the size of the font that applies to the parent of the element.

So, if you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px.

However, if you haven’t set the font size anywhere on the page, then it is the browser default, which is normally 16px. Therefore, by default 1em = 16px, and 2em = 32px.

Let’s take a look at the following example to understand how it basically works:

Example

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

Using the Combination of Percentage and EM

As you’ve observed in the above example the calculation of em values doesn’t look straightforward. To simplify this, a popular technique is to set the font-size for the body element to 62.5% (that is 62.5% of the default 16px), which equates to 10px, or 0.625em.

Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, and so on. Let’s take a look at the following example:

Example

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

Setting Font Size with Root EM

To make things even more simpler CSS3 has introduced rem unit (short for “root em”) which is always relative to the font-size of the root element (html), regardless of where the element lies in the document (unlike em which is relative to parent element’s font size).

This means that 1rem is equivalent to the font size of the html element, which is 16px by default in most browsers. Let’s try out an example to understand how it actually works:

Example

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

Setting Font Size with Keywords

CSS provide several keywords that you can use to define font sizes.

An absolute font size can be specified using one of the following keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Whereas, a relative font size can be specified using the keywords: smaller or larger. Let’s try out an example and see how it works:

Example

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

Note: The keyword medium is equivalent to the browsers default font-size, which is normally 16px. Likewise, xx-small is the equivalent of 9 pixels, x-small is 10 pixels, small is 13 pixels, large is 18 pixels, x-large is 24 pixels, and xx-large is 32 pixels.

Tip: By setting a font size on the body element, you can set the relative font sizing everywhere else on the page, giving you the ability to easily scale the font size up or down accordingly.

Setting Font Size with Viewport Units

The font sizes can be specified using viewport units such as vw or vh.

Viewport units refer to a percentage of the browser’s viewport dimensions, where 1vw = 1% of viewport width, and 1vh = 1% of viewport height. Hence, if the viewport is 1600px wide, 1vw is 16px.

Try out the following example by resizing the browser window and see how it works:

Example

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

However, there is a problem with the viewport units. On small screens fonts become so small that they are hardly readable. To prevent this you can utilize CSS calc() function, like this:

Example

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

In this example, even if the viewport width becomes 0, the font-size would be at least 1em or 16px.

Font Weight

The font-weight property specifies the weight or boldness of the font.

This property can take one of the following values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 and inherit.

• The numeric values 100–900 specify the font weights, where each number represents a weight greater than its predecessor. 400 is same as normal & 700 is same as bold.
• The bolder and lighter values are relative to the inherited font weight, while the other values such as normal and bold are absolute font weights.

Let’s try out an example to understand how this property basically works:

Example

p {
    font-weight: bold;
}

Note: Most of the fonts are only available in a limited number of weights; often they are available only in normal and bold. In case, if a font is not available in the specified weight, an alternate will be chosen that is the closest available weight.

Font Variant

The font-variant property allows the text to be displayed in a special small-caps variation.

Small-caps or small capital letters are slightly different to normal capital letters, in which lowercase letters appear as smaller versions of the corresponding uppercase letters.

Try out the following example to understand how this property actually works:

Example

p {
    font-variant: small-caps;
}

The value normal removes small caps from the text which is already formatted that way.

CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages.

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup (specifically inside the HTML tags); all the font colors, background styles, element alignments, borders and sizes had to be explicitly described within the HTML.

As a result, development of the large websites became a long and expensive process, since the style information were repeatedly added to every single page of the website.

To solve this problem CSS was introduced in 1996 by the World Wide Web Consortium (W3C), which also maintains its standard. CSS was designed to enable the separation of presentation and content. Now web designers can move the formatting information of the web pages to a separate style sheet which results in considerably simpler HTML markup, and better maintainability.

CSS3 is the latest version of the CSS specification. CSS3 adds several new styling features and improvements to enhance the web presentation capabilities.

Note: Our CSS tutorial will help you to learn the fundamentals of the latest CSS3 language, from the basic to advanced topics step-by-step. If you’re a beginner, start with the basic section and gradually move forward by learning a little bit every day.

What You Can Do with CSS

There are lot more things you can do with CSS.

• You can easily apply same style rules on multiple elements.
• You can control the presentation of multiple pages of a website with a single style sheet.
• You can present the same page differently on different devices.
• You can style dynamic states of elements such as hover, focus, etc. that isn’t possible otherwise.
• You can change the position of an element on a web page without changing the markup.
• You can alter the display of existing HTML elements.
• You can transform elements like scale, rotate, skew, etc. in 2D or 3D space.
• You can create animations and transitions effects without using any JavaScript.
• You can create print friendly version of your web pages.

The list does not end here, there are many other interesting things that you can do with CSS. You will learn about all of them in detail in upcoming chapters.

Advantages of Using CSS

The biggest advantage of CSS is that it allows the separation of style and layout from the content of the document. Here are some more advantages, why one should start using CSS?

• CSS Save Lots of Time — CSS gives lots of flexibility to set the style properties of an element. You can write CSS once; and then the same code can be applied to the groups of HTML elements, and can also be reused in multiple HTML pages.
• Easy Maintenance — CSS provides an easy means to update the formatting of the documents, and to maintain the consistency across multiple documents. Because the content of the entire set of web pages can be easily controlled using one or more style sheets.
• Pages Load Faster — CSS enables multiple pages to share the formatting information, which reduces complexity and repetition in the structural contents of the documents. It significantly reduces the file transfer size, which results in a faster page loading.
• Superior Styles to HTML — CSS has much wider presentation capabilities than HTML and provide much better control over the layout of your web pages. So you can give far better look to your web pages in comparison to the HTML presentational elements and attributes.
• Multiple Device Compatibility — CSS also allows web pages to be optimized for more than one type of device or media. Using CSS the same HTML document can be presented in different viewing styles for different rendering devices such as desktop, cell phones, etc.

Tip: Now most of the HTML attributes are being deprecated and it’s not recommended to use. So it’s a good idea to use as much CSS as possible to increase the adaptability your website and make them compatible to future browsers, as well.

What This Tutorial Covers

This CSS tutorial series covers all the fundamentals of CSS, including the idea of selectors, methods of setting colors and backgrounds, way of formatting fonts and text, styling UI elements such as hyperlinks, lists, tables, etc. as well as the concept of CSS box model, and so on.

Once you’re comfortable with the basics, you’ll move on to next level that explains the way of setting dimension and alignment of elements, methods for positioning elements on a web page, using image sprites, as well as the concept of relative and absolute units, visual formatting model, display and visibility, layers, pseudo classes and elements, media dependent style sheets, and so on.

Finally, you’ll explore some advanced features introduced in CSS3 like gradient colors, drop shadow effect, 2D and 3D transforms, alpha transparency, as well as the method of creating transition and animation effect, flex layouts, filter effect, the concept of media queries, and more.

Tip: Every chapter in this tutorial contains lots of real-world examples that you can try and test using an online editor. These examples will help you to better understand the concept or topic. It also contains smart workarounds as well as useful tips and important notes.