Beginning HTML5 and CSS3 For Dummies book cover

Beginning HTML5 and CSS3 For Dummies

By: Ed Tittel and Chris Minnick Published: 09-03-2013

Your full-color, friendly guide to getting started with HTML5 and CSS3!

HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This friendly-but-straightforward guide gets you started with the basics of the latest versions of HTML and CSS: HTML5 and CSS3. Introducing you to the syntax and structure of the languages, this helpful guide shows you how to create and view a web page, explains ideal usage of HTML5 and CSS3, walks you through the CSS3 rules and style sheets, addresses common mistakes and explains how to fix them, and explores interesting HTML5 tools.

  • Serves as an ideal introduction to HTML5 and CSS3 for beginners with little to no web development experience
  • Details the capabilities of HTML5 and CSS3 and how to use both to create responsive, practical, and well-designed websites
  • Helps you understand how HTML5 and CSS3 are the foundation upon which hundreds of millions of web pages are built
  • Features full-color illustrations to enhance your learning process

Beginning HTML5 and CSS3 For Dummies is the perfect first step for getting started with the fundamentals of web development and design.

Articles From Beginning HTML5 and CSS3 For Dummies

page 1
page 2
page 3
page 4
page 5
page 6
59 results
59 results
Beginning HTML5 & CSS3 For Dummies Cheat Sheet

Cheat Sheet / Updated 03-18-2022

Hypertext Markup Language (HTML) and the Cascading Style Sheet (CSS) language are the lifeblood of web pages. Even experienced web designers and authors need help sometimes. This Cheat Sheet provides a quick color code guide, a table of HTML5 elements, and a table of CSS properties.

View Cheat Sheet
10 Stellar Web Resources for HTML5 and CSS3

Step by Step / Updated 02-09-2017

All web developers have essential sites they refer to over and over. Some resources are so good and so important that they make pretty much everyone's list, no matter what your skill level or how many years (or days?) of experience you may have. The following sites are some of the best of the best resources for any budding or experienced HTML5 developer.

View Step by Step
Know Your Elements!

Article / Updated 03-26-2016

Appearing in alphabetical order is a list of all the HTML5 elements contained in the current HTML5 specification. A brief description is included as a quick reference when looking for the perfect element. Element Description A Use to create hyperlinks Abbr Use for abbreviations address Contact information Area Hyperlink in an image-map article* Provides section formatting for short expository items like articles, blogs, etc. aside* Slightly related piece of content for host page audio * Used to add audio for playback associated with web page b Bold text base Base URL bdi* Isolate text that might be formatted in a different direction from text around it bdo Use to specify the direction of text blockquote Block quotation body Document body br Line break button Creates a button. canvas* Use to define a page region in which drawing can occur caption Table title cite Cited title of a work code Code fragment col Column in a table colgroup Group of table columns command* Use to define user GUI elements datalist* Use to create a list of input elements for pull-down menus dd Description del Deleted text details* Provides additional information or controls to users on demand dfn Defining instance div Generic container dl Description list dt Term or name em Emphasis embed * Links to external application or interactive content fieldset Related form controls figcaption* Provide a caption for a figure element figure* Standalone flow content element; may be static or dynamic footer* Concluding information for a document section form Defines a user-submittable form h1 - h6 Headings head Container for metadata about the document, scripts, and styles header* Header for the document hgroup* Heading group hr Horizontal rule / thematic break html Root element i Italic text iframe Nested browsing content img Image input Input control ins Inserted text kbd User input keygen* User-accessible control to generate key pairs for security or encryption label Caption for a form control legend Explanatory caption li List item link Metadata for linking external documents map Define an image-map mark* Mark or highlight a run of text in one document, for reference in another document menu List of commands meta Metadata meter* Define a visual indicator for some type of measurement nav* Use to define a navigation bar or area in a web page noscript Define content to display in case the script can’t be run object External content ol Ordered list optgroup Define a group of options output* Some kind of output from script calculation or API call p Paragraph param Use to provide parameters to plugins pre Preformatted text progress* A visual meter for task completion (progress bar) q Quoted text rp* Use for putting parentheses around ruby annotations rt* Use to mark the text of a ruby annotation ruby* Use to annotate ideographic languages like Chinese or Japanese s Mark text as removed, with strike through formatting. samp Sample output script Embedded script section* Generic document or application section select Option selection form control small Small text source* Use to specify multiple sources for audio and video span A generic text wrapper strong Important text. Is usually formatted as bold style Presentation information, typically CSS sub Subscript text summary* Summary, legend, or caption for input details information sup Superscript text table Table tbody Group of table rows td Table cell textarea Text input area tfoot Table footer row group th Table header cell thead Table heading row group time* Value for representing date and/or time title Document title tr Table row track* Specify a supplementary media track u Underline ul Unordered list var Use to specify a mathematical or programming variable, or a placeholder video * Use to playback video content in web page wbr * Use to denote possible line break point for text flow * New in HTML5

View Article
CSS Property Reference

Article / Updated 03-26-2016

The following table shows CSS properties that are supported by most browsers today, along with their allowed values. Some of these properties are part of CSS3 specifications and are still experimental, so be sure to check with the Can I Use site for the latest information on browser support. (For help reading the Values column of this chart, see the article “A Quick Guide to the CSS Value Definition Syntax” at www.dummies.com/extras/beginninghtml5css3.) Name Values animation || || || || || || animation-delay animation-direction normal | alternate | reverse | alternate reverse animation-duration animation-fill-mode none | forwards | backwards | both animation-iteration-count infinite | animation-name none | animation-play-state running | paused animation-timing-function backface-visibility visible | hidden background-attachment scroll | fixed | inherit background-clip border-box | padding-box | content-box | inherit background-color | inherit background-image | none | inherit background-origin border-box | padding-box | content-box | inherit background-position [ [ | | left | center | right ] [ | | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit background-repeat repeat | repeat-x | repeat-y | no-repeat | inherit background-size | | auto | cover | contain background [‘background-color’ || ‘background-image’ ||‘background-repeats’ ||‘background-attachment’ ||background-position] | inherit border-collapse collapse | separate | inherit border-color [ ]{1,4} | inherit border-image none | border-image-outset ['sides' || 'horizontal' || 'vertical' || 'top' || 'bottom' || 'right' || 'left'] | inherit border-image-repeat ['type' || 'horizontal' || 'vertical' || 'stretch' || 'repeat' || 'round'] | inherit border-image-source none | border-image-slice [ | ]{1,4} && fill? border-image-width [ | | | auto ]{1,4} border-radius [ | ]{1,4} [ / [ | ]{1,4} ]? border-spacing ? | inherit border-style {1,4} | inherit border-top border-right border-bottom border-left [ || ||border-top-color ] | inherit border-top-color border-right-color border-bottom-color border-left-color | inherit border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius [ | ]{1,2} border-top-style border-right-style border-bottom-style border-left-style | inherit border-top-width border-right-width border-bottom-width border-left-width | inherit border-width {1,4} | inherit border [ || ||border-top-color ] | inherit bottom | | auto | inherit box-shadow none | [inset? && [ ? ? ? ] ]# break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-column break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-column caption-side top | bottom | inherit clear none | left | right | both | inherit clip | auto | inherit color | inherit columns <'column-width'> || <'column-count'> column-count | auto column-fill auto | balance column-gap | normal column-rule <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'> column-rule-color column-rule-style [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] | inherit column-rule-width | [thin | medium | thick] column-span none | all | inherit column-width | auto content normal | none | [ | | | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit counter-increment [ ? ]+ | none | inherit counter-reset [ ? ]+ | none | inherit cursor [ [ ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit direction ltr | rtl | inherit display inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit empty-cells show | hide | inherit float left | right | none | inherit font-family [ [ | ] [,| ]* ] | inherit font-size | | | | inherit font-style normal | italic | oblique | inherit font-variant normal | small-caps | inherit font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit font [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]?‘ font-size’ [ / ‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit height | | auto | inherit @keyframes [ [ from | to | ] [, from | to | ]* block ]* left | | auto | inherit letter-spacing normal | | inherit line-height normal | | | | inherit list-style-image | none | inherit list-style-position inside | outside | inherit list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit list-style [ ‘list-style-type’ || ‘list-style-position’ ||list-style-image ] | inherit margin-right margin-left | inherit margin-top margin-bottom | inherit margin {1,4} | inherit max-height | | none | inherit max-width | | none | inherit min-height | | inherit min-width | | inherit opacity | inherit orphans | inherit outline-color | invert | inherit outline-style | inherit outline-width | inherit outline [ ‘outline-color’ || ‘outline-style’ || outline-width] | inherit overflow visible | hidden | scroll | auto | inherit overflow-wrap normal | break-word | inherit overflow-x visible | hidden | scroll | auto | inherit overflow-y visible | hidden | scroll | auto | inherit padding-top padding-right padding-bottom padding-left | inherit padding {1,4} | inherit page-break-after auto | always | avoid | left | right | inherit page-break-before auto | always | avoid | left | right | inherit page-break-inside avoid | auto | inherit perspective none | perspective-origin [ | | left | center | right | top | bottom] | [ [ | | left | center | right ] && [ | | top | center | bottom ] ] position static | relative | absolute | fixed | inherit quotes [ ]+ | none | inherit right | | auto | inherit table-layout auto | fixed | inherit text-align left | right | center | justify | inherit text-decoration none | [ underline || overline || line-through || blink ] | inherit text-indent | | inherit text-transform capitalize | uppercase | lowercase | none |inherit top | | auto | inherit transform none | + transform-origin [ | | left | center | right | top | bottom] | [ [ | | left | center | right ] && [ | | top | center | bottom ] ] ? transform-style flat | preserve-3d transition [ none | ] || || || transition-delay transition-duration transition-timing-function transition-property none | # [ ‘,’ # ]* unicode-bidi normal | embed | bidi-override | inherit vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit visibility visible | hidden | collapse | inherit white-space normal | pre | nowrap | pre-wrap | pre-line |inherit widows | inherit width | | auto | inherit word-spacing normal | | inherit z-index auto | | inherit

View Article
Named Colors and Hex Values in HTML

Article / Updated 03-26-2016

The following table contains a list of named colors you can use in HTML and CSS code to create a more colorful website. The colors are shown with their corresponding RGB hexcode values along with a representative color swatch. Name Hexcode Aqua #00FFFF Black #000000 Blue #0000FF Fuchsia #FF00FF Gray #808080 Green #008000 Lime #00FF00 Maroon #800000 Navy #000080 Olive #808000 Purple #800080 Red #FF0000 Silver #C0C0C0 Teal #008080 White #FFFFFF Yellow #FFFF00

View Article
A Quick Guide to the CSS Value Definition Syntax

Article / Updated 03-26-2016

The CSS specifications, created by the World Wide Web Consortium (W3C), define the syntax and possible values of all CSS properties. To make definitions as precise as possible, the W3C uses a formal system called CSS value definition syntax. Although the definition syntax defines possible values very precisely, reading the syntax that CSS value definitions are written in can be difficult without a key. In reality, however, reading such syntax is quite simple. For example, here's the syntax for the value of the margin shortcut property: [ | | auto ]{1,4} And here are valid uses of the margin property: margin: 0px; margin: 1px 10%; margin: 1px 0px auto; margin: 1px 0px 1px 0px; Even if you didn't know what the margin property or each of these examples does, you could figure out how to read the syntax definition just by looking at the definition and then examining the examples. Here’s a quick guide to reading CSS value definition syntax: When a keyword appears without quotes, it indicates that the word should be used as it is, such as in the case of the auto keyword in the above example. Basic CSS data types appear between < and >. For example, , , and are basic types that are defined elsewhere. When you see one of these types, you know that any valid value in that data type may be used. When you see two ampersands together (&&), it means that the values separated by this symbol are both mandatory, but, they may appear in any order. Brackets ([]) group values together into one. Values separated by || are optional. However, one of them must appear, and they may appear in any order. The | character means that the options are exclusive — exactly one of them must appear. The asterisk (*) indicates that a value may appear zero, once, or several times. The plus symbol (+) means that a value may appear once or several times. The question mark (?) indicates that a value is optional. If it appears, it may only appear once. When you see , it means that a fixed length value such as 10px is allowed. When you see , it means that a percentage value such as 10 percent is allowed. When you see numbers in brackets such as {1,4}, it indicates that the property must appear the number of times specified by the first number. However, it can appear as many times as indicated by the second number. In the case of {1, 4}, the property must appear once but may appear as many as four times. The # symbol indicates that a value may be repeated once or several times. Each value must be separated by a comma.

View Article
Mobile First Web Design

Article / Updated 03-26-2016

Two big categories of strategies have been employed over the years to support web design for mobile devices: graceful degradation and progressive enhancement. Much of the web is currently nearly unusable on mobile devices because it was designed for desktop browsers and doesn't adapt well to small screens. Mobile web users are often forced to zoom, scroll, pinch, squint, and make their fingers as small as possible to use the majority of websites designed more than a couple years ago. Graceful degradation web design strategy for mobile devices The idea behind graceful degradation is to design your website primarily for desktop users, but to also design it in such a way that features of the desktop site that won't work or fit on mobile devices will still be usable — if not pretty or as functional — on mobile devices. Graceful degradation was a good design philosophy in the days before smartphones with full-featured browsers existed. However, graceful degradation does have major problems. Most importantly, graceful degradation forces the user to download your whole website, only to be shown a degraded version of it. On mobile devices, which often have limited bandwidth, this is not a good thing. Progressive enhancement web design strategy for mobile devices As a result of graceful degradation's limitations, a new strategy called progressive enhancement has become popular. Progressive enhancement starts with the very most basic website and adds on features depending on what the user's browser supports. Progressive enhancement enables websites to be usable even when using a very basic mobile phone. The mobile browser doesn't need to download a lot of CSS and JavaScript code (for example) that it doesn't know what to do with. One way to visualize progressive enhancement is as a system that adds layers onto a website depending on the size of the browser or the features the browser supports. Here's a simple example of how two style sheet links can be used to enhance a mobile webpage for larger browsers: The first link includes style.css for any screen or handheld device. In this case, style.css contains styles that are optimized for a mobile device. The second link is for a style sheet called enhanced.css. If you look at the media attribute for this link, you'll notice that it has a min-width condition. The enhanced.css file will only be included if the device is larger than 800px. Inside enhanced.css, the web designer can override properties from the style.css style sheet to make the browser scale up for larger browser widths. Mobile first design solves the browser size issue Mobile first is a design philosophy that employs the ideas of progressive enhancement to build mobile websites first and then enhance them for desktop. The great thing about mobile first design is that when you build the mobile site first, as opposed to the other way around, you get a functional desktop site for free! Think about all the websites you've seen that don't fit in mobile browsers. Now, imagine visiting a mobile website with a desktop computer. A website that is optimized for a small screen will always work on a desktop browser — even if it does end up not filling the entire browser window.

View Article
How to Use the meta Element in HTML5

Article / Updated 03-26-2016

HTML meta elements provide information about an HTML document. A web page may have many meta elements, or very few (and sometimes none at all). When present, they must always appear in the document head. This article explains some of the uses of the meta element. meta format and attributes Here's a sample meta element: Notice that the meta element is empty, and has no closing tag. In HTML5, there's no need to close meta. This is one way in which the HTML5 meta tag is simpler than the XHTML meta tag. The four attributes defined for meta are name. When present, the name attribute gives a name for the metadata. http-equiv. Used for binding values to the HTTP header of a document when it is served from a web server. content. Contains the value associated with the http-equiv or name attribute. charset. Defines the set of characters used in the document. meta names defined by HTML5 The HTML5 specification mentions several possible values for the name attribute. These are application-name. Specifies the name for the web application that the document represents. For example, if you created a web application called "Taco-matic," you could use the application-name attribute on pages within that application like this: author. Gives the name of one of the authors of the document. If the document has multiple authors, the document can have multiple author meta elements. description. Describes the content of the document. You can put anything you like in the description meta element, but there can only be one such element per document. generator. If the document is created using some sort of HTML page-creation software (such as Dreamweaver or Aptana Studio), the generator meta element identifies which one was used. keywords. Contains a comma-separated list of terms relevant to the current page. In addition to these name values, it's also possible for anyone who has a need to propose and register their own name values. The charset meta element Perhaps the most common meta element attribute is charset. Introduced with HTML5, charset provides a quick and easy way to specify to the browser what character encoding was used to author a page. You should always include a charset meta tag in every HTML5 document you write. Here's what it looks like: Character encodings define the mappings between characters that are displayed on the screen and bits that are stored on the computer. Different character encodings exist for different alphabets and languages (Chinese, Japanese, Russian, and English for example) and other character encodings are more universal. The most common character encoding is known as UTF-8, which can encode over 1 million different characters. Using http-equiv meta elements You can use the http-equiv meta element to send information to the server about how a web page should be served. In HTML versions that preceded HTML5, the most common use for http-equiv was to specify the character encoding for a document. Because this has been replaced with the charset attribute, http-equiv is less commonly used (and encountered) in HTML5. Nevertheless, there are a couple things that you can do with http-equiv. Most common is the refresh value, which tells the browser to reload the page after a specified number of seconds. You can also use http-equiv="refresh" to redirect a user to another URL after a specified number of seconds has elapsed. For example, the following tag causes the browser to wait 30 seconds after the page containing it loads and then to load http://www.example.com: For more information on the meta element in HTML5, go to w3schools.com.

View Article
How to Draw and Animate Graphics with HTML5 canvas

Article / Updated 03-26-2016

One of the exciting new parts of HTML5 is the canvas element. Using canvas, you can draw bitmap graphics inside the browser window. What's even more impressive and useful is that you can write a program that will draw graphics on the fly inside the browser window. How does canvas work? The canvas element creates a container, or canvas, upon which you can draw graphics. A simple example of a canvas element that creates a 300-pixel square drawing area looks like this: Once you have the canvas, you must write a script, using JavaScript, to put things inside the drawing area. Images drawn inside a canvas element are very different from the static images that are traditionally used in web pages, where you must create and upload the graphics to the server before the browser loads them into web pages using the img tag. Images loaded with the img tag can't be changed after they're displayed in the browser. Web developers have some ability to move or resize the images, but if it's a picture of your cat, for example, there's no way to transform it into a picture of your bike. With graphics, the situation is very different. Because the script is doing the drawing after the web page loads, the graphic can be anything at all, and it can be drawn very fast. canvas works extremely well for drawing charts and graphs, but it can also be used to manipulate photographs in real-time, or even to create animation or work with video files. Here's a simple example of a JavaScript function that will draw a solid rectangle when used from inside an HTML document: function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(25,25,100,100); } } What is canvas good for? Because of its ability to manipulate graphics very quickly using programs that can be controlled with user input, canvas graphics are ideal for gaming. Some of the most popular games created with canvas include Sinuous is a simple, but addictive, game where you control a pointer that you move around to avoid red dots and hit good dots. Canvas Rider is a beautiful 2D scrolling game where you control a stick figure on a bike, riding over hundreds of user-contributed tracks. ZTYPE is a game where you must type words as they are falling towards you. As you type the letters in each word, they are shot out of the sky. canvas is also good for creating graphs and charts that are updated in real-time using live data, or for enabling your users to manipulate graphics over the web. The potential uses for HTML5 canvas are limited only by your imagination—and by your programming skills, of course. As of August 2013, the canvas element is supported by most modern browsers, including IE9 (and higher versions), Firefox, Chrome, Opera, and Safari. Please be aware, however, that users running older or less common web browsers will probably be unable to see or interact with canvas-based graphics.

View Article
Format Text in an HTML5 Document

Article / Updated 03-26-2016

HTML documents include text, images, multimedia files, links, and other bits of content that you mold into a web page by using markup elements and attributes. You use blocks of text to create such things as headings, paragraphs, and lists. The first step in creating a solid HTML document is laying a firm foundation to establish the document’s structure. Here’s an ultratechnical definition of a block of text: some chunk of content that fills one or more lines inside an HTML element. In fact, any HTML page is a collection of blocks of text: Every bit of content on your page must be part of some block element. Block elements usually end with a line break when rendered in a web browser. Every block element sits inside the element on your page. In fact, is the ultimate block! The difference between inline elements and a block of text is important. An inline element is a word or string of words inside a block element (for example, text-emphasis elements, such as or ). Inline elements must be nested within a block element; otherwise, your HTML document isn’t syntactically correct. Inline elements, such as linking and formatting elements, are designed to link from (or change the appearance of) a few words or lines of content found inside those blocks. HTML recognizes several kinds of text blocks that you can use in your document, including (but not limited to) the items shown in this table. A Majority of HTML5 Block-Level Elements Element Description Element Description article Article content header Section or page header aside Aside content h1–h6 Heading levels 1–6 blockquote Block quotation hr* Horizontal rule body Page body p Paragraph br1 Line break pre Preformatted text div Division in web page section Section in web page figure Groups image and caption table, and so on2 HTML tables footer Section or page footer ul, ol, dl Lists by type 1 Denotes an empty element (single tag only, no pair). 2 All table elements fall into this cell. For more about HTML block elements, visit the Tutorial Chip website: “HTML5 Block Level Elements: Complete List.”

View Article
page 1
page 2
page 3
page 4
page 5
page 6