HTML/CSS Basics Flashcards

1
Q

Attributes

A

HTML
Provides additional information about an element.
Ex: href src id

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Tags

A

HTML Property
Brackets (<>) Surrounding an Element
<> Opening Tag
</> Closing Tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

HTML

A

HyperText Markup Language
Defines Structure of Content

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

CSS

A

Cascading Style Sheets
Represents Appearance of Content

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Elements

A

Used in HTML
Define Structure
Ex: <h1>> <p> <div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

HTML Document Structure

A

All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Self-Closing Elements

A

Some elements simply receive their content or behavior from attributes within a single tag
Ex: <meta></meta> <img></img> <input></input> <link></link>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Selectors

A

CSS
A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to.
Generally target an attribute value such as an id or class value.
Selectors are followed with curly brackets, {}, which encompass the styles to be applied to the selected element.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Properties

A

A property determines the styles that will be applied to that element.
ex: background color font-size height width padding

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Values

A

Values determine the behavior of a property.
Values can be identified as the text between the colon, :, and semicolon, ;.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Type Selector

A

Type selectors target elements by their element type.
Should we wish to target all division elements, <div>, we would use a type selector of div.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Class Selector

A

Class selectors allow us to select an element based on the element’s class attribute value.
Class selectors allow us to apply the same styles to different elements at once by using the same class attribute value across multiple elements.
Within CSS, classes are denoted by a leading period, ., followed by the class attribute value

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

ID Selector

A

ID selectors are even more precise than class selectors, as they target only one unique element at a time. Just as class selectors use an element’s class attribute value as the selector, ID selectors use an element’s id attribute value as a selector.
Within CSS, ID selectors are denoted by a leading hash sign, #, followed by the id attribute value.
IDs can only be used one per page.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Syntax

A

Spelling and Gramar Rules

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

<p>
</p>

A

Paragraph Tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

<a></a>

A

Anchor Tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

<h1><h1>
...................
<h6></h6>
</h1></h1>

A

Heading Tag

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

<span></span>

A

HTML
Short Text

18
Q

<pre>
</pre>

A

HTML
Preserves Whitespace
Better to do with CSS

19
Q

<em></em>

A

HTML
Stress Emphasis
Looks Italicized
Accessibility Tag

20
Q

<strong></strong>

A

HTML
Strong Importance
Looks Bold
Accessibility Tag

21
Q

<ul>
</ul>

A

HTML
Unordered List

22
Q

<ol>
</ol>

A

HTML
Ordered List

23
Q

<li>
</li>

A

HTML
List Item

24
Q

Containing Element

A

Element that contains other element

<div></div>

<section></section>

<article></article>

<aside></aside>

<header></header>

<footer></footer>

25
Q

Semantics

A

Semantics within HTML is the practice of giving content on the page meaning and structure by using the proper element

26
Q

Header

A

The <header> element, like it sounds, is used to identify the top of a page, article, section, or other segment of a page. In general, the <header> element may include a heading, introductory text, and even navigation.

27
Q

Navigation

A

The <nav> element identifies a section of major navigational links on a page. The <nav> element should be reserved for primary navigation sections only, such as global navigation, a table of contents, previous/next links, or other noteworthy groups of navigational links.

28
Q

Article

A

The <article> element is used to identify a section of independent, self-contained content that may be independently distributed or reused. We’ll often use the <article> element to mark up blog posts, newspaper articles, user-submitted content, and the like.

29
Q

Section

A

The <section> element is used to identify a thematic grouping of content, which generally, but not always, includes a heading. The grouping of content within the <section> element may be generic in nature, but it’s useful to identify all of the content as related.

The <section> element is commonly used to break up and provide hierarchy to a page.

30
Q

Aside

A

Mainly used for ads.
The <aside> element holds content, such as sidebars, inserts, or brief explanations, that is tangentially related to the content surrounding it. When used within an <article> element, for example, the <aside> element may identify content related to the author of the article.

31
Q

Footer

A

The <footer> element identifies the closing or end of a page, article, section, or other segment of a page. Generally the <footer> element is found at the bottom of its parent. Content within the <footer> element should be relative information and should not diverge from the document or section it is included within.

32
Q

Division Element

A

A <div> is a block-level element that is commonly used to identify large groupings of content, and which helps to build a web page’s layout and design.

33
Q

Span Element

A

A <span>, on the other hand, is an inline-level element commonly used to identify smaller groupings of text within a block-level element.</span>

34
Q

Cascade

A

Within CSS, all styles cascade from the top of a style sheet to the bottom, allowing different styles to be added or overwritten as the style sheet progresses.

35
Q

Cascading Properties

A

Because the green background color declaration comes after the orange background color declaration, it will overrule the orange background, and, as before, our paragraphs will appear with a green background.

36
Q

Specificity

A

The type selector has the lowest specificity weight and holds a point value of 0-0-1. The class selector has a medium specificity weight and holds a point value of 0-1-0. Lastly, the ID selector has a high specificity weight and holds a point value of 1-0-0. As we can see, specificity points are calculated using three columns. The first column counts ID selectors, the second column counts class selectors, and the third column counts type selectors.
The ID selector has a higher specificity weight than the class selector, and the class selector has a higher specificity weight than the type selector.

37
Q

Box Model

A

Every element on a page is a rectangular box and may have width, height, padding, borders, and margins

38
Q

Margin

A

The margin property allows us to set the amount of space that surrounds an element. Margins for an element fall outside of any border and are completely transparent in color. Margins can be used to help position elements in a particular place on a page or to provide breathing room, keeping all other elements a safe distance away.

39
Q

Padding

A

The padding property is very similar to the margin property; however, it falls inside of an element’s border, should an element have a border. The padding property is used to provide spacing directly within an element.

40
Q

Borders

A

Borders fall between the padding and margin, providing an outline around an element. The border property requires three values: width, style, and color. Shorthand values for the border property are stated in that order—width, style, color. In longhand, these three values can be broken up into the border-width, border-style, and border-color properties. These longhand properties are useful for changing, or overwriting, a single border value.

41
Q

Border Radius

A

The border-radius property accepts length units, including percentages and pixels, that identify the radius by which the corners of an element are to be rounded. A single value will round all four corners of an element equally; two values will round the top-left/bottom-right and top-right/bottom-left corners in that order; four values will round the top-left, top-right, bottom-right, and bottom-left corners in that order.

42
Q

Typeface

A

A typeface is what we see. It is the artistic impression of how text looks, feels, and reads.