Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements

Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements

memorize.aimemorize.ai (lvl 286)
Section 1

Preview this deck

What are 3 universally supported Web image formats?

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

0

All-time users

0

Favorites

0

Last updated

7 years ago

Date created

Mar 1, 2020

Cards (44)

Section 1

(44 cards)

What are 3 universally supported Web image formats?

Front

gif,jpeg,png

Back

How do you create an ampersand using code?

Front

<

Back

browser-safe color palette

Front

When you use a color in a Web page (whether for a background, font or image), you are enabling a combination of RGB values. This limited color palette is necessary because many computer screens have limitations

Back

What is the code to align images to text?

Front

img.floatleft { float: left; margin: 5px; }

Back

non-breaking space

Front

can be used to insert more than one space in succession when needed

Back

Code to align images: middle

Front

CSS file: img.middle {vertical-align:middle; margin:5px;} HTML file: <img src="syb/SYBcollage2.png" class="middle" />

Back

font color

Front

uses the same values that you learned for specifying a page background color

Back

Code to align images: bottom

Front

CSS file: img.bottom {vertical-align:baseline;} HTML file: <img src="syb/SYBcollage2.png" class="bottom" />

Back

<article>

Front

Web site content, such as company services, articles, blogs, images and videos

Back

compression

Front

lossless, unlike standard JPEG compression. Also, the compression used in the PNG format is not copyrighted, which has helped ensure developer and user agent vendor support

Back

<nav>

Front

Defines navigation links, such as hypertext menus to access various pages of the Web site

Back

Code to align images: left

Front

CSS file: img.floatleft {float:left; margin:5px;} HTML file: <img src="syb/SYBcollage2.png" class="floatleft" />

Back

animation

Front

less popular than animated GIF, but gaining attention

Back

How many versions of CSS are there?

Front

3

Back

background color

Front

To specify a color for a page background, you add the background-color property to the body selector in an external CSS file using the following syntax

Back

text color

Front

To designate the color of text on a page, use the color property in the body selector of the CSS file. View the preceding background color example for the syntax. Various color values, such as hexadecimal values, can be used instead of words

Back

<footer>

Front

Bottom of the Web page, similar to the footer in a word-processing document

Back

inheritance

Front

The style you define will flow, or cascade, throughout the documents, unless another style defined inside of a page specifically overrides it

Back

GIF (Graphics Interchange Format)

Front

its files support 256 colors, rather than the millions of colors available to JPEG images. GIFs are best suited for line art, custom drawings and navigational images

Back

Name two benefits of using CSS?

Front

Consistency; Easy change management

Back

Code to align images: top

Front

CSS file: img.top {vertical-align:top;} HTML file: <img src="syb/SYBcollage2.png" class="top" />

Back

rule

Front

In a style sheet, a format instruction that consists of a specified selector and the properties and values applied to it

Back

hyperlink color (two types)

Front

Hyperlinks use the anchor, or <a> element, in HTML files. CSS allows different link states to be defined in the anchor selector

Back

background image

Front

To specify an image for a page background, add the background-image property to the body selector. You must specify the location of the image using the following syntax

Back

What are the two codes to adjust width and height of images?

Front

<img src="imagename.gif" height="HeightInPixels" width="WidthInPixels"/>

Back

JPEG (Joint Photographic Experts Group)

Front

the format supports up to 24 bits of color information (16.7 million colors), and is typically used for photographs and complex images

Back

Tips for creating Web Page layout (list 5)

Front

Be succinct — Limit words to clear, necessary verbiage, especially on the home page. Most users simply scan pages quickly looking for specific information or links to it. Let users navigate to additional pages if they want more information. Make sure that each page focuses on one topic — No tangent message, regardless of its importance, should be added to a page. Use links to point users to appropriate related topics on separate pages. Divide the page into three sections — Use the left side of the page for navigation, the upper section of the page for a topic title (as well as navigation), and the middle section of the page for the information. Include navigation aids — A common way to enable navigation is to place links at the top and bottom of the page, and within the body of the page, to reduce the need for users to scroll. Place comments in each section of code — Comments help explain changes you have made to the code or page. You can indicate the nature of the change, including the date you made the change and your name or initials, or you can explain the nature of the markup. For example, the syb.html page has three headings (h1, h2 and h3). You could comment each of these sections of the narrative.

Back

fixed-width layout

Front

Achieved by assigning specific pixel widths to elements using the HTML5 structural elements or the <div> tag. This layout ensures that the text, images and layout will not vary from browser to browser.

Back

font-size

Front

takes values in pixels, with 16 being the normal size of default text. The font-size value is specified with the "px" abbreviation for "pixels." No spaces can exist between the number value and the abbreviation. Headings (h1 through h6) should be used whenever possible instead of the font-size property

Back

Describe differences in GIF 89a, JPEG, and PNG

Front

GIF 89a, has everything. JPEG (standard) No format, No transparency, No compression PNG, has everything

Back

transparency

Front

similar to GIF 89a

Back

selector

Front

In a style sheet, any element to which designated styles are applied.

Back

liquid layout

Front

Achieved by assigning percentage values to elements. With this layout, the size of an element is flexible and will change dynamically depending on the size of the browser window. If the user resizes the browser window, the elements will resize correspondingly

Back

<aside>

Front

Content that is "aside" from the article content, such as advertisements or news feeds

Back

hexadecimal

Front

A base-16 number system that uses sixteen distinct symbols 0-9 and A-F to represent numbers from 0 to 15.

Back

font-family

Front

specifies the typeface (i.e., font name) to be used. A font-family value must include quotation marks if it has multiple words, such as "Times New Roman." You should also list backup fonts in the font-family value, such as Times New Roman, Arial, and Verdana. If the first font is not supported, the next value will attempt to render

Back

alternative text

Front

The alt attribute specifies alternative text to appear while the graphic is loading, or in place of the graphic in non-graphical browsers such as Lynx

Back

Portable Network Graphics (PNG)

Front

PNG bit depth can be adjusted, unlike GIF and JPEG, which must be 8-bit and 24-bit depth, respectively. PNGs also use compression filters that can support up to 48-bit color

Back

What is the code to create an image on a Web page?

Front

<img src="imagefile.png" alt="Alternative text goes here"/>

Back

<header>

Front

Top of the Web page, similar to the header in a word-processing document

Back

Code to align images: right

Front

CSS file: img.floatright {float:right; margin:5px;} HTML file: <img src="syb/SYBcollage2.png" class="floatright" />

Back

dithering

Front

The ability for a computer to approximate a color by combining the RGB values

Back

interlacing

Front

similar to GIF 89a

Back

What is the code to stylize a horizontal rule?

Front

<hr style="width:50%; height:10px;"/>

Back