Styling Fonts with CSS Choosing the right font and style is very crucial for the readability of text on a page. CSS provide several properties for styling the font of the text, including changing their face, controlling their size and boldness, managing variant, and so on. The font properties are: font-family, font-style, font-weight, font-size, and font-variant. Let’s discuss each of these font properties one by one in more detail. 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 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 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 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 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 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 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 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

Setting Background Properties Background plays an important role in the visual presentation of a web page. CSS provide several properties for styling the background of an element, including coloring the background, placing images in the background and managing their positioning, etc. The background properties are background-color, background-image, background-repeat, background-attachment and background-position. In the following section we will discuss each of these properties in more detail. Background Color The background-color property is used to set the background color of an element. The following example demonstrates how to set the background color of the whole page. Example Color values in CSS are most often specified in the following formats: Please check out the tutorial on CSS color to learn more about specifying color values. Background Image The background-image property set an image as a background of an HTML element. Let’s check out the following example which sets the background image for the whole page. Example Note: When applying the background image to an element, make sure that the image you choose does not affect the readability of the element’s text content. Tip: By default browser repeats or tiles the background image both horizontally and vertically to fill the entire area of an element. You can control this with background-repeat property. Background Repeat The background-repeat property allows you to control how a background image is repeated or tiled in the background of an element. You can set a background image to repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction. Let’s try out the following example which demonstrates how to set the gradient background for a web page by repeating the sliced image horizontally along the x-axis. Example Similarly, you can use the value repeat-y to repeat the background image vertically along the y-axis, or the value no-repeat to prevent the repetition altogether. Example Let’s take a look at the following illustration to understand how this property actually works. Background Position The background-position property is used to control the position of the background image. If no background position has been specified, the background image is placed at the default top-left position of the element i.e. at (0,0), let’s try out the following example: Example In the following example, the background image is positioned at top-right corner. Example Note: If two values are specified for the background-position property, the first value represents the horizontal position, and the second represents the vertical position. If only one value is specified, the second value is assumed to be center. Besides keywords, you can also use percentage or length values, such as px or em for this property. Let’s take a look at the following illustration to understand how this property actually works. Background Attachment The background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block. Let’s try out the following example to understand how it basically works: Example The Background Shorthand Property As you can see in the examples above, there are many properties to consider when dealing with the backgrounds. However, it is also possible to specify all these properties in one single property to shorten the code or avoid extra typing. This is called a shorthand property. The background property is a shorthand property for setting all the individual background properties, i.e., background-color, background-image, background-repeat, background-attachment and the background-position property at once. Let’s see how this works: Example Using the shorthand notation the above example can be written as: Example When using the background shorthand property the order of the property values should be. background: color image repeat attachment position; If the value for an individual background property is missing or not specified while using the shorthand notation, the default value for that property will be used instead, if any. Note: The background properties do not inherit like the color property, but the parent element’s background will be visible through by default, because of the initial or default transparent value of the background-color CSS property.

Setting Color Property The color property defines the text color (foreground color in general) of an element. For instance, the color property specified in the body selector defines the default text color for the whole page. Let’s try out the following example to see how it works: Example Note: The color property normally inherits the color value from their parent element, except the case of anchor elements. For example, if you specify color for the body element it will automatically be passed down to the headings, paragraphs, etc. Defining Color Values Colors in CSS most often specified in the following formats: CSS3 has introduced several other color formats such as HSL, HSLA and RGBA that also support alpha transparency. We’ll learn about them in greater detail in CSS3 color chapter. For now, let’s stick to the basic methods of defining the color values: Color Keywords CSS defines the few color keywords which lets you specify color values in an easy way. These basic color keywords are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. The color names are case-insensitive. Example Modern web browsers however practically support many more color names than what are defined in the CSS standard, but to be on the safer side you should use hex color values instead. See the reference on CSS color names, for a complete list of possible color names. HEX Color Values Hex (short for Hexadecimal) is by far the most commonly used method of defining color on the web. Hex represent colors using a six-digit code, preceded by a hash character, like #rrggbb, in which rr, gg, and bb represents the red, green and blue component of the color respectively. The value of each component can vary from 00 (no color) and FF (full color) in hexadecimal notation, or 0 and 255 in decimal equivalent notation. Thus #ffffff represents white color and #000000 represents black color. Let’s take a look the following example: Example Note: Hexadecimal or Hex refers to a numbering scheme that uses 16 characters as its base. It uses the numbers 0 through 9 and the letters A, B, C, D, E and F which corresponds to the decimal numbers 10, 11, 12, 13, 14 and 15 respectively. Tip: If hexadecimal code of a color has value pairs, it can also be written in shorthand notation to avoid extra typing, for example, the hex color value #ffffff can be also be written as #fff, #000000 as #000, #00ff00 as #0f0, #ffcc00 as #fc0, and so on. RGB Color Values Colors can be defined in the RGB model (Red, Green, and Blue) using the rgb() functional notation. The rgb() function accepts three comma-separated values, which specify the amount of red, green, and blue component of the color. These values are commonly specified as integers between 0 to 255, where 0 represent no color and 255 represent full or maximum color. The following example specifies the same color as in the previous example but in RGB notation. Example Note: You can also specify RGB values inside the rgb() function in percentage, where 100% represents full color, and 0% (not simply 0) represents no color. For example, you can specify the red color either as rgb(255, 0, 0) or rgb(100%, 0%, 0%). Tip: If R, G, and B are all set to 255, i.e. rgb(255, 255, 255), the color would be white. Likewise, if all channels are set to 0, i.e. rgb(0, 0, 0), the color would be black. Play with the RGB values in the following demonstration to understand how it actually works. rgb(127, 127, 127) Red: 127 Green: 127 Blue: 127

Understanding CSS Syntax A CSS stylesheet consists of a set of rules that are interpreted by the web browser and then applied to the corresponding elements such as paragraphs, headings, etc. in the document. A CSS rule have two main parts, a selector and one or more declarations: The selector specifies which element or elements in the HTML page the CSS rule applies to. Whereas, the declarations within the block determines how the elements are formatted on a webpage. Each declaration consists of a property and a value separated by a colon (:) and ending with a semicolon (;), and the declaration groups are surrounded by curly braces {}. The property is the style attribute you want to change; they could be font, color, background, etc. Each property has a value, for example color property can have value either blue or #0000FF etc. h1 {color:blue; text-align:center;} To make the CSS more readable, you can put one declaration on each line, like this: Example In the example above h1 is a selector, color and text-align are the CSS properties, and the given blue and center are the corresponding values of these properties. Note: A CSS declaration always ends with a semicolon “;“, and the declaration groups are always surrounded by the curly brackets “{}“. Writing Comments in CSS Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the CSS. Comments are significant to programmers but ignored by browsers. A CSS comment begins with /*, and ends with */, as shown in the example below: Example You can also comment out part of your CSS code for debugging purpose, as shown here: Example Case Sensitivity in CSS CSS property names and many values are not case-sensitive. Whereas, CSS selectors are usually case-sensitive, for instance, the class selector .maincontent is not the same as .mainContent. Therefore, to be on safer side, you should assume that all components of CSS rules are case-sensitive. You will learn about the various types of CSS selectors in the next chapter.

Getting Started with CSS In this tutorial you’ll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML. If you’re just starting out in the world of web development, start learning from here » Without further ado, let’s get started with the Cascading Style Sheets (CSS). Including CSS in HTML Documents CSS can either be attached as a separate document or embedded in the HTML document itself. There are three methods of including CSS in an HTML document: In this tutorial we will cover all these three methods for inserting CSS one by one. Note: The inline styles have the highest priority, and the external style sheets have the lowest. It means if you specify styles for an element in both embedded and external style sheets, the conflicting style rules in the embedded style sheet would override the external style sheet. Inline Styles Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute. The style attribute includes a series of CSS property and value pairs. Each “property: value” pair is separated by a semicolon (;), just as you would write into an embedded or external style sheets. But it needs to be all in one line i.e. no line break after the semicolon, as shown here: Example Using the inline styles are generally considered as a bad practice. As style rules are embedded directly inside the HTML tag, it causes the presentation to become mixed with the content of the document; which makes the code hard to maintain and negates the purpose of using CSS. Note: It’s become impossible to style pseudo-elements and pseudo-classes with inline styles. You should, therefore, avoid the use of style attributes in your code. Using external style sheets is the preferred way to add styles to the HTML documents. Embedded Style Sheets Embedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head> tags. Let’s take a look at an example: Example Tip: The type attribute of the <style> and <link> tag (i.e. type=”text/css”) defines the language of the style sheet. This attribute is purely informative. You can omit this since CSS is the standard and default style sheet language in HTML5. External Style Sheets An external style sheet is ideal when the style is applied to many pages of the website. An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file. You can attach external style sheets in two ways — linking and importing. Linking External Style Sheets Before linking, we need to create a style sheet first. Let’s open your favorite code editor and create a new file. Now type the following CSS code inside this file and save it as “style.css”. Example An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section, as you can see in the following example: Example Tip: Among all the three methods, using external style sheet is the best method for defining and applying styles to the HTML documents. As you can clearly see with external style sheets, the affected HTML file require minimal changes in the markup. Importing External Style Sheets The @import rule is another way of loading an external style sheet. The @import statement instructs the browser to load an external style sheet and use its styles. You can use it in two ways. The simplest is within the header of your document. Note that, other CSS rules may still be included in the <style> element. Here’s an example: Example Similarly, you can use the @import rule to import a style sheet within another style sheet. Example

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. 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? 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.