CSS Text Properties Quiz

Configuring Text Properties

• Font-weight property configures the boldness of text.
• Font-style property configures the style of the text.
• Line-height property modifies the height of a line of text.
• Text-decoration property modifies the display of text, often used to remove the default underline from hyperlinks.
• Text-transform property configures the capitalization of text.
• Letter-spacing property configures the space between text characters.

Configuring List Markers

• List-style-type property configures the type of list marker.
• List-style-image property configures the image used as a list marker.
• List-style-position property configures the position of the list marker.

Favicon

• A small icon that displays in the address bar or tab bar of some browsers.
• Also known as a favorites icon.

Image Map

• Map element defines the map.
• Area element defines a specific area on a map, which can be set to a rectangle, circle, or polygon.
• Href attribute specifies the link.
• Shape attribute specifies the shape of the area.
• Coords attribute specifies the coordinates of the area.

CSS Background Image Property

• Configures a background image.
• By default, background images tile (repeat).

CSS Background Repeat Property

• Background-repeat property configures the repeating of a background image.
• No-repeat value prevents the background image from repeating.

Multiple Background Images

• Can be configured using multiple background-image properties.
• Each background image can have different properties.

Configuring Typeface with CSS

• Font-family property configures the typeface of the text.
• Must include a generic family name.

Configuring Font Size with CSS

• Font-size property configures the size of text.

Aligning and Indenting Text with CSS

• Text-align property configures the alignment of text.
• Text-indent property configures the indentation of the first line of text in an element.

Graphics and Text Styling

• Learning outcomes include describing types of graphics used on the Web, applying img, figure, and figcaption elements, and configuring text and images with CSS.

Types of Graphics

• GIF: Graphics Interchange Format, best used for line art and logos, maximum of 256 colors, can be animated, and uses lossless compression.
• JPG: best used for photographs.
• PNG: best used for images with transparent backgrounds.
• WebP: best used for web pages, supports both lossy and lossless compression.

CSS Background Image Property

• Configures a background image
• By default, background images tile (repeat)
• Example: body { background-image: url(background1.gif); }

CSS Background Repeat Property

• Used to control how the background image is repeated
• Example: h2 { background-image: url(trilliumbullet.gif); background-repeat: no-repeat; }

Multiple Background Images

• Multiple background images can be configured using a comma-separated list
• Example: body { background-image: url(coffee.gif) no-repeat left bottom, url(coffeepour.jpg) no-repeat; }

Configuring Typeface with CSS

• The font-family property configures the font typeface of the text
• Example: p { font-family: Verdana, Arial, sans-serif; }
• The font-size property configures the size of the text
• Example: p { font-size: 90%; }

Align and Indent Text with CSS

• The text-align property configures the alignment of text
• Example: h1 { text-align: center; }
• The text-indent property configures the indentation of the first line of text
• Example: p { text-indent: 5em; }

Graphics on the Web

• Common types of graphics used on web pages: GIF, JPG, PNG, WebP
• Graphics Interchange Format (GIF) is best used for line art and logos
• GIFs can be animated and use lossless compression

Choosing Names for Image Files

• Use all lowercase letters
• Do not use punctuation symbols and spaces
• Do not change the file extensions
• Keep file names short but descriptive

The Image Element

• Configures graphics on a web page
• src attribute specifies the file name of the graphic
• alt attribute specifies alternate text content (description)
• height and width attributes specify the height and width of the graphic in pixels

Accessibility and Images

• Required: configure the alt attribute to provide alternate text content
• Recommended: provide simple text links at the bottom of the page for site navigation using image links

Image Links

• To create an image link, use an anchor element to contain an image element
• Browsers automatically add a border to image links, which can be eliminated using CSS

Choosing Names for Image Files

• Use all lowercase letters when naming image files. • Avoid using punctuation symbols and spaces in image file names. • File extensions should be maintained (e.g., .gif, .jpg, .jpeg, or .png). • Keep file names short but descriptive, e.g., dog-birthday.gif.

The Image Element

• The image element configures graphics on a web page. • The src attribute specifies the file name of the graphic. • The alt attribute configures alternate text content (description). • The height attribute sets the height of the graphic in pixels. • The width attribute sets the width of the graphic in pixels.

Accessibility & Images

• The alt attribute is required to configure alternate text content. • Alternate text content conveys the meaning/intent of the image. • Use alt="" for purely decorative images. • If site navigation uses image links, provide simple text links at the bottom of the page.

Image Links

• Create an image link by using an anchor element to contain an image element. • Browsers automatically add a border to image links, which can be eliminated using CSS (img {border-style: none; }).

Thumbnail Image

• A thumbnail image is a small image configured to link to a larger version of that image.

JPEG

• Joint Photographic Experts Group (JPEG) is best used for photographs. • JPEG supports up to 16.7 million colors. • JPEG uses lossy compression. • JPEG cannot be animated or made transparent. • Progressive JPEG is similar to interlaced display.

PNG

• Portable Network Graphic (PNG) supports millions of colors. • PNG supports multiple levels of transparency (but limit to one transparent color for Web display). • PNG supports interlacing. • PNG uses lossless compression. • PNG combines the best of GIF and JPEG. • Browser support for PNG is growing.

WebP

• WebP supports millions of colors. • WebP supports transparency. • WebP uses both lossy and lossless compression. • WebP is intended to provide improved compression for GIF and JPG images. • Browser support for WebP is growing.

Image Optimization

• Image optimization is the process of creating an image with the lowest file size that still renders a good quality image. • Image optimization involves balancing image quality and file size. • Use a graphics application to reduce image dimensions and file size.

Optimize An Image for the Web

• Reduce the file size of the image. • Reduce the dimensions of the image to the actual width and height of the image on the web page. • Use image editing tools like GIMP, Adobe Photoshop, or Pixlr to optimize images.

Types of Graphics

• Graphic types commonly used on web pages: GIF, JPG, PNG, and WebP.

GIF

• Graphics Interchange Format (GIF) is best used for line art and logos. • GIF has a maximum of 256 colors. • One color can be configured as transparent in GIF. • GIF can be animated and uses lossless compression. • GIF can be interlaced.

Media & Interactivity

• Types of multimedia files used on the Web include audio and video files.
• Hyperlinking is the most basic method to provide audio or video files on a web page.

Containers & Codecs

• A container is designated by the file extension and contains the media and metadata.
• A codec is the algorithm used to compress and decompress the media.
• HTML5 audio and video are native to the browser, but browsers do not all support the same codecs.

Audio File Types

• .aac, .mp4 files use MPEG 4 Audio.
• .mp3 files use MPEG-1 Audio Layer-3.
• .ogg files use Ogg Vorbis (open-source).
• .wav files use Wave File.

Video File Types

• .av1, .mp4 files use AV1 codec (open-source).
• .m4v, .mp4 files use MPEG-4, H.264 codec.
• .mov files use Quicktime MPEG-4 codec.
• .mov, .mp4, .hevc files use High-efficiency Video Coding, H.265 codec.
• .ogv, .ogg files use Ogg Theora (open-source), Theora codec.
• .webm files use VP8 & VP9 codecs (open-source).

Copyright Issues

• Only publish media that you have personally created or have obtained the rights or license to use.
• All work, including web pages, are automatically copyrighted even if there is no copyright mark or date.
• Fair Use Clause of the Copyright Act and Creative Commons provide alternative approaches to copyright.

Multimedia & Accessibility

• Provide alternate content for accessibility, such as transcripts for audio and captions for video.

HTML5 Audio & Video Elements

• Use the and elements to configure audio on a web page.
• Use the and elements to configure video on a web page.
• Use the `` element to embed a video.

CSS Drop Down Menu

• Configure the nav container with position: relative.
• Code the submenu (ul element) with the parent li element.
• Configure the submenu ul element to initially not display.
• Configure the submenu ul element with absolute positioning.

Media & Interactivity

• Multimedia files can be used on the web to enhance user experience
• There are different types of multimedia files, including audio and video files

Configuring Audio & Video

• The most basic method to provide audio or video files is through hyperlinking
• HTML5 provides native support for audio and video elements, but browsers do not all support the same codecs

Containers & Codecs

• A container is designated by the file extension and contains the media and metadata
• A codec is an algorithm used to compress and decompress the media

Common Audio File Types

• .aac, .mp4: MPEG 4 Audio
• .mp3: MPEG-1 Audio Layer-3
• .ogg: Ogg Vorbis (open-source)
• .wav: Wave File

Common Video File Types

• .av1, .mp4: Open-source, Alliance for Open Media, AV1 codec
• .m4v, .mp4: MPEG-4, H.264 codec
• .mov: Quicktime MPEG-4 codec
• .mov, .mp4, .hevc: High-efficiency Video Coding, H.265 codec
• .ogv, .ogg: Open-source, Ogg Theora (open-source), Theora codec
• .webm: Open media format, VP8 & VP9 codecs

Copyright Issues

• Only publish media that you have personally created or have obtained the rights or license to use
• Ask permission to use media created by another person
• All work (including web pages) is automatically copyrighted even if there is not a copyright mark or date
• Fair Use Clause of the Copyright Act allows for limited use of copyrighted materials
• Creative Commons provides an alternative approach to copyright

Multimedia & Accessibility

• Provide alternate content for multimedia, such as:
  • Transcripts (for audio)
  • Captions (for video)
  • Text format

HTML5 Audio & Source Elements

• Use the `` element to configure audio on a web page
• The `` element can be used to specify multiple audio file formats

HTML5 Video & Source Elements

• Use the `` element to configure video on a web page
• The `` element can be used to specify multiple video file formats

Using the iframe Element

• The `` element can be used to embed a video from another website

CSS Drop Down Menu

• Configure a navigation container with position: relative
• Code a submenu (drop-down menu) ul element with the parent li element
• Configure the submenu ul element to initially not display
• Configure the submenu ul element with absolute positioning