The @media rule can be used to select a set of rules that only work based upon criteria that you can test for. The media rule can test for media features such as the height and width, the orientation, as well as the media type where the presentation will be seen (most typically we’ll use…
In today’s world many people are utilizing mobile devices most, sometimes not even having a personal computer of any type. In the US, it is estimated that 61% of all web access was through a phone, up from 57% in 2019. That jumps to 68% worldwide in 2020. Tablets typically only account for 3-4%, but…
Building upon the idea of the Local Storage, lets look at a simple example where we have an HTML form with fields of data we want to store, and how we can load that data in. Consider a situation where we need to store a person’s name, and then have it remember them for each…
In general, you want to optimize for search engines as it is one of the most common ways to get visitors to your site, and without visitors to your site, it’s hard to stay in business now a days. If you need a quick overview of how a search engine works, I even have that…
In some cases we’re told what we need to know to rank in a search engine listing. But in many cases, changes and factors are applied without us knowing, which can be frustrating. In most cases, the search engines are trying to thwart “black hat” techniques, so they don’t necessarily want people to know they…
If you want to apply an image, you can use the background-image property. The url() takes a string which specifies where the file is located in relation to the CSS document. If it is within a style tag of the document, then it is based upon the location of the web document. Notice how we…
Backgrounds, whether it be an image, a solid color, or even a gradient, are controlled via CSS in HTML5.It is the size of the element, plus the padding, and border. Typically, you will expect to see a background image on a body tag, or other similar large tag. However, you can place them on any…
You can use the <figure> tag set to surround the image and the <figcaption> tag set. You may need to remove any classes from the image, you have HTML code that looks like: You can use CSS to style your figure, and caption area as well, to help them stand out and have a standard…
