WEBPROG: X.3 & X.4 COMBI

CSS

This specifies how HTML components should be rendered on screen, paper, or other mediums.

Inline

This method of CSS insertion is used to impart a unique style to a single element. It is placed in the opening tag of an element.

Internal

This method of CSS insertion is used to apply style to only a specific page. It is placed in the head section of the HTML structure.

External

This method of CSS insertion is used to modify the look of a website by changing only one file. An HTML page must reference the style sheet file in the head section of the HTML structure in order to function.

ID Selector

This CSS element selector selects an HTML element based on its ID property. It is unique within a page so it can only be used once. It is identified by a hash symbol (#).

Class Selector

This CSS element selector selects HTML items that have a certain class property. It is identified by a period (.).

Text Color

This property is used to set the color of the text. It can be specified by the HEX value, RGB value, or simply the color name.

Text Alignment

This property is used to set the horizontal alignment of a text. It can be centered, left, right, or justified.

Text Transform

This property is used to turn text into uppercase or lowercase letters, or capitalize the first letter of each word.

Text Indentation

This property is used to specify the indentation of the first line of a text.

CSS Background

These properties are used to define the background effects of an element.

CSS Units

These are used to specify the length values of properties.

Absolute length

This length unit is fixed and a length expressed in any of these will appear exactly as that size.

Relative length

This length unit specifies a length relative to another length property, and it scales better between different rendering mediums.

1. cm - centimeters

2. mm - millimeters

3. in - inches

4. px - pixels

5. pt - points

6. pc - picas

What are some examples of absolute length units?

em

This relative length is relative to the font size of the element.

ex

This relative length is relative to the x-height of the current font.

ch

This relative length is relative to the width of the “0”.

rem

This relative length is relative to the font size of the root element.

vw

This relative length is relative to 1% of the width of the viewport.

vh

This relative length is relative to 1% of the height of the viewport.

vmin

This relative length is relative to 1% of the viewport’s smaller dimension.

vmax

This relative length is relative to 1% of the viewport’s larger dimension.

%

This relative length is relative to the parent element.

CSS Box Model

This fundamental CSS concept determines how items are organized and positioned on a webpage.

Padding

This property is used to add space around an element inside any given boundary.

CSS Grid

This layout consists of a parent element with one or more child elements.

Web Design

This refers to the process of planning and creating the visual presentation, layout, organization, and overall user experience of a website.

1. Layout

2. Colors

3. Typography

4. Spacing

5. Images

6. Navigation

7. Content Organization

8. Responsiveness

9. Accessibility

Web design involves decision about these:

It makes it easier to read, navigate, and use.

Why does Web Design matter?

Consistency

This principle of a good web design is the act of keeping visual style, functional behavior, and content tone uniform across every page.

Visual Hierarchy

This principle of a good web design is the act of arranging elements by order of importance using size, color, and placement to guide a user’s attention.

Whitespace

This principle of a good web design is the act of leaving empty or negative space around and between text, images, and buttons to improve readability and reduce clutter.

Micro whitespace

This whitespace type is the act of leaving small gaps between letters or lines of text.

Macro whitespace

This whitespace type is the act of leaving large blank areas between major sections or page margins.

Simplicity

This principle of a good web design is the act of removing extra parts so users can focus on the main goal.

1. Colors

2. Fonts

3. Animations

4. Images

5. Decorations

6. Information

Avoid an unnecessary amount of these to retain the simplicity of the website:

1. Clean & Focused Layout

2. Good Contrast

3. Readable Text

4. Consistent Design

5. Clear Organization

6. Clear Navigation

What are the DO’s of Web Design?

To help accommodate people with disabilities that may hinder their access to a website.

Why does accessibility matter?

1. (P) - perceivable

2. (O) - operable

3. (U) - understandable

4. (R) - robust

What are the principles of accessibility?