About The Latest Versions of HTML5 and CSS

About The Latest Versions of HTML 5 and CSS

If you're a web designer, you should know the recent changes to both CSS and HTML. The latest version of HTML is HTML 5, which has changed the face of web page design. The latest version of CSS is CSS 3. Both of these versions work together to create interactive desktop applications that work on both a desktop browser and a mobile browser. The mobile browser experience is called "responsive design," and it's becoming a critical part of website design since mobile traffic is a growing dominance in Internet user traffic. HTML 5 has phased out many of the tags used in older versions, and these tags are replaced by better HTML 5 code and CSS classes.

What's New in HTML 5 and CSS 3?

If you've worked with HTML before, you've probably used older tags such as frames, framesets, font, and center. Some tags will still be rendered, but they are replaced by better CSS representation. These tags include font styling tags such as i (italics), b (bold), and u (underline).

Old style layouts used frames to define a layout and positioning for page elements, but now HTML pages are based on div elements and the div element's corresponding CSS class. This is still true for HTML 5, but HTML 5 also offers a header, footer, section and article tags. These tags are used to lay out basic sections of a page. For instance, the header tag is shown at the top of the page and the footer displays footer elements along the bottom of the page.

CSS 3 also brings several new styles that weren't previously seen in older versions. One great new class styling attribute is the rounded borders you can add to tables or div tags. The "border-radius" attribute defines the depth of roundness on a border.

Another popular change is the gradient attribute. A gradient style will set a subtle change of one color to the next within a specified tag. These gradients are standard when you want to set a gradient in the background of your web pages. Usually, designers set a gradient from the top to the bottom of the page. You can also set gradients within buttons in your navigation at the top of the page. The gradient styles give your buttons a 3 dimensional look and feel to the page.

Finally, another common CSS 3 attribute is the shadowing effect. Shadows also give your buttons, text or div tags some depth and a 3 dimensional feel. Your design is an imperative part of the user interface for your pages, so keeping up with the latest designs help you keep your pages looking fresh.

A Look at the New CSS Styles

It's not enough to know the new style names and values for CSS 3. You also need to know how to use them. Let's first take a look at the border-radius attribute.

In old HTML and CSS styles, borders were usually not rounded, but new web design styles call for rounded borders. It used to be that you needed to create images that would round the borders of a div or table. This caused difficulties for designers who had to align border images with other parts of the page. Now, you can just use CSS with your HTML tags. Tables are not as commonly used, so we'll use an example using a div tag.

The following code is a CSS style that affects all div HTML elements on a page.

div {
border: 1px solid;
border-radius: 20px;
}

The above CSS first uses the div selector, which tells you that all div elements are affected. The next two lines of code are the declarations. The first "border" property surrounds the div with a 1-pixel border. All div elements have a border, but they are invisible by default. This declaration basically brings out the border and displays it on the page. The "solid" value tells the browser to just make a solid line around the div. You can also create dotted lines of different lengths around an element.

The next declaration is the radius. Most designers need to experiment with the radius pixels to get the right rounded look. The higher the value, the more rounded the border is on all sides.

The next CSS 3 attribute we mentioned was the gradient style. Gradient styles use the first color code (in hex notation in HTML) and gradually change the color across the element or page to the second color. If you've ever viewed current web design, you've probably seen this gradient attribute style in action without even realizing it. Usually, you use a color that's similar to the first to make a gradual 3D effect, but you can use two totally separate colors in your CSS and HTML code. You also have the option to create a linear gradient or a radial gradient. A linear gradient changes the color from one point to the next in a straight line. A radial gradient creates a circular change in color.

The standard code for a gradient is the following CSS.

background: linear-gradient(direction, color-stop1, color-stop2, ...);

The direction tells the browser where to start the gradient action. In the above code, the gradient is linear, so you can start at the top, bottom, left or right of the element. The next parameters give the hexadecimal color codes (or predefined named colors such as "red" or "green") for each gradient point. Notice that you can have more than two colors in your gradient action.

The following CSS code creates a linear gradient from red to blue that starts at the top of the div element.

div.gradient {
background: linear-gradient(top, red, blue);
}

You can also specify the direction from left to right or from a corner to another corner. For instance, the following CSS code is the same as the above, but the difference is that the gradient goes from the left to the right defined in the first parameter.

div.gradient {
background: linear-gradient(to right, red, blue);
}

If you want to move the gradient from the top-left corner to the bottom-right corner, you'd use the following CSS 3 code.

div.gradient {
background: linear-gradient(to bottom right, red, blue);
}

Incidentally, all of the three CSS classes above use the linear gradient function. As we mentioned, you can also make radial or circular gradients. The only difference is that you change "linear-gradient" to "radial-gradient" in your CSS code. The following code is an example.

div.gradient {
background: radial-gradient(red, blue);
}

Finally, we mentioned the shadowing attribute of the new CSS 3. If you did any web design years ago, you probably remember making images that gave you the power of shadowing. You no longer need images, which makes web design much easier.

If you recall from the second chapter, the above CSS selector specifies a div and a class. Therefore, the above classes can only be applied to a div tag with the "gradient" class defined. The following HTML code applies the above CSS classes.

Interested in learning more? Why not take an online CSS course?

<div class="gradient"> This file contains my first HTML 5 code with CSS 3. </p>

Shadowing is usually performed on a button or a div. The following code is an example of a simple shadow CSS 3 class.

div.shadowbox {
box-shadow: 5px 5px 2px #888888;
}

There are four values in the box-shadow property, but only the first two are actually required. The first two values are the "size" of the shadow. The first "5px" value is the horizontal shadow. The second "5px" value is the vertical shadow. The third value is the blur value. Higher blur values blur the shadow more where lower values make the shadow more of a solid color. The hexadecimal color in the fourth value parameter is the color of the shadow. This particular color is a dark gray shadow.

Again, after you create the CSS 3 class, you must apply it to your HTML. The selector you use determines which elements you can attach to the class. The following code uses the new shadowbox class on a div element.

<div class="shadowbox"> This file contains my first HTML 5 code with CSS 3. </p>

The new HTML elements and CSS 3 styles are a perfect way to make your web design interactive and more easily created. You can ditch old style images for better CSS 3 classes in your designs. These above three classes are some of the most common in CSS 3, but you can find several others that make your designs easier to create.

Setting Up Web Pages with CSS

This section will cover some basics of inserting CSS classed in your coding projects.

Understanding DocType

If you've ever looked at HTML code in a browser or code editor, you probably noticed a "doctype" tag. The doctype tag is technically not an HTML tag. In fact, the doctype tag defines the type of HTML in the document. It's a directive for browsers to help them understand what version of HTML is used in the file. This can be confusing for users and even developers when you want to know what doctype must be used. Search engines might also use the doctype directive (depending on the search engine), so it's important that you use the right one when you set up your pages.

If you're using the latest HTML 5, then the doctype is actually the simplest of all the previous versions. The following HTML file uses the standard HTML 5 doctype directive.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<p> This file contains my first HTML code. </p>

</body>

</html>

The above code tells the browser and search engines to use the HTML 5 engine. There are doctype attributes for all versions of HTML, but sometimes you need to use an engine that uses not only HTML 4 but also deprecated tags such as the <frame> tag. If that's the case, you would use the following doctype.

<!DOCTYPE html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Using Inline CSS Styles

Many code generates don't create external CSS files. Instead, the code generators use CSS styles directly in the HTML code. You can use the <style> tag to create CSS styles directly in the HTML file's <head> tag. While this is not the most efficient way to handle CSS styles, you might have to edit this code in the future or insert a style directly into the HTML code.

We can use the same styles as we have used previously. For instance, suppose we want to create a style for the <p> tags within the document. You don't have access to create an external CSS file, so you're forced to create the style within the HTML code itself. You can do this using the <style> tag. The following code is an example of inline CSS styles.

<!DOCTYPE html>
<html>

<head>

<style>

p {
color: red;
text-align: center;
}

</style>

<title>This is my first web page</title>

</head>
<body>

<p> This file contains my first HTML code. </p>

</body>

The above HTML code contains the style tag in the <head> section. This CSS class affects all <p> tags, so the content rendered from the user's browser will be red and aligned in the center of the document.

Using External CSS Files

The previous code will work in any browser that offers HTML 5 support (remember the doctype), but you generally want to keep your CSS styles in a separate file. What happens when you have the same style inserted directly into all of your HTML files and you want to change the style? You have no way of globally making changes. You must go through each HTML file and manually changed the styles within the <style> tag. If you have hundreds or thousands of pages, this can be tedious. Plus, you have the chance of missing a file and causing awkward styles to stay on certain pages among other pages with different, changed CSS styles.

The answer to this problem is to create one CSS file that is stored within your HTML project and insert this file into your HTML. When you change the one external file, the changes propagate to all linked HTML files. In other words, you make a global change to your website layout in one place. This type of coding makes redesigns much more efficient and has a much lower chance of layout and design bugs.

A CSS file has only the classes in it. There is no <style> tag, because this is an HTML tag. You only have CSS classes. For instance, the following code has two styles that could make up a CSS file.

p {
color: red;
text-align: center;
}

div.shadowbox {
box-shadow: 5px 5px 2px #888888;
}

You'll probably recognize these two styles from previous chapters. You can save this text in a file named "styles.css," which is the standard name for the basic CSS styles for a website. In some cases, you can save the styles into a separate directory. Since you usually have more than one CSS file inserted into an HTML file, it's best to create a separate directory for your CSS files. After you've saved your file, you can then insert it into your HTML files. You might recognize the following code from chapter 1, but this time the CSS "shadowbox" class is used in the div tag.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<div class="shadowbox"> This file contains my first HTML code. </div>

</body>

</html>

Notice there is a bit of difference between the HTML posted in chapter one and this HTML file. First, the CSS file is located in the "mystyles" directory, which is our directory for all CSS files. Next, the div HTML tag calls the class created earlier called "shadowbox." This style isn't anywhere in the HTML code, but it still applies to the div. This is because the browser links the CSS styles to the HTML page with the link tag. You can call any CSS class in the "styles.css" file and apply it to your code.

You're not limited to using CSS files on your own website server. In some cases, using cloud files is faster since the CSS is rendered from data centers. This type of coding is usually implemented to speed up rendering of a website, especially when coding for mobile users. Data centers render files from the closest geographical location from the user, so it speeds up your pages. In this case, you would link a CSS file from a cloud server such as Google or Amazon cloud servers.

The following code gives you an example of using jQuery CSS styles using Google's cloud servers.

<!DOCTYPE html>
<html>

<head>

<title>This is my first web page</title>

</head>
<body>

<div class="shadowbox"> This file contains my first HTML code. </div>

</body>

</html>

Notice that the "//" characters are used with no specification of "http" or "https." When you use two forward slashes without the protocol, the cloud server will use either https or http, depending on the page calling the CSS file. This is especially important when you have https pages on your site. If you accidentally call an http CSS file from an https page (or vice versa), the browser will display an error to the user, which can affect your sales and customer engagement.

The cloud host will then render the file to the browser along with your website's HTML. When you have several CSS files, you should use cloud servers for performance.

Finally, it should be noted that there is a "cascading order" to CSS files. What happens when you accidentally have two styles for the same element? There is an order to which the browser handles these errors. The browser default is first used, so it depends on the viewer's browser. Next, the external spreadsheet is used, then the internal style sheet, and finally the inline style used in the style properties is used. This is important when you try to identify errors in layouts.

Linking CSS files and understanding doctype declarations are an important part of HTML and website design. You will likely have multiple CSS files when you deal with any significantly sized website. Keeping CSS classes in separate files in a separate directory will help you keep your layout organized as well as help you figure out bugs in your layouts and designs.