HTML Tutorials & Training Resources
Posted on 05/16/2018 by Jonathan O'Brien
How CSS Works
CSS gives instructions for the browser regarding how content appears. CSS styles include font type, font size, and color. CSS styles also set the appearance of headings, and you can make different Web pages look unique with these instructions. An external style sheet can be attached to each page on a website containing CSS language about the formatting to be applied. Style sheets can also be embedded as a section that contains the style information. Another way to add styles to a Web page involves adding style information directly to the HTML tags, known as inline style.
Live Web Design Instructor-led Courses |
||
| Course Title | Length | Price (USD) |
| HTML5 & Cascading Style Sheets 3 | 4 days | $1,830 |
| Javascript Programming | 3 days | $1,775 |
| jQuery Fundamentals | 3 days | $1,775 |
| Perl Programming | 3 days | Teams Only |
| WordPress for End Users | 2 days | $1,190 |
| Responsive Web Development with HTML and CSS | 3 days | Teams Only |
Self-Paced Web Design eLearning |
||
| Course Title | Length | Price (USD) |
| Javascript eLearning Bundle | 5 courses | $375 |
| jQuery eLearning Bundle | 13 courses | $375 |
| Perl Programming eLearning Bundle | 5 courses | $300 |
| Web Design eLearning Bundle | 7 courses | $375 |
| WordPress eLearning Bundle | 22 courses | $300 |
Tutorials:
How HTML Heredity Works
Basic HTML structure involves nesting tags inside other tags. Generally, all HTML tags are nested inside the body tag, then moving to heading and paragraph tags. This nesting is called a parent/child relationship, with body tags serving as the parent of heading and paragraph tags and the heading and paragraph tags being the children of the body tag. Properties of HTML tags pass down to descendant tags in a similar way to how human offspring inherit traits from parents. Thus, whatever font color is set in the body tag will apply to all of the nested tags inside the body tag.
Tutorials:
How HTML Specificity Works
HTML specificity sets the way a browser will display text when a conflict from multiple rules applies to HTML elements. For example, an H1 tag with a highlight class might have two CSS style rules that apply to font color and background color. HTML specificity determines how the browser applies CSS rules. When two instructions apply to one element, the instruction with higher specificity will be applied.
Tutorials:
Sprite Sheets in HTML/CSS
A sprite sheet is a bitmap image file containing numerous smaller graphics arranged in a tiled grid. Placing several graphics into one file reduces load time and enables animations or other applications to run faster and more efficiently. Sprite sheets also reduce memory usage. Making a sprite sheet is possible using tools that are accessible on the Internet. The process involves defining frames and adding pictures or animations.
Tutorials:
Using HTML Reset Style Sheets
Web designers strive to make each separate page look uniform and consistent regardless of the browser used. Browsers have user agent style sheets that use default style values for Web pages. If specific style rules are not applied, a browser defaults to the user agent style sheet values to supply any missing instructions. Because every browser has unique default styles, there will be variations that will affect the final appearance depending on the browser rendering the website. Reset style sheets create cross-browser consistency or standardization by defining the CSS property values to be used for every element.
Tutorials:
Creating a Full-Height Web Page Layout
One issue that occurs with some frequency in Web design is having the content on a page be smaller than the overall screen height. When content is not big enough to fill the entire screen, a gap will occur below the footer at the bottom of the Web page. Technically, the page still functions, but the overall effect is not optimal. Web designers can add a CSS “min-height†property to prevent the element from displaying shorter than the value of the property. By indicating the percent unit for the total height value, the wrapper displays at the full height of the body and HTML element. Repositioning the footer at the bottom of the page happens by anchoring it to the wrapper element.