One place for hosting & domains

      Common

      How to Fix 16 Common Image Issues in WordPress


      High-quality imagery can do wonders for your website. When used right, images can make your content highly engaging and easier to digest. More importantly, blog posts with images tend to rank better in search engines than those lacking visuals. Therefore, it’s essential to know how to use images on your site adequately.

      WordPress enables excellent flexibility when it comes to adding photos to pages and posts. You can format your images and arrange them within your content any way you wish. You can also make your site more visually appealing with features such as photo galleries, headers, and background images.

      If you want to learn more about using images on your WordPress site, you’ve come to the right place. In this post, we’ll show you how to fix 16 common image issues in WordPress with clear, step-by-step instructions. Let’s get started!

      We Make WordPress Easier for You

      Leave migrating your site, installing WordPress, managing security and updates, and optimizing server performance to us. Now you can focus on what matters most — growing your website!

      1. How to Upload Images in WordPress

      To upload an image in a WordPress post or page, simply click on the black button with the plus symbol (in this post, we’ll refer to it as the Add Block button). This will ask you to choose a block to insert into your content.

      Select the Image button, and a block will appear.

      Uploading an image in WordPress.

      Next, click on the Upload button and select the image you want to add. Select Open, and then you’re done!

      2. How to Align an Image to the Left or Right

      When you select an image, a toolbar will appear above it. Click on the alignment button and choose Align left or Align right.

      Aligning an image in WordPress.

      As you can see, this toolbar also gives you other options as well. This includes replacing the image and adding a link to it.

      3. How to Add Captions Below Images

      To add a caption, simply click on your image, and you’ll see the option to write something below.

      Writing an image caption in WordPress.

      Note that you’ll also get a few styling options for your caption. You can link to another page by clicking on the third button in the caption toolbar.

      4. How to Display Images in Columns and Rows

      If you want to display images in columns and rows, you can click on the Add Block button and select Gallery from the options. Next, click on Upload in the gallery block, and then select the images you want to add and choose Open.

      Adding an image gallery in WordPress.

      Once your images have been uploaded, you’ll be able to move them around. To do this, you can click on an image and use the arrow buttons. You’ll also see an option to write a caption for your images and the gallery.

      5. How to Create Responsive Image Galleries

      The default WordPress gallery is very basic. If you use your site to showcase your photography, you might want to consider adding a plugin that lets you build and customize your own image galleries.

      For beautiful responsive galleries, we recommend using the Envira Gallery plugin. After installing and activating the plugin, navigate to Envira Gallery > Add New. There you can create your first gallery, which you can then insert into your posts by selecting the Envira Gallery block.

      The Envira Gallery settings page.

      You can start by uploading some photos to your gallery and then clicking on Config to select the number of columns, set the lazy loading delay, and use the other available features.

      Adding an Envira Gallery in WordPress.

      Remember to name your galleries. This way, you’ll be able to find them more easily when adding them to your posts.

      6. How to Set Featured Images for Posts

      WordPress lets you select a featured image for your posts. This image will be attributed to your post when it appears in your blog feed. Without a featured image, your post will have a missing thumbnail image. A post thumbnail is a reduced-size picture that appears on your blog’s homepage to help users sort through and identify relevant content.

      To set a featured image, head to the sidebar on the right, select the Post tab, and navigate to the Featured image section.

      Setting a featured image in WordPress.

      Next, click on Set featured image and upload your image file. Alternatively, you can choose an image that is already uploaded to your site by clicking on the Media Library tab.

      7. How to Add Cover Images in Posts and Pages

      If you’re writing a long post, you might want to add a wide cover image between different sections so that your content is more digestible. To add a cover image, start by clicking on the Add Block button and typing “cover” into the search bar.

      Once you select the Cover button, the block will appear. Click on Upload to add an image from your computer, or select Media Library to choose an image you’ve already uploaded to your site.

      Adding a cover image in a WordPress post.

      If you want to make some changes to the cover image, you can use the options in the tool section in the post.

      8. How to Fix the Featured Image Appearing Twice

      Some WordPress themes display the featured images at the top of published posts. This image will not be visible in your post when using the content editor.

      Therefore, you might think you have to insert it into your content in addition to setting it as the featured image (as shown in step six). If you do this, you’ll get the same image twice in your live post.

      Fixing a featured image appearing twice issue.

      To fix the multiple images problem, simply delete the image from the post editor. Then you can just use the one you selected in the Set featured image box.

      9. How to Crop Images

      WordPress offers some basic photo editing features. To edit a photo, you can go to your WordPress dashboard and navigate to Media > Library. After you select the image, a window will pop up.

      Cropping images manually in WordPress.

      Click on the Edit Image button below the image, and you’ll be taken to a page with editing tools. Select the Crop button at the top, and drag the corners of the box to crop the image to your liking.

      Alternatively, you can change the image size by entering the dimensions and aspect ratio in the right sidebar.

      Cropping images in WordPress.

      At the top, you can find options to rotate and flip the image. Once you’ve finished editing your photo, click on Save. Note that the changes will be applied to the original photo.

      10. How to Add Header Images

      Some WordPress themes feature header images. To change the default header image, go to your dashboard and navigate to Appearance > Customize.

      On the customization page, click on Header Image. If you can’t see this option in the menu, it means that your current theme does not support header images.

      Changing the header of a WordPress theme.

      On the Header Image page, select Add new image to replace the default image in your header.

      Changing the header of your WordPress site.

      When you’re done, you can click on the Publish button at the top of the screen. This will save your changes.

      11. How to Add Background Images

      Your WordPress theme might also come with support for background images. To set a one, access the theme’s customization page by navigating to Appearance > Customize from your WordPress dashboard.

      Next, click on Colors. Locate Body Background and click on Select image.

      Changing the background of your WordPress site.

      When you set your background image, you’ll get some options for adjusting the preset and image position. Remember to save your changes before exiting.

      12. How to Find Free Images for Your WordPress Site

      When sourcing images for your posts and pages, we recommend accessing free stock photo sites to avoid copyright infringement. Several sites offer royalty-free images, including Pixabay, UnsplashFlickr Creative Commons, and Pexels.

      A site offering free stock photos.

      The images available on these sites are free to use. However, it’s always a good idea to credit the photographer or artist with a link in the image caption.

      13. How to Tag Images

      Tags make it easier to organize and filter photos on your site. However, WordPress currently does not offer an image tagging feature. Therefore, you might want to download a plugin that lets you sort your images with categories and tags.

      For categorizing and tagging images, we recommend using the Media Library Assistant plugin. Start by installing and activating the plugin, and then head to Media > Library.

      You can see all the photos you’ve uploaded to your WordPress site on the Media Library page. Click on the list view button at the top, then find the photo you want to tag and click on Edit.

      The WordPress Media Library.

      On the Edit Media page, find the Att. Categories and Att. Tags sections on the right-hand side, and start adding categories and tags to your image.

      Tagging images in WordPress.

      You can also rename your image on this page, write a caption, and add alternative text. When you’re done, click on the Update button on the right to save your changes.

      14. How to Import External Images to WordPress

      To import external images to WordPress, you’ll need to access your old website’s files directly using a Secure File Transfer Protocol (SFTP) tool such as FileZilla. Locate your site’s root directory, and then go to wp-content/uploads.

      Accessing the WordPress uploads folder.

      There, you’ll find the media files that you’ve uploaded to your site. Download them to a secure location, and then log into your new WordPress site. Navigate to wp-content/uploads again, and copy over your media files.

      You may still encounter image-related errors after doing this since your image URLs may be pointing back to your old site. If that’s the case, you’ll need to go through and update your image URLs so they point to your new site instead, which can be a time-consuming process.

      To avoid that problem, we recommend using a plugin such as Duplicator to move your website between domains or web hosts. You may also benefit from reaching out to your new host for assistance to make sure everything on your site gets transferred over properly.

      15. How to Require a Featured Image in Your Posts

      If your site has multiple authors, you might want to set a reminder for everyone to select a featured image before publishing a post. To do this, you’ll need to add some custom code to your site.

      Before getting started, we recommend backing up your site and creating a child theme. Then you can add the following code at the end of your theme’s functions.php file:

      <?php
      
      /**
      
      * Require a featured image to be set before a post can be published.
      
      */
      
      add_filter( 'wp_insert_post_data', function ( $data, $postarr ) {
      
      $post_id              = $postarr['ID'];
      
      $post_status          = $data['post_status'];
      
      $original_post_status = $postarr['original_post_status'];
      
      if ( $post_id && 'publish' === $post_status && 'publish' !== $original_post_status ) {
      
      $post_type = get_post_type( $post_id );
      
      if ( post_type_supports( $post_type, 'thumbnail' ) && ! has_post_thumbnail( $post_id ) ) {
      
      $data['post_status'] = 'draft';
      
      }
      
      }
      
      return $data;
      
      }, 10, 2 );
      
      add_action( 'admin_notices', function () {
      
      $post = get_post();
      
      if ( 'publish' !== get_post_status( $post->ID ) && ! has_post_thumbnail( $post->ID ) ) { ?>
      
      <div id="message" class="error">
      
      <p>
      
      <strong><?php _e( 'Please set a Featured Image. This post cannot be published without one.' ); ?></strong>
      
      </p>
      
      </div>
      
      <?php
      
      }
      
      } );

      Save your changes, and users will be required to add featured images to all post types that support them.

      16. How to Set a Default Featured Image

      If you want to set a default featured image for those occasions when you can’t find the right photo, the Default Featured Image plugin is a handy tool to have. It lets you choose a photo that will automatically appear as the featured image for posts published without one.

      After installing and activating the plugin, navigate to Settings > Media in your dashboard.

      Using the Default Featured Image plugin.

      Click on the Select default feature image button and choose your photo. Finally, hit Save Changes at the bottom of the page.

      Take Your WordPress Website to the Next Level

      Whether you need help navigating the WordPress dashboard, choosing the perfect product image, or writing alt text, we can help! Subscribe to our monthly newsletter so you never miss an article.

      Additional WordPress Resources

      If you’re new to WordPress, you may run into some common issues while working with images and other content. To help you navigate any WordPress problem you encounter, we’ve put together several how-to guides:

      If you’re looking for more WordPress tips and hacks, check out our WordPress Tutorials. This collection of guides will help you set up and design your first WordPress site.

      Now You Can Fix That Common Image Issue

      Images can improve your site’s User Experience (UX) and increase the visibility of your content in search engine results. Therefore, it’s important to know how to use photos to engage readers with your content.

      Fortunately, WordPress makes it easy to upload and manage photos on your site. It lets you crop and customize images, as well as create beautiful photo galleries and headers to make your pages more interesting.

      If your business relies on high-quality imagery, you might want to consider using a web hosting service that offers full WordPress support. Our DreamPress plans are perfect for site owners who want to focus on growing their businesses and spend less time troubleshooting errors in WordPress.



      Source link

      Common WordPress Image Upload Issues and How to Fix Them (5 Methods)


      Since about 65% of people are visual learners, images are an important part of any website. And when you’re regularly uploading images for your WordPress website, it’s natural to run into the occasion error message.

      Fortunately, there are ways to diagnose even the vaguest image upload issue. By running through a checklist of common fixes, you should have no problems adding beautiful, eye-catching visuals to your website.

      In this article, we’ll look at why image-related errors can be tricky to diagnose. We’ll then share five solutions to try the next time the WordPress Media Library doesn’t want to cooperate with your creative vision. Let’s get started!

      An Introduction to WordPress Image Errors (And Why They’re a Problem)

      Beautiful, eye-catching images are a crucial part of almost any website. If you’re running an e-commerce store, product images are particularly important for driving sales, as they enable people to see what they’re purchasing. Maybe that explains why on average, images make up almost 17% of a web page’s total weight.

      The WordPress media library upload screen.

      However, uploading images to WordPress isn’t always straightforward. Sometimes, this popular Content Management System (CMS) may display a failure to upload error. These issues are notoriously difficult to diagnose, as they’re triggered by a wide range of factors. That can make it difficult to know where to start to address the problem.

      The good news? We can walk you through the steps we take to take to identify and fix image upload issues in WordPress.

      We’ll Fix Your Image Upload Issue

      Avoid troubleshooting when you sign up for DreamPress. Our friendly WordPress experts are available 24/7 to help solve website problems — big or small.

      Common WordPress Image Upload Errors and How to Fix Them (5 Methods)

      Nothing is more frustrating than having your workflow interrupted by a vague error message. Here are five ways to fix upload errors, so you can get back to adding striking visuals to your website.

      1. Rename, Resize, and Re-Upload the Image

      If you’re only encountering issues with a specific image, you can start by taking a look at the file’s name. If you’re using special characters ($, *, &, #) or accent letters (ñ, á, é), these can cause issues with the WordPress uploader.

      The image may also be too large — both in terms of dimensions and file size. You can change an image’s dimensions using your favorite editing program. If you’re trying to upload a particularly high-resolution graphic, you can reduce the size without impacting the quality using a compression tool such as TinyPNG.

      The TinyPNG plugin upload screen.

      If you regularly encounter issues due to file size, then WordPress’ limit may be set too low. You can raise the limit by adding code to your site’s php.ini file:

      upload_max_filesize = 128M
      
      post_max_size = 128M
      
      max_execution_time = 300

      If your site doesn’t already contain a php.ini file, you can create it inside the PHP folder for the current PHP version your site is running.  Then, simply add the above code at the end of the file.

      2. Increase the Memory Limit

      When you try to upload an image, you may encounter the WordPress HTTP error. This can sometimes be caused by low server resources or unusual traffic. For this reason, it’s always worth waiting a few minutes and then attempting to re-upload the image.

      If the issue doesn’t resolve itself, then you may be exceeding the WordPress memory limit. You can increase the amount of memory that PHP has to use on your server by connecting to your site over SFTP.

      Next, open your wp-config file. You can then add the following, which will increase the limit to 256MB:

      define( 'WP_MEMORY_LIMIT', '256M' );

      If this doesn’t resolve your issue, your problem may be related to threading. WordPress processes images using either the GD Library or Imagick module, depending on which one is available.

      Imagick was designed to use multiple threads in order to accelerate image processing.  However, some shared hosting providers limit Imagick’s ability to use multiple threads, which can result in an HTTP error. You can often resolve this issue by adding the following to your .htaccess file:

      SetEnv MAGICK_THREAD_LIMIT 1.

      3. Deactivate Your Plugins

      Third-party software can sometimes interfere with your image uploads. If you’re using any plugins, it’s always worth deactivating each one in turn and testing to see whether this resolves your image upload issue.

      Deactivating plugins in the WordPress dashboard

      If a plugin is to blame, you can double-check to make sure you’re running the latest version. If you’ve fallen behind on your updates, you may be struggling with a problem that’s already been addressed.

      If you’re running the latest version, we recommend contacting the plugin’s developer to ensure that they’re aware of the issue. This can also be an opportunity to ask whether they plan to solve this problem in their next release. If the plugin is critical to your site and no fix is forthcoming, it may be time to look for an alternative solution.

      4. Clear the Cache

      If you’re using a caching plugin, then clearing the cache may be enough to resolve your image upload errors. It’s important to note, however, that it is incredibly rare for the cache to prevent a file upload, so we’re including this fix out of an abundance of caution.

      If you think that caching could be causing the error, the steps you take will depend on your chosen caching solution. For example, if you’re using the W3 Total Cache plugin, you can clear the cache by selecting Performance > Purge All Caches from the WordPress toolbar.

      Purging all caches in the WordPress dashboard Appearance menu.

      If you’re unsure how to clear the cache in your specific tool, the plugin’s Settings menu is often a good place to start. You can also check the developer’s official documentation for more details.

      5. Try the Browser Uploader

      If you’ve tried all of the above fixes and are still encountering problems, you can use your browser’s built-in file uploader. Unlike WordPress’ image uploader, the browser uploader doesn’t support multiple file selection or drag and drop. However, it can be a useful workaround when you need to upload an image quickly.

      To access the native image uploader, navigate to Media > Add New. You can then select the browser uploader link.

      Selecting the ‘browser uploader’ link in the WordPress native image uploader.

      Next, click on Choose file. This launches the familiar file selection dialog, where you can upload the image as normal. If this workaround succeeds, we recommend trying to upload an image using WordPress’ standard image uploader afterward, to see whether this has resolved your problem.

      Take Your WordPress Site to the Next Level

      Whether you need help tweaking directory permissions, choosing a WordPress theme, or finding the uploads folder, we can help! Subscribe to our monthly email newsletter so you never miss an article.

      Additional WordPress Error Tutorials

      Once you’ve solved your image upload error, the adventure isn’t over. There’s always more to learn about WordPress! We’ve put together several tutorials to help you troubleshoot other common WordPress errors:

      Want more information on managing a WordPress site? Check out our WordPress Tutorials, a collection of guides designed to help you navigate the WordPress dashboard like an expert.

      WordPress Images Made Easy  

      Visuals are crucial for catching (and holding) the visitor’s attention, but image upload errors are frustratingly common. By following some simple steps, we’re confident that you can get your site back on track — even when the error message itself doesn’t provide much information.

      Let’s recap five ways to resolve common WordPress image upload issues:

      1. Rename, resize, and re-upload the image.
      2. Increase the memory limit.
      3. Deactivate your plugins.
      4. Clear the cache.
      5. Try the browser uploader.

      Are you tired of handling WordPress errors with no help? All of our DreamPress hosting packages include 24/7 customer support as a standard option. Regardless of the problem, our expert team will be on hand to help you get back on track!



      Source link

      How To Use Common Units in CSS


      The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.

      Introduction

      There are a lot of size units to choose from when styling HTML with CSS. These units help determine how big or small text appears, how wide a container is, or how much space is between columns. Each of the various units has functional strengths that are valuable to a developer and the design of a website. Knowing which unit will work best for a situation will help you write websites that are flexible and accessible.

      In this tutorial you will learn about the pixel (px), percent (%), em, and rem units. You will use these units in conjunction with several properties, including font-size, padding, border, margin, width, and max-width to learn the differences and strengths of each unit.

      Prerequisites

      Setting Up the HTML and CSS

      In the first section, you will set up the HTML as the basis for all styling throughout the tutorial. Additionally, you will create the CSS file you will use to write your styles for the tutorial.

      To start, open up index.html in your text editor and add the following HTML to the file:

      index.html

      <!doctype html>
      <html>
          <head>
          </head>
          <body>
          </body>
      </html>
      

      Next in the <head> tag, you will add in a meta tag to declare the character set used in this HTML, the title of the page, a meta tag defining how the page should be handled on mobile devices, and the CSS files to load, which include a font from Google Fonts, and the styles.css file you will create in the next section.

      The additions to the <head> tag are highlighted in the following code block. You will find this designation throughout the tutorial as code is added and changed:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>CSS Units</title>
              <meta name="viewport" content="width=device-width, initial-scale=1" />
              <link rel="preconnect" href="https://fonts.gstatic.com" />
              <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
              <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
          </body>
      </html>
      

      Now that the <head> information is in place, the next step is to add in the content you will style in the <body> tag. This content is an excerpt from Lewis Carroll’s Alice’s Adventures in Wonderland, where Alice is speaking with the Caterpillar about size. The content is contained within a <figure> element with a heading and a <blockquote> containing the excerpt. A <figcaption> element ends the content, providing citation to the original literary work. Additionally, a few <span> tags are within the dialog, which you will style for emphasis and effect.

      Add the highlighted sections from the following code to your index.html file:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>CSS Units</title>
              <meta name="viewport" content="width=device-width, initial-scale=1" />
              <link rel="preconnect" href="https://fonts.gstatic.com" />
              <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
              <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
              <figure>
                  <h3>Advice from a Caterpillar</h3>
                  <blockquote>
                      <p>The Caterpillar was the first to speak.</p>
                      <p>“What <span>size</span> do you want to be?” it asked.</p>
                      <p>“Oh, I’m not particular as to <span>size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span>you know</span>.”</p>
                  </blockquote>
                  <figcaption>Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption>
              </figure>
          </body>
      </html>
      

      The last step in preparing your HTML for styling is to apply class attributes and values to the HTML elements of the page content. You will use class selectors in your CSS to target and apply styles. The class names used are descriptive of the task and intent of each element:

      index.html

      <!doctype html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <title>CSS Units</title>
              <meta name="viewport" content="width=device-width, initial-scale=1" />
              <link rel="preconnect" href="https://fonts.gstatic.com" />
              <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
              <link href="https://www.digitalocean.com/community/tutorials/styles.css" rel="stylesheet" />
          </head>
          <body>
              <figure class="excerpt">
                  <h3 class="title">Advice from a Caterpillar</h3>
                  <blockquote class="quote">
                      <p class="quote-text">The Caterpillar was the first to speak.</p>
                      <p class="quote-text">“What <span class="large">size</span> do you want to be?” it asked.</p>
                      <p class="quote-text">“Oh, I’m not particular as to <span class="large">size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span class="small">you know</span>.”</p>
                  </blockquote>
                  <figcaption class="citation">Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption>
              </figure>
          </body>
      </html>
      

      Be sure to save these changes to your index.html file, then open the file in your web browser. As is shown in the following image, there are already a number of styles the browser applies by default. Also, the font from Google Fonts is not visible yet, since it is not defined in the CSS, despite being included in the <head> tag.

      Text selection in a default serif font in black with a larger, bold header, an indented quotation, and citation of the quote.

      Finally, create the styles.css file and open it in your editor. This will be the file you work with for the remainder of the tutorial. Set the font on the body selector to have a font-family: 'Averia Serif Libre', serif;. This will apply the font to all the elements on the page:

      styles.css

      body {
          font-family: 'Averia Serif Libre', serif;
      }
      

      Save your changes to styles.css then reload index.html in your browser. The content will now use a font that looks like an older printed book, as shown in the following image:

      Text selection in a custom serif font with an old typeset style in black with a larger, bold header, an indented quotation, and citation of the quote.

      In this section, you set up your HTML with all the content and markup you will need to work with units in CSS. You also created your styles.css file and added in the new font that is used on all the content. In the next section, you will use the px unit to begin applying styles to the content.

      Using the Pixel Unit px

      In this section, you will focus on coding the initial styles using the pixel (px) unit. px is a well-known unit on the web. Unlike the other units covered in this tutorial, the px unit is a physically based unit, as its size is determined by the physical size of a single pixel of the device’s display.

      Open styles.css in your text editor and create a class selector for the <figure> element’s class with .element. In this selector block you will define layout and aesthetic styles with a margin property set to 20px auto, padding set to 20px, a border set to 1px solid black, a max-width of 480px, and finally a box-sizing property set to border-box:

      styles.css

      body {
          font-family: 'Averia Serif Libre', serif;
      }
      
      .excerpt {
          margin: 20px auto;
          padding: 20px;
          border: 1px solid black;
          max-width: 480px;
          box-sizing: border-box;
      }
      

      The margin applies 20px to the top and bottom of the container and the auto sets the container to be horizontally centered once a width value is declared. Next, the padding property provides 20px of space on each side of the interior of the container. Then, the border: 1px solid black; applies a 1px thick black border around the whole container as a defined perimeter for the content. The max-width allows the container to be flexible in width when the screen is smaller than 480px, but to stop growing once the container is 480px wide. Lastly, box-sizing: border-box; changes the box model of the container to ensure the maximum width is 480px.

      Save these additions to your styles.css file and then jump over to your browser and refresh index.html. There will be extra space on the top inside of the container, which is coming from the defaults for the .title element. Examine the following image for what this will look like in your browser:

      Quote text in a black serif typeface with a thin black border and uneven space between the border and text.

      Next, return to styles.css in your editor and create a class selector for the <h3> element with a class value of title. Currently the content has the browser’s default values for font-size, font-weight, and margin. First, change the font-size to 20px, which is a little larger than the browser default size. Then add a margin property with a value of 0 0 10px, which will apply a margin of 0 to the top, then a margin of 0 to the right and left, and finally a 10px margin to the bottom of the title. No unit is required when the value is 0 in CSS:

      styles.css

      ...
      .title {
          font-size: 20px;
          margin: 0 0 10px;
      }
      

      The <blockquote> content is indented on the right and left with a browser default margin value. For the needs of this design, the margin can be removed. Create a class selector targeting .quote and give it a margin property with a value of 0. This will allow the content to expand to the full content width of the <figure> container:

      styles.css

      ...
      .quote {
          margin: 0;
      }
      

      Save your change to the styles.css file and return to your browser, then refresh the index.html file. The .title will now be a little larger and the gap above it much smaller. The quote content is also now expanded to fill the space. Review the following image of what will change in your browser:

      Quote text in a black serif typeface with a thin black border and equal space between the border and text.

      Return to styles.css in your text editor. Since the blockquote content is the primary focus of the <figure>, make it stand out by targeting the quote-text and applying a font-size of 24px. Then, make a narrow break between each line by setting the top and bottom margin to 10px, using the margin short hand 10px 0. This will set the top and bottom to 10px and the right and left to a value of 0:

      styles.css

      ...
      .quote-text {
          font-size: 24px;
          margin: 10px 0;
      }
      

      Next, to apply visual emphasis inspired by the excerpt, target the <span> with the class attribute of large and set a font-size of 32px:

      styles.css

      ...
      .large {
          font-size: 32px;
      }
      

      After setting the .large text, create a class selector to target .small and give it a font-size property with a value of 20px:

      styles.css

      ...
      .small {
          font-size: 20px;
      }
      

      Save these changes to your styles.css file and refresh index.html in your browser. The content of the excerpt will grow in size and be brought a bit closer together. Additionally, the word “size” will appear larger than the primary text, while the phrase “you know” will appear a little smaller. The following image shows what this will look like in the browser:

      Quote text in a black serif typeface with a thin black border, with emphasized text smaller and larger than the primary text.

      For the last styling of this section, return to your styles.css file in your text editor. Create a class selector that targets the citation class that is applied to the <figcaption> element. This content describes the contents of the <figure>, so visually it should not be as prominent and needs to be distinctively separate from the quote.

      Add a border-top with a value of 1px solid #ccc to give it a light gray border. Then apply a margin-top: 20px; and a padding-top: 20px; to set the border equidistant from the last line of the quote and the first line of the citation. This will provide the visual separation needed. Finally, to deemphasize the content of the citation, set the color property to have a value of #555 and a font-size of 14px. This will set the content to be less noticeable by making it a lighter gray in contrast to the other black text:

      styles.css

      ...
      .citation {
          border-top: 1px solid #ccc;
          margin-top: 20px;
          padding-top: 20px;
          color: #555;
          font-size: 14px;
      }
      

      Save this addition to your styles.css file in your editor. Then, return to your browser and refresh the index.html page to view the changes as shown in the following image:

      Quote text in a black serif typeface with a thin black border and smaller citation text below in a dark gray, with a thin dark gray border separating the quote from the citation.

      The px began as a unit that was defined by the physical pixel of a computer screen. This means a 10px wide and 10px high box used 100 pixels on the computer screen it displayed on. With high resolution displays, pixels are much smaller and so pixel values are often doubled, meaning 1px occupies 4 pixels on the screen. This is a software manipulation of the size of a pixel. Pixel doubling can occur on standard resolution displays imitating non-native screen resolutions, meaning the resolution is higher or lower than the physical number of pixels on the screen.

      Due to pixel doubling and user preferences on devices, px is not an ideal unit of measure. Though it is meant to be a physical unit, it can be manipulated by the computer and can cause elements to appear too small or become blurry. Sub-pixel rendering is the term for when a computer encounters a pixel calculation involving a decimal point and blends the color between pixels to apply a value less than 1px, causing a blurry edge.

      In this section, you used the px unit to set the value on properties to the content of the page. You learned that the px unit is a physical unit, though the computer can manipulate that value. In the next section, you will refactor your code where possible to use the percent value.

      Using the Percent Unit %

      In this section you will use the percent unit (%) to apply dimensional values to elements on the HTML page. Unlike the px unit, the percent unit is a relative unit and does not rely on the screen’s physical attributes. Instead, the percent unit provides the browser with a relationship of values it must compute to produce a pixel value. The percent unit, as with other relative units, has an advantage over the pixel unit where it can scale based on many factors, including the user’s personal browser settings. This makes relative units advantageous for accessibility and providing the best options for users to interact and use the content.

      One of the most useful applications of the percent unit is as a width property value. Open your styles.css file in your text editor and add a width: 80%, and for organizational purposes add that line just above your max-width property:

      styles.css

      ...
      .excerpt {
          margin: 20px auto;
          padding: 20px;
          border: 1px solid black;
          width: 80%;
          max-width: 480px;
          box-sizing: border-box;
      }
      ...
      

      This is a powerful combination as the container will be 80% of its parent’s width until it reaches a width of 480px, at which point it will stop growing. If you are familiar with Responsive Web Design, much of the concept is predicated on this combination. The 80% value also allows the container to have spacing on the left and right, no matter the screen size’s width.

      Now that you have used the percent unit, try applying it in more places to see how it works. Start by swapping out the .excerpt selector’s margin and padding pixel values for percents. This requires a formula you will use throughout the remainder of this tutorial: size / context = result.

      The size in this case is 20 for the 20px value on the margin and padding. Since percent units on margin and padding are a percentage of the width, the max-width value can help determine the approximate context. This makes the necessary equation 20/480, which results in 0.041666667. When dealing with percents, the result must always be multiplied by 100 before using, making the final value 4.1666667%. Change the 20px values in the .excerpt selector to 4.1666667% instead, as shown in the highlighted sections of the code block:

      styles.css

      ...
      .excerpt {
          margin: 4.1666667% auto;
          padding: 4.1666667%;
          border: 1px solid black;
          width: 80%;
          max-width: 480px;
          box-sizing: border-box;
      }
      ...
      

      Save your changes to styles.css and reload index.html in your browser. Try changing the size of the browser window’s width and watch how the padding value continues to grow even after the .excerpt container has hit its max-width. See the following animation for a demonstration of this effect in action.

      When the window grows on this animation, the container does not grow, but the padding does, forcing the text closer together.

      This not likely to be the desired effect, but it is good to know and see which properties work best with the percent unit.

      Return to your styles.css file in your editor and revert the 4.1666667% back to 20px:

      styles.css

      ...
      .excerpt {
          margin: 20px auto;
          padding: 20px;
          border: 1px solid black;
          width: 80%;
          max-width: 480px;
          box-sizing: border-box;
      }
      ...
      

      The next area the percent unit can be quite useful is as a font-size value. Using percents on the font-size properties uses the same formula to find the value. Go to the .title selector block in your styles.css document and the font-size is 20px. From the formula size / context = result, this 20px is the size. The context in this scenario is browser default font-size for the document, which is 16px. The formula then is 20 / 16, and since this is a percent the result must be multiplied by 100, giving a final value of 125%. Add the 125% value in place of the 20px. It can be helpful to add a comment in the code to explain the intended size:

      styles.css

      ...
      .title {
          font-size: 125%; /* target size: 20px */
          margin: 0 0 10px;
      }
      ...
      

      Next, apply this same formula to the .quote-text selector, which has a font-size of 24px. The result for this value is 150%, as 24 is 150% larger than 16. Add this to your styles.css file in your editor:

      styles.css

      ...
      .quote-text {
          font-size: 150%; /* target size: 24px */
          margin: 10px 0;
      }
      ...
      

      Next, to apply percent values to the .large and .small selectors requires an understanding of how the context value can change in the formula. The browser default font-size is 16px, but both .large and .small only occur inside of an element with the quote-text class. This means their context is no longer 16px, but instead 24px. The current font-size for .large is 32px, which being twice the size of 16px would typically mean the font-size would be 200%. Since the context has changed, that would be double 24 and not 16. Therefore, the appropriate formula needs to be 32 / 24, which comes out to 1.333333333.

      Take the result and multiply by 100, then feel free to round the decimal places to 133.3% for the new font-size value:

      styles.css

      ...
      .large {
          font-size: 133.3%; /* target size: 32px */
      }
      ...
      

      The .small selector has a similar situation as the .large and is no longer a factor of 16, but 24. For this the formula is 20 / 24, then times 100. The result is 83.3%:

      styles.css

      ...
      .small {
          font-size: 83.3%; /* target size: 20px */
      }
      ...
      

      Lastly, apply the same formula to the .citation selector’s font-size. Since this container returns to the default font-size of 16, the equation is now 14 / 16. After multiplying the result by 100, the final value is 87.5%:

      styles.css

      ...
      .citation {
          border-top: 1px solid #ccc;
          margin-top: 20px;
          padding-top: 20px;
          color: #555;
          font-size: 87.5%; /* target size: 14px */
      }
      

      Save your changes to styles.css in your text editor, then reload index.html in your browser. You will find no difference between the pixel version of the font-size values and the percent version. However, from an accessibility standpoint this is much more versatile, since operating systems and browsers provide tools for users to change the default font-size. Using a relative unit like the percent allows the font-size to scale proportionately to the user’s preference.

      In this section, you used the percent unit to make padding, margin, font-size, and width properties relative. You learned how font-size is relative to the parent element’s font-size and the formula to calculate a desired ratio. You also learned that a percent value is not always the best choice, such as with border width values. In the next section, you will take what you have learned with the percent unit and apply it to the more versatile em unit.

      Using the em Unit

      In this section, you will refactor the CSS to use the em unit. Like the percent unit, the em unit is a relative unit, but it has a more common base compared to the percent’s base being different from width or font-size. The em is wholly relative to the font-size, or the inherited font-size of the element. For example, the default font-size in a browser is 16px, making 1em equivalent to 16px. From the percent unit the 1em is similar to a font-size: 100%;; however, if a width is set to 1em, then the computed width would be 16px instead of the full available width.

      Note: There are a couple of ways the em unit can be a bit confusing. The first is in regard to print typography, which also has an em unit. This is based on the size of the lower case “m” character in the font. The web em unit is based on the font-size value instead. The second area of note is that there is also an <em> HTML element. This element does not have to do with the em unit, but rather is short for “emphasis”, as it is used to italicize and emphasize text.

      To begin using the em unit, open styles.css in your text editor.

      Since the em is relative to only the font-size, it can be used on more properties reliably than the percent unit. Go to the .excerpt selector block and use the formula size / context = result, where context is 16. Apply this to the values on the margin, padding, border, and max-width properties:

      styles.css

      ...
      .excerpt {
          margin: 1.25em auto;
          padding: 1.25em;
          border: 0.0625em solid black;
          width: 80%;
          max-width: 30em;
          box-sizing: border-box;
      }
      ...
      

      Unlike the percent formula, the result does not need to be multiplied by 100. Instead, take the result and add the em unit at the end. For the 20px on the margin and padding, the equation 20 / 16 results in 1.25em. For the border thickness of 1px, that means 1 / 16, which is 0.0625em. When dealing with a value of 1px it is up to you if it is necessary for the thickness to scale. If it does not need to, feel free to leave it as 1px. Lastly, the max-width of 480px becomes 480 / 16, which results in 30em.

      Save these changes to styles.css and reload index.html in your browser. There will be no visual change, as these values are the same as the pixel value.

      Next, go to the .title selector in styles.css in your editor. From the previous section, the font-size value is 125%. Since the formula is the same for em as it is for percent unit except for multiplying by 100, you can divide instead to return the decimal point. This means the font-size value will change from 125% to 1.25em. Since the em value is defined by the font-size of the given element, every other instance of em has changed. This means 1em now is equivalent to 1.25em and all other uses of em inside of the .title selector are relative to the font-size:

      styles.css

      ...
      .title {
          font-size: 1.25em; /* target size: 20px */
          margin: 0 0 10px;
      }
      ...
      

      You can see this in practice by applying an em value to the margin. Here, there is a bottom margin of 10px. Since 10px is half the size of 20px, and 1em is equal to whatever the font-size value is, then 0.5em will always be half of the font-size. You can swap out 10px for 0.5em in the margin property. The advantage here is that if the design changes and the font-size needs to increase, the proportion is maintained, and the bottom margin will always be half of the font-size value:

      styles.css

      ...
      .title {
          font-size: 1.25em; /* target size: 20px */
          margin: 0 0 0.5em; /* target size: 10px */
      }
      ...
      

      Taking the concepts of em to the .quote-text and the <span> sizing classes will require more use of the equation. Use the size / context = result formula on the font-size, where the intended value is equivalent to 24px. This results in a value of 1.5em:

      styles.css

      ...
      .quote-text {
          font-size: 1.5em; /* target size: 24px */
          margin: 10px 0;
      }
      ...
      

      Regardless of if the font-size was an em, a percent, or a pixel, the font-size defines the size of 1em. This mean that the context for the formula now equals 24px for applying the same formula to the margin of .quote-text and the .large and .small classes, since they are used inside of the .quote-text element:

      styles.css

      ...
      .quote-text {
          font-size: 1.5em; /* target size: 24px */
          margin: 0.41667em 0; /* target size: 24px */
      }
      
      .large {
          font-size: 1.333em; /* target size: 32px */
      }
      
      .small {
          font-size: 0.8333em; /* target size: 20px */
      }
      ...
      

      As you do these equations, feel free to round to your preferred decimal point.

      Lastly, apply the em value to the .citation selector. Start by setting the font-size to 0.875em, which will keep it at a size of 14px. Even though the font-size property is at the bottom of the selector block, it still determines the value of 1em on all other properties in the selector block. This means the context for all the other properties is 14 and not 16. The 1px thickness on the border would become 0.071428571em, or 0.071em if you round to the nearest thousandth. In turn, the padding and margin values of 20px will become 1.428571429em, or 1.43em when rounding:

      styles.css

      ...
      .citation {
          border-top: 0.071em solid #ccc;  /* target size: 1px */
          margin-top: 1.43em; /* target size: 20px */
          padding-top: 1.43em; /* target size: 20px */
          color: #555;
          font-size: 0.875em; /* target size: 14px */
      }
      

      Be sure to save your changes to styles.css before moving on to the final section.

      In this section you learned about the em unit and how it is based on the font-size of an element. Unlike the percent unit, em can be applied predictably on more properties and provides a way for properties to change in proportion to one another. In the last section, you will learn about a variant of the em unit: rem.

      Using the rem Unit

      In the last section, you will use the rem unit, which is a close relative to the em unit. The “R” in rem stands for root element, which is the topmost element of the webpage, most likely <html> or <body>. Where the em value can change based on font-size values, the rem has a consistent size based on the root element’s font-size, which is by default 16px. This makes the equation have a constant and predictable result, while having the scalable benefits of the em.

      To begin working with the rem value, open styles.css in your text editor and go to the .excerpt selector. Since all the values are set to an em using the default font-size of 16px, these can all be changed from em to rem with no repercussions. The advantage here, too, is if a font-size is ever added to this selector or the font-size of the parent container is changed, these values won’t change since they are now based on the root font-size:

      styles.css

      ...
      .excerpt {
          margin: 1.25rem auto;
          padding: 1.25rem;
          border: 0.0625rem solid black;
          width: 80%;
          max-width: 30rem;
          box-sizing: border-box;
      }
      ...
      

      Next, move to the .title selector in styles.css and change the font-size to be a rem. Since the em on this selector was already calculated using the default font-size, no other change is necessary. In the case of the margin, you can leave this as an em value and it will continue to size itself in proportion to the font-size:

      styles.css

      ...
      .title {
          font-size: 1.25rem; /* target size: 20px */
          margin: 0 0 0.5em; /* target size: 10px */
      }
      ...
      

      Be sure to save your changes to styles.css. At this point, no visual changes have been done that will change how index.html will appear in the browser, but it is always good to check periodically. Go ahead and return to your browser and refresh index.html to verify nothing has visually changed.

      Return to styles.css in your text editor and then go to the .quote-text selector. The font-size here is already set based on a 16px context, so the unit can be changed from em to rem with no further adjustments. The margin here, however, is not intended to be proportional to the .quote-text font-size, but rather the root font-size. This means calculating 10 / 16 to get a constant relationship to the root font-size, making the margin value 0.625rem:

      styles.css

      ...
      .quote-text {
          font-size: 1.5rem;
          margin: 0.625rem 0;
      }
      ...
      

      The .large and .small selector font-size properties can remain as em values since they provide a proportional sizing compared to the font-size of the .quote-text. It may be worthwhile to change those values to something a little easier to understand, although it will change the design slightly. Change the .large font-size to 1.5em and the .small font-size to 0.875em. This will change the size, but it will now read similar to 150% for the .large and 75% for the .small:

      styles.css

      ...
      .large {
          font-size: 1.5em;
      }
      
      .small {
          font-size: 0.75em;
      }
      ...
      

      Save these changes to styles.css and refresh index.html in your browser. The size of the text using these selectors will render like what is in the following image.

      Quote text in a black serif typeface with a thin black border, with emphasized text smaller and larger than the primary text.

      Next, adjust the .citation selector to use rem instead of em on all properties. Since the border-top, margin-top, and padding-top were all calculated to a font-size equivalent of 14px, you need to recalculate each for the root font-size of 16px. This will make the 1px border-top thickness 1 / 16, or 0.0625rem. Then the 20px desired value for the margin-top and padding-top will be 20 / 16, which results in 1.25rem. Lastly, since the font-size was already based on the default 16px value, the em can be changed to rem:

      styles.css

      ...
      .citation {
          border-top: 0.0625rem solid #ccc;
          margin-top: 1.25rem;
          padding-top: 1.25rem;
          color: #555;
          font-size: 0.875rem;
      }
      

      Save your changes to styles.css and verify there were no visual changes in your index.html by refreshing the page in your browser.

      Lastly, the root font-size can be changed using the :root selector and changing the font-size value. This will change the definition of 1rem to whatever value you wish to try.

      Open your styles.css file and at the top add a :root selector, then set the font-size to 20px:

      styles.css

      :root{
          font-size: 20px;
      }
      
      body {
          font-family: 'Averia Serif Libre', serif;
      }
      ...
      

      Save this change to styles.css, then return to your browser and refresh index.html. The following image shows what this will look like in a browser.

      Text wrapped by a thin black border in a custom serif font with the quote and headline in black and a smaller citation in dark gray, with a dark gray border above the citation, all scaled proportionally.

      All of you styles will grow a little in size. This can be very useful if providing accessibility tools or making broad adjustments to a website. It is advisable to maintain the default 16px size as it is more common, but if you are changing the size it is better to go larger than smaller. This is the font-size that is used by elements, and smaller content or content lacking a defined size is less accessible than larger.

      In this section, you used the rem value in several scenarios and learned where it is useful to use an em alongside a rem. You also learned about the :root selector and how to use it to target the default font-size.

      Conclusion

      These four units, pixel (px), percent (%), em, and rem, are some of the most common units found on the web. They each have their strengths, and understanding how they all work and work together will help you decided the best situation for your needs. You learned that the pixel unit is based on a physical screen attribute that can be manipulated by the computer. The percent unit varies on what the base value is, but its biggest strength is when used as width. The em value provides more control with a common baseline of the font-size of an element, allowing for proportional sizing amongst related properties. Lastly, rem takes the advantages of the em, but sets the value to a global font-size of the page’s root element.

      If you would like to read more CSS tutorials, try out the other tutorials in the How To Style HTML with CSS series.



      Source link