FE1: Web Development Fundamentals Flashcards by AYW Liu

Elements and Structure

< li > List Item Element

The <li> list item element create list items inside:

Ordered lists <ol>
Unordered lists <ul>

How well did you know this?

Not at all

Perfectly

Elements and Structure

<video> Video Element

The <video> element embeds a media player for video playback. The src attribute will contain the URL to the video. Adding the controls attribute will display video controls in the media player.</video>

Note: The content inside the opening and closing tag is shown as a fallback in browsers that don’t support the element.

How well did you know this?

Not at all

Perfectly

Elements and Structure

Emphasis Element

The <em> emphasis element emphasizes text and browsers will usually italicize the emphasized text by default.</em>

斜体

How well did you know this?

Not at all

Perfectly

Elements and Structure

Attribute Name and Values

HTML attributes consist of a name and a value using the following syntax: name=”value” and can be added to the opening tag of an HTML element to configure or change the behavior of the element.

How well did you know this?

Not at all

Perfectly

Elements and Structure

Line Break Element

The <br></br> line break element will create a line break in text and is especially useful where a division of text is required, like in a postal address. The line break element requires only an opening tag and must not have a closing tag.

How well did you know this?

Not at all

Perfectly

Elements and Structure

Unique ID Attributes

In HTML, specific and unique id attributes can be assigned to different elements in order to differentiate between them.

When needed, the id value can be called upon by CSS and JavaScript to manipulate, format, and perform specific instructions on that element and that element only. Valid id attributes should begin with a letter and should only contain letters (a-Z), digits (0-9), hyphens (-), underscores (_), and periods (.).

How well did you know this?

Not at all

Perfectly

Elements and Structure

HTML Attributes

HTML attributes are values added to the opening tag of an element to configure the element or change the element’s default behavior. In the provided example, we are giving the <p> (paragraph) element a unique identifier using the id attribute and changing the color of the default text using the style attribute.

How well did you know this?

Not at all

Perfectly

Elements and Structure

alt Attribute

An <img></img> element can have alternative text via the alt attribute. The alternative text will be displayed if an image fails to render due to an incorrect URL, if the image format is not supported by the browser, if the image is blocked from being displayed, or if the image has not been received from the URL.

The text will be read aloud if screen reading software is used and helps support visually impaired users by providing a text descriptor for the image content on a webpage.

How well did you know this?

Not at all

Perfectly

Elements and Structure

<span> Span Element</span>

The <span> element is an inline container for text and can be used to group text for styling purposes. However, as <span> is a generic container to separate pieces of text from a larger body of text, its use should be avoided if a more semantic element is available.</span></span>

How well did you know this?

Not at all

Perfectly

Elements and Structure

<strong> Strong Element</strong>

How well did you know this?

Not at all

Perfectly

Elements and Structure

<a> Anchor Element</a>

The <a> anchor element is used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via the hyperlink reference attribute, href. The href determines the location the anchor element points to.</a>

How well did you know this?

Not at all

Perfectly

Elements and Structure

Target Attribute

The target attribute on an <a> anchor element specifies where a hyperlink should be opened. A target value of “_blank” will tell the browser to open the hyperlink in a new tab in modern browsers, or in a new window in older browsers or if the browser has had settings changed to open hyperlinks in a new window.</a>

How well did you know this?

Not at all

Perfectly

Elements and Structure

Link to a Different Part of the Page #

The anchor element <a> can create hyperlinks to different parts of the same HTML document using the href attribute to point to the desired location with # followed by the id of the element to link to.</a>

How well did you know this?

Not at all

Perfectly

HTML

Comments

In HTML, comments can be added between an opening . Content inside of comments will not be rendered by browsers, and are usually used to describe a part of code or provide other details.

Comments can span single or multiple lines.

How well did you know this?

Not at all

Perfectly

Elements and Structure

Whitespace

Whitespace, such as line breaks, added to an HTML document between block-level elements will generally be ignored by the browser and are not added to increase spacing on the rendered HTML page. Rather, whitespace is added for organization and easier reading of the HTML document itself.

How well did you know this?

Not at all

Perfectly

Elements and Structure

Title Element

The <title> element contains a text that defines the title of an HTML document. The title is displayed in the browser’s title bar or tab in which the HTML page is displayed. The <title> element can only be contained inside a document’s <head> element.</title></title>

How well did you know this?

Not at all

Perfectly

Elements and Structure

Document Type Declaration

The document type declaration <!DOCTYPE html> is required as the first line of an HTML document. The doctype declaration is an instruction to the browser about what type of document to expect and which version of HTML is being used, in this case it’s HTML5.

<!DOCTYPE html>

How well did you know this?

Not at all

Perfectly

Tables

Table Row Element

The table row element, <tr>, is used to add rows to a table before adding table data and table headings.

How well did you know this?

Not at all

Perfectly

Tables

Table Data Element

The table data element, <td>, can be nested inside a table row element, <tr>, to add a cell of data to a table.

How well did you know this?

Not at all

Perfectly

Tables

Table Head Element

The table head element, <thead>, defines the headings of table columns encapsulated in table rows.

How well did you know this?

Not at all

Perfectly

Tables

rowspan Attribute

Similar to colspan, the rowspan attribute on a table header or table data element indicates how many rows that particular cell should span within the table. The rowspan value is set to 1 by default and will take any positive integer up to 65534.

How well did you know this?

Not at all

Perfectly

Tables

Table Body Element

The table body element, <tbody>, is a semantic element that will contain all table data other than table heading and table footer content. If used, <tbody> will contain all table row <tr> elements, and indicates that <tr> elements make up the body of the table. <table> cannot have both <tbody> and <tr> as direct children.

How well did you know this?

Not at all

Perfectly

Tables

Table Body Element

How well did you know this?

Not at all

Perfectly

Tables

Table Heading Element

The table heading element, <th>, is used to add titles to rows and columns of a table and must be enclosed in a table row element, <tr>.

How well did you know this?

Not at all

Perfectly

# Tables colspan Attribute

The colspan attribute on a table header or table data element indicates how many columns that particular cell should span within the table. The colspan value is set to 1 by default and will take any positive integer between 1 and 1000.

# Tables Table Footer Element

The table footer element, , uses table rows to give footer content or to summarize content at the end of a table.

# Forms : Checkbox Type

When using an HTML input element, the type="checkbox" attribute will render a single checkbox item. To create a group of checkboxes related to the same topic, they should all use the same name attribute. Since it’s a checkbox, multiple checkboxes can be selected for the same topic.

# Forms textarea Element

The textarea element is used when creating a text-box for multi-line input (e.g. a comment section). The element supports the rows and cols attributes which determine the height and width, respectively, of the element. When rendered by the browser, textarea fields can be stretched/shrunk in size by the user, but the rows and cols attributes determine the initial size. Unlike the input element, the

element has both opening and closing tags. The value of the element is the content in between these tags (much like a <p> element). The code block shows a <textarea> of size 10x30 and with a name of "comment".
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/105/a_image_thumb.?1665320943" />
</div>
</div>

<div class='flashcard-row thin-card' data='{"aSoundUrl":null,"cardIsBlurrable":false,"number":29,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783253},"returnTo":"/packs/20927149/subscribe"}' id='card-399783253'>
<div class='header'>
29
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

《form》 Element
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The HTML <form> element is used to collect and send information to an external source.

<form> can contain various input elements. When a user submits the form, information in these input elements is passed to the source which is named in the action attribute of the form.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/253/a_image_thumb.?1665321022" />
</div>
</div>

<div class='flashcard-row thin-card' data='{"aSoundUrl":null,"cardIsBlurrable":false,"number":30,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783363},"returnTo":"/packs/20927149/subscribe"}' id='card-399783363'>
<div class='header'>
30
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<input>: Number Type
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
HTML input elements can be of type number. These input fields allow the user to enter only numbers and a few special characters inside the field.

The example code block shows an input with a type of number and a name of balance. When the input field is a part of a form, the form will receive a key-value pair with the format: name: value after form submission.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/363/a_image_thumb.?1665321083" />
</div>
</div>

<div class='flashcard-row thin-card' data='{"aSoundUrl":null,"cardIsBlurrable":false,"number":31,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783431},"returnTo":"/packs/20927149/subscribe"}' id='card-399783431'>
<div class='header'>
31
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<input> Element
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The HTML <input> element is used to render a variety of input fields on a webpage including text fields, checkboxes, buttons, etc. <input> element have a type attribute that determines how it gets rendered to a page.

The example code block will create a text input field and a checkbox input field on a webpage.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/431/a_image_thumb.?1665321124" />
</div>
</div>

<div class='flashcard-row thin-card' data='{"aSoundUrl":null,"cardIsBlurrable":false,"number":32,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783485},"returnTo":"/packs/20927149/subscribe"}' id='card-399783485'>
<div class='header'>
32
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<input>: Range Type
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A slider can be created by using the type="range" attribute on an HTML input element. The range slider will act as a selector between a minimum and a maximum value. These values are set using the min and max attributes respectively. The slider can be adjusted to move in different steps or increments using the step attribute.

The range slider is meant to act more as a visual widget to adjust between 2 values, where the relative position is important, but the precise value is not as important. An example of this can be adjusting the volume level of an application.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/485/a_image_thumb.?1665321158" />
</div>
</div>

<div class='flashcard-row thin-card' data='{"aSoundUrl":null,"cardIsBlurrable":false,"number":33,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783554},"returnTo":"/packs/20927149/subscribe"}' id='card-399783554'>
<div class='header'>
33
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<select> Element
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The HTML <select> element can be used to create a dropdown list. A list of choices for the dropdown list can be created using one or more <option> elements. By default, only one <option> can be selected at a time.

The value of the selected <select>’s name and the <option>’ s value attribute are sent as a key-value pair when the form is submitted.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/554/a_image_thumb.?1665321206" />
</div>
</div>

<div class='flashcard-row thin-card' data='{"aSoundUrl":null,"cardIsBlurrable":false,"number":34,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783628},"returnTo":"/packs/20927149/subscribe"}' id='card-399783628'>
<div class='header'>
34
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

Submitting a Form
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Once we have collected information in a form we can send that information somewhere else by using the action and method attribute. The action attribute tells the form to send the information. A URL is assigned that determines the recipient of the information. The method attribute tells the form what to do with that information once it’s sent. An HTTP verb is assigned to the method attribute that determines the action to be performed.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/628/a_image_thumb.?1665321234" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":35,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783689},"returnTo":"/packs/20927149/subscribe"}' id='card-399783689'>
<div class='header'>
35
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<input>: Text Type
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
HTML <input> elements can support text input by setting the attribute type="text". This renders a single row input field that users can type text inside.

The value of the <input>‘s name and value attribute of the element are sent as a key-value pair when the form is submitted.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/689/a_image_thumb.?1665321264" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":36,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783780},"returnTo":"/packs/20927149/subscribe"}' id='card-399783780'>
<div class='header'>
36
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<datalist> Element
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
When using an HTML input, a basic search/autocomplete functionality can be achieved by pairing an <input> with a <datalist>. To pair a <input> with a <datalist> the <input>’s list value must match the value of the id of the <datalist>. The datalist element is used to store a list of <option>s.

The list of data is shown as a dropdown on an input field when a user clicks on the input field. As the user starts typing, the list will be updated to show elements that best match what has been typed into the input field. The actual list items are specified as multiple option elements nested inside the datalist.

datalists are ideal when providing users a list of pre-defined options, but to also allow them to write alternative inputs as well.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/780/a_image_thumb.?1665321343" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":37,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399783913},"returnTo":"/packs/20927149/subscribe"}' id='card-399783913'>
<div class='header'>
37
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<input>: Radio Button Type
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
HTML <input> elements can be given a type="radio" attribute that renders a single radio button. Multiple radio buttons of a related topic are given the same name attribute value. Only a single option can be chosen from a group of radio buttons.

The value of the selected/checked <input>’s name and value attribute of this element are sent as a key-value pair when the form is submitted.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/783/913/a_image_thumb.?1665321398" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":38,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399784044},"returnTo":"/packs/20927149/subscribe"}' id='card-399784044'>
<div class='header'>
38
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

Submittable Input
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
HTML <input> elements can have a type attribute set to submit, by adding type="submit". With this attribute included, a submit button will be rendered and, by default, will submit the <form> and execute its action.

The text of a submit button is set to Submit by default but can also be changed by modifying the value attribute.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":39,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399784077},"returnTo":"/packs/20927149/subscribe"}' id='card-399784077'>
<div class='header'>
39
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<input> name Attribute
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
In order for a form to send data, it needs to be able to put it into key-value pairs. This is achieved by setting the name attribute of the input element. The name will become the key and the value of the input will become the value the form submits corresponding to the key.

It’s important to remember that the name is not the same as the ID in terms of form submission. The ID and the name of the input may be the same, but the value will only be submitted if the name attribute is specified.

In the code example, the first input will be submitted by the form, but the second one will not.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/784/077/a_image_thumb.?1665321469" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":40,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399784155},"returnTo":"/packs/20927149/subscribe"}' id='card-399784155'>
<div class='header'>
40
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<label> Element
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The HTML <label> element provides identification for a specific <input> based on matching values of the <input>‘s id attribute and the <label>‘s for attribute. By default, clicking on the <label> will focus the field of the related <input>.

The example code will create a text input field with the label text “Password: “ next to it. Clicking on “Password: “ on the page will focus the field for the related <input>.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/784/155/a_image_thumb.?1665321521" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":41,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399784257},"returnTo":"/packs/20927149/subscribe"}' id='card-399784257'>
<div class='header'>
41
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

<input> Password Type
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The HTML <input> element can have the attribute type="password" that renders a single row input field which allows the user to type censored text inside the field. It is used to type in sensitive information.

The value of this <input>’s name and value (actual value and not the censored version) attribute of this element are sent as a key-value pair when the form is submitted.

The code block shows an example of the fields for a basic login form - the username and password fields.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/784/257/a_image_thumb.?1665321558" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":42,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399784397},"returnTo":"/packs/20927149/subscribe"}' id='card-399784397'>
<div class='header'>
42
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

required Attribute
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
In HTML, input fields have an attribute called required which specifies that the field must include a value.

The example code block shows an input field that is required. The attribute can be written as required="true" or simply required.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/784/397/a_image_thumb.?1665321595" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":43,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399784915},"returnTo":"/packs/20927149/subscribe"}' id='card-399784915'>
<div class='header'>
43
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

max/min Attribute
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
HTML <input>s of type number have an attribute called max that specifies the maximum value for the input field.

The code block shows an input number field that is set to have a maximum value of 20. Any value larger than 20 will mark the input field as having an error.

```
<input type="number" name="rating" min="1" max="10">
<input type="number" max="20">
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":44,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399785283},"returnTo":"/packs/20927149/subscribe"}' id='card-399785283'>
<div class='header'>
44
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

maxlength/minlength Attribute
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
In HTML, input fields with type text have an attribute called maxlength that specifies the maximum number of characters that can be entered into the field. The code block shows an input text field that accepts text that has a maximum length of 140 characters.

```
<input type="text" name="tweet" maxlength="140">
<input type="text" name="username" minlength="6" />
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":45,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399785555},"returnTo":"/packs/20927149/subscribe"}' id='card-399785555'>
<div class='header'>
45
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

pattern Attribute
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
In a text input element, the pattern attribute uses a regular expression to match against (or validate) the value of the <input>, when the form is submitted.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/785/555/a_image_thumb.?1665321741" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":46,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399786139},"returnTo":"/packs/20927149/subscribe"}' id='card-399786139'>
<div class='header'>
46
</div>
<div class='card-face question'>
<div class='question-content'>
# Forms

HTML Form Validators
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
HTML forms allow you to specify different kinds of validation for your input fields to make sure that data is entered correctly before being submitted. HTML supports a number of different validators, including things like minimum value, minimum/maximum length, etc. The validators are specified as attributes on the input field.
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":47,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399786405},"returnTo":"/packs/20927149/subscribe"}' id='card-399786405'>
<div class='header'>
47
</div>
<div class='card-face question'>
<div class='question-content'>
# Semantic HTML

Semantic HTML
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Semantic HTML introduces meaning to the code we write. Before Semantic HTML the elements didn’t have any meaning as to what it does or what content goes in it. An element such as <div> was used as a general-purpose element to create things from headers to footers to articles. With Semantic HTML we were introduced to elements that tell developers and browsers exactly what it does and what content should go in it.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/786/405/a_image_thumb.?1665321982" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":48,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399786474},"returnTo":"/packs/20927149/subscribe"}' id='card-399786474'>
<div class='header'>
48
</div>
<div class='card-face question'>
<div class='question-content'>
# Semantic HTML

Embedding media
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Semantic HTML introduces us to <video>, <audio> and <embed>. <video> allows us to add videos to our website. <audio> allows us to implement audio into our website. <embed> can be used to implement any type of media. These elements are universal in that they all use the src attribute to link the source of the content. <video> and <audio> requires a closing tag while <embed> is a self-closing tag.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/786/474/a_image_thumb.?1665322012" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":49,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399786889},"returnTo":"/packs/20927149/subscribe"}' id='card-399786889'>
<div class='header'>
49
</div>
<div class='card-face question'>
<div class='question-content'>
# Semantic HTML

<figure> and <figcaption>
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <figure> element is used to encapsulate media such as an image, diagram. or code snippet. The <figcaption> element is used to describe the media encapsulated within the <figure> element. Developers will normally use <figcaption> within the <figure> element to group the media and description. This way, if a developer decides to change the position of the media, the description will follow along with it.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/786/889/a_image_thumb.?1665322193" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":50,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399787001},"returnTo":"/packs/20927149/subscribe"}' id='card-399787001'>
<div class='header'>
50
</div>
<div class='card-face question'>
<div class='question-content'>
# Semantic HTML

<section> and <article>
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
<section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. <article> holds content that makes sense on its own such as articles, blogs, and comments. Generally developers will use <section> to define a theme for the webpage and use <article> to write independent content for that theme. This does not mean that <article> has to be used with <section>.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/787/001/a_image_thumb.?1665322245" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":51,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399787078},"returnTo":"/packs/20927149/subscribe"}' id='card-399787078'>
<div class='header'>
51
</div>
<div class='card-face question'>
<div class='question-content'>
# Semantic HTML

<aside> Aside Element
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The <aside> element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. Usually, this information would be in a sidebar or a location where it doesn’t obstruct the main piece of content. An example of this would be an article that discusses how to take care of a dog and next to the article an ad would appear advertising a dog grooming product.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/787/078/a_image_thumb.?1665322278" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":52,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399787494},"returnTo":"/packs/20927149/subscribe"}' id='card-399787494'>
<div class='header'>
52
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

* href attribute to specify the URL to the external resource
* rel attribute to specify the relationship of the linked document to the current document
* type attribute to define the type of content being linked
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/787/494/a_image_thumb.?1665322473" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":53,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399787544},"returnTo":"/packs/20927149/subscribe"}' id='card-399787544'>
<div class='header'>
53
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

Write CSS in HTML File
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
CSS code can be written in an HTML file by enclosing the code in <style> tags. Code surrounded by <style> tags will be interpreted as CSS syntax.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/787/544/a_image_thumb.?1665322502" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":54,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399787623},"returnTo":"/packs/20927149/subscribe"}' id='card-399787623'>
<div class='header'>
54
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

Inline Styles
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
CSS styles can be directly added to HTML elements by using the style attribute in the element’s opening tag. Each style declaration is ended with a semicolon. Styles added in this manner are known as inline styles.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/787/623/a_image_thumb.?1665322539" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":55,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399787672},"returnTo":"/packs/20927149/subscribe"}' id='card-399787672'>
<div class='header'>
55
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

Class and ID Selectors
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
CSS classes can be reusable and applied to many elements. Class selectors are denoted with a period . followed by the class name. CSS ID selectors should be unique and used to style only a single element. ID selectors are denoted with a hash sign # followed by the id name.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/787/672/a_image_thumb.?1665322566" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":56,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399787729},"returnTo":"/packs/20927149/subscribe"}' id='card-399787729'>
<div class='header'>
56
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

Groups of CSS Selectors
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Match multiple selectors to the same CSS rule, using a comma-separated list. In this example, the text for both h1 and h2 is set to red.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/787/729/a_image_thumb.?1665322592" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":57,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399787933},"returnTo":"/packs/20927149/subscribe"}' id='card-399787933'>
<div class='header'>
57
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

Chaining Selectors
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
CSS selectors can be chained so that rule sets apply only to elements that match all criteria. For instance, to select <h3> elements that also have the section-heading class, the selector h3.section-heading can be used.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/787/933/a_image_thumb.?1665322689" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":58,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788056},"returnTo":"/packs/20927149/subscribe"}' id='card-399788056'>
<div class='header'>
58
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

HTML attributes with multiple values
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Some HTML attributes can have multiple attribute values. Multiple attribute values are separated by a space between each attribute.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/788/056/a_image_thumb.?1665322748" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":59,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788192},"returnTo":"/packs/20927149/subscribe"}' id='card-399788192'>
<div class='header'>
59
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

Selector Specificity
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors. In this example, only color: blue will be implemented as it has an ID selector whereas color: red has a type selector.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/788/192/a_image_thumb.?1665322816" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":60,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788446},"returnTo":"/packs/20927149/subscribe"}' id='card-399788446'>
<div class='header'>
60
</div>
<div class='card-face question'>
<div class='question-content'>
# Syntax and Selectors

CSS descendant selector
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS descendant selector combinator is used to match elements that are descended from another matched selector. They are denoted by a single space between each selector and the descended selector. All matching elements are selected regardless of the nesting level in the HTML.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/788/446/a_image_thumb.?1665322950" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":61,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788584},"returnTo":"/packs/20927149/subscribe"}' id='card-399788584'>
<div class='header'>
61
</div>
<div class='card-face question'>
<div class='question-content'>
# Visual Rules

CSS declarations
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
In CSS, a declaration is the key-value pair of a CSS property and its value. CSS declarations are used to set style properties and construct rules to apply to individual or groups of elements. The property name and value are separated by a colon, and the entire declaration must be terminated by a semi-colon.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/788/584/a_image_thumb.?1665323012" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":62,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788650},"returnTo":"/packs/20927149/subscribe"}' id='card-399788650'>
<div class='header'>
62
</div>
<div class='card-face question'>
<div class='question-content'>
# Visual Rules

!important Rule
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS !important rule is used on declarations to override any other declarations for a property and ignore selector specificity. !important rules will ensure that a specific declaration always applies to the matched elements. However, generally it is good to avoid using !important as bad practice.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/788/650/a_image_thumb.?1665323041" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":63,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788745},"returnTo":"/packs/20927149/subscribe"}' id='card-399788745'>
<div class='header'>
63
</div>
<div class='card-face question'>
<div class='question-content'>
# Visual Rules

Font Weight
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The font-weight CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal.

```
font-weight: bold;
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":64,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788794},"returnTo":"/packs/20927149/subscribe"}' id='card-399788794'>
<div class='header'>
64
</div>
<div class='card-face question'>
<div class='question-content'>
# Visual Rules

CSS Rule Sets
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is h1, points to an HTML element. The declaration(s), which in this example are color: blue and text-align: center style the element with a property and value. The rule set is the main building block of a CSS sheet.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/788/794/a_image_thumb.?1665323112" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":65,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788865},"returnTo":"/packs/20927149/subscribe"}' id='card-399788865'>
<div class='header'>
65
</div>
<div class='card-face question'>
<div class='question-content'>
# Visual Rules

Setting foreground text color in CSS
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Using the color property, foreground text color of an element can be set in CSS. The value can be a valid color name supported in CSS like green or blue. Also, 3 digit or 6 digit color code like #22f or #2a2aff can be used to set the color.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/788/865/a_image_thumb.?1665323142" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":66,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399788933},"returnTo":"/packs/20927149/subscribe"}' id='card-399788933'>
<div class='header'>
66
</div>
<div class='card-face question'>
<div class='question-content'>
# Visual Rules

Resource URLs
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
In CSS, the url() function is used to wrap resource URLs. These can be applied to several properties such as the background-image.

```
background-image: url("../resources/image.png");
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":67,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789004},"returnTo":"/packs/20927149/subscribe"}' id='card-399789004'>
<div class='header'>
67
</div>
<div class='card-face question'>
<div class='question-content'>
# Visual Rules

Font Family
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The font-family CSS property is used to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. If a font value is not available, browsers will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/789/004/a_image_thumb.?1665323212" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":68,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789171},"returnTo":"/packs/20927149/subscribe"}' id='card-399789171'>
<div class='header'>
68
</div>
<div class='card-face question'>
<div class='question-content'>
# The Box Model

CSS Margin Collapse
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
CSS margin collapse occurs when the top and bottom margins of blocks are combined into a single margin equal to the largest individual block margin.

Margin collapse only occurs with vertical margins, not for horizontal margins.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/789/171/a_image_thumb.?1665323278" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":69,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789282},"returnTo":"/packs/20927149/subscribe"}' id='card-399789282'>
<div class='header'>
69
</div>
<div class='card-face question'>
<div class='question-content'>
# The Box Model

CSS auto keyword
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The value auto can be used with the property margin to horizontally center an element within its container. The margin property will take the width of the element and will split the rest of the space equally between the left and right margins.

```
div {
  margin: auto;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":70,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789358},"returnTo":"/packs/20927149/subscribe"}' id='card-399789358'>
<div class='header'>
70
</div>
<div class='card-face question'>
<div class='question-content'>
# The Box Model

Dealing with overflow
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
If content is too large for its container, the CSS overflow property will determine how the browser handles the problem.

By default, it will be set to visible and the content will take up extra space. It can also be set to hidden, or to scroll, which will make the overflowing content accessible via scroll bars within the original container.

```
small-block {
  overflow: scroll;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":71,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789489},"returnTo":"/packs/20927149/subscribe"}' id='card-399789489'>
<div class='header'>
71
</div>
<div class='card-face question'>
<div class='question-content'>
# The Box Model

The visibility Property
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS visibility property is used to render hidden objects invisible to the user, without removing them from the page. This ensures that the page structure and organization remain unchanged.

```
.invisible-elements {
  visibility: hidden;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":72,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789535},"returnTo":"/packs/20927149/subscribe"}' id='card-399789535'>
<div class='header'>
72
</div>
<div class='card-face question'>
<div class='question-content'>
# The Box Model

The property box-sizing of CSS box model
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS box model is a box that wraps around an HTML element and controls the design and layout. The property box-sizing controls which aspect of the box is determined by the height and width properties. The default value of this property is content-box, which renders the actual size of the element including the content box; but not the paddings and borders. The value border-box, on the other hand, renders the actual size of an element including the content box, paddings, and borders.
```
.container {
  box-sizing: border-box;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":73,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789635},"returnTo":"/packs/20927149/subscribe"}' id='card-399789635'>
<div class='header'>
73
</div>
<div class='card-face question'>
<div class='question-content'>
# The Box Model

CSS box-sizing: border-box
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The value border-box of the box-sizing property for an element corresponds directly to the element’s total rendered size, including padding and border with the height and width properties.

The default value of the border-box property is content-box. The value border-box is recommended when it is necessary to resize the padding and border but not just the content. For instance, the value border-box calculates an element’s height as follows: height = content height + padding + border.

```
#box-example {
  box-sizing: border-box;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":74,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789686},"returnTo":"/packs/20927149/subscribe"}' id='card-399789686'>
<div class='header'>
74
</div>
<div class='card-face question'>
<div class='question-content'>
# Display and Positioning

CSS z-index property
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS z-index property specifies how far back or how far forward an element will appear on a web page when it overlaps other elements.

The z-index property uses integer values, which can be positive or negative values. The element with the highest z-index value will be at the foreground, while the element with the lowest z-index value will be at the back.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/789/686/a_image_thumb.?1665323477" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":75,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789760},"returnTo":"/packs/20927149/subscribe"}' id='card-399789760'>
<div class='header'>
75
</div>
<div class='card-face question'>
<div class='question-content'>
# Display and Positioning

Fixed CSS Positioning
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Positioning in CSS provides designers and developers options for positioning HTML elements on a web page. The CSS position can be set to static, relative, absolute or fixed. When the CSS position has a value of fixed, it is set/pinned to a specific spot on a page. The fixed element stays the same regardless of scrolling. The navigation bar is a great example of an element that is often set to position:fixed;, enabling the user to scroll through the web page and still access the navigation bar.
```
navbar {
postion : fixed;
 }
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":76,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399789812},"returnTo":"/packs/20927149/subscribe"}' id='card-399789812'>
<div class='header'>
76
</div>
<div class='card-face question'>
<div class='question-content'>
# Display and Positioning

CSS display property
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS display property determines the type of render block for an element. The most common values for this property are block, inline, and inline-block.

Block-level elements take up the full width of their container with line breaks before and after, and can have their height and width manually adjusted.

Inline elements take up as little space as possible, flow horizontally, and cannot have their width or height manually adjusted.

Inline-block elements can appear next to each other, and can have their width and height manually adjusted.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/789/812/a_image_thumb.?1665323540" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":77,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399790151},"returnTo":"/packs/20927149/subscribe"}' id='card-399790151'>
<div class='header'>
77
</div>
<div class='card-face question'>
<div class='question-content'>
# Display and Positioning

CSS position: absolute/relative
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The value absolute for the CSS property position enables an element to ignore sibling elements and instead be positioned relative to its closest parent element that is positioned with relative or absolute. The absolute value removes an element entirely from the document flow. By using the positioning attributes top, left, bottom and right, an element can be positioned anywhere as expected.

```
.element {
  position: absolute;
}
```

The value relative of the CSS position property enables an element to be positioned relative to where it would have originally been on a web page. The offset properties can be used to determine the actual position of the element relative to its original position. Without the offset properties, this declaration will have no effect on its positioning, it will act as the default value static of the position property.
```
.element {
  position: relative;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":78,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399795996},"returnTo":"/packs/20927149/subscribe"}' id='card-399795996'>
<div class='header'>
78
</div>
<div class='card-face question'>
<div class='question-content'>
# Display and Positioning

CSS float property
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS float property determines how far left or how far right an element should float within its parent element. The value left floats an element to the left side of its container and the value right floats an element to the right side of its container. For the property float, the width of the container must be specified or the element will assume the full width of its containing element.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/795/996/a_image_thumb.?1665326249" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":79,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399796136},"returnTo":"/packs/20927149/subscribe"}' id='card-399796136'>
<div class='header'>
79
</div>
<div class='card-face question'>
<div class='question-content'>
# Display and Positioning

The CSS clear property
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS clear property specifies how an element should behave when it bumps into another element within the same containing element.The clear is usually used in combination with elements having the CSS float property. This determines on which sides floating elements are allowed to float.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/796/136/a_image_thumb.?1665326324" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":80,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399796399},"returnTo":"/packs/20927149/subscribe"}' id='card-399796399'>
<div class='header'>
80
</div>
<div class='card-face question'>
<div class='question-content'>
# Typography

CSS font-weight Property
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS font-weight property declares how thick or thin should be the characters of a text. Numerical values can be used with this property to set the thickness of the text. The numeric scale range of this property is from 100 to 900 and accepts only multiples of 100. The default value is normal while the default numerical value is 400. Any value less than 400 will have text appear lighter than the default while any numerical value greater than the 400 will appear bolder.

In the given example, all the <p> elements will appear in a bolder font.

```
/* Sets the text as bolder. */
p {
  font-weight: 700;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":81,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399796440},"returnTo":"/packs/20927149/subscribe"}' id='card-399796440'>
<div class='header'>
81
</div>
<div class='card-face question'>
<div class='question-content'>
# Typography

CSS font-style property
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS font-style property determines the font style in which text will appear.

It accepts italic as a value to set the font style to italic.

```
.text {
  font-style: italic;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":82,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399796506},"returnTo":"/packs/20927149/subscribe"}' id='card-399796506'>
<div class='header'>
82
</div>
<div class='card-face question'>
<div class='question-content'>
# Typography

CSS @font-face rule
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS @font-face rule allows external fonts or font files to be imported directly into stylesheets.The location of the font file must be specified in the CSS rule so that the files can be loaded from that location. This rule also allows locally hosted fonts to be added using a relative file path instead of a web URL.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/796/506/a_image_thumb.?1665326491" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":83,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399796593},"returnTo":"/packs/20927149/subscribe"}' id='card-399796593'>
<div class='header'>
83
</div>
<div class='card-face question'>
<div class='question-content'>
# Typography

CSS Fallback Fonts
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS font-family property can have multiple fonts declared in order of preference. In this case the fonts following the initial font are known as the fallback fonts.

If the initial value of the property font-family fails to load to the webpage, the fallback fonts will be used.
</div>
<img class="card-image" src="https://s3.amazonaws.com/brainscape-prod/system/cm/399/796/593/a_image_thumb.?1665326523" />
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":84,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399796682},"returnTo":"/packs/20927149/subscribe"}' id='card-399796682'>
<div class='header'>
84
</div>
<div class='card-face question'>
<div class='question-content'>
# Typography

The CSS line-height property
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
The CSS line-height property declares the vertical spacing between lines of text. It accepts both unitless numbers as a ratio (eg. 2) and numbers specified by unit as values (eg. 12px) but it does not accept negative numbers. A unitless number is an absolute value that will compute the line height as a ratio to the font size and a unit number can be any valid CSS unit (eg. pixels, percents, ems, rems, etc.). To set the line-height of the <p> elements to 10px, the given CSS declaration can be used.

```
p {
line-height: 10px;
}
```
</div>
</div>
</div>

<div class='flashcard-row thin-card is-blurrable' data='{"aSoundUrl":null,"cardIsBlurrable":true,"number":85,"qSoundUrl":null,"resources":{"deckId":12033938,"packId":20927149,"cardId":399796720},"returnTo":"/packs/20927149/subscribe"}' id='card-399796720'>
<div class='header'>
85
</div>
<div class='card-face question'>
<div class='question-content'>
# Typography

CSS Linking fonts
</div>
</div>
<div class='card-face answer'>
<div class='answer-content'>
Linking fonts allow user to use web fonts in the document. They can be imported in an HTML document by using the <link> tag. Once the web font URL is placed within the href attribute, the imported font can then be used in CSS declaration.

```
<head>
  <link href="https://fonts.googleapis.com/css?family=Droid%20Serif" rel="stylesheet">
</head>
```
</div>
</div>
</div>

</div>
</div>
</div>
<div class='flashcards-sidebar'>
<div class='sidebar-header'>
<div class='react-component' id='flashcards-search-bar'>
<div class='placeholder market-search-bar' id='flashcards-search-bar-placeholder'></div>
</div>
</div>
<div class='sidebar-content'>
<p class='deck-subject-heading'>
<a class="decks-in-subject-link" href="/packs/web-development-20927149"><span class="pack-name">Web Development</span> (18 decks)
</a></p>
<ul class='deck-list-items'>
<a class='deck-link ' href='/flashcards/learn-php-11879800/packs/20927149'>
<li class='deck-list-item'>Learn Php</li>
</a>
<a class='deck-link ' href='/flashcards/building-interactive-javascript-websites-11880415/packs/20927149'>
<li class='deck-list-item'>Building Interactive JavaScript Websites</li>
</a>
<a class='deck-link ' href='/flashcards/redux-11896602/packs/20927149'>
<li class='deck-list-item'>Redux</li>
</a>
<a class='deck-link ' href='/flashcards/phaser-11906945/packs/20927149'>
<li class='deck-list-item'>Phaser</li>
</a>
<a class='deck-link ' href='/flashcards/express-11938142/packs/20927149'>
<li class='deck-list-item'>Express</li>
</a>
<a class='deck-link ' href='/flashcards/node-sqlite-11939572/packs/20927149'>
<li class='deck-list-item'>Node-SQLite</li>
</a>
<a class='deck-link ' href='/flashcards/react-testing-11948204/packs/20927149'>
<li class='deck-list-item'>React Testing</li>
</a>
<a class='deck-link ' href='/flashcards/react-11948232/packs/20927149'>
<li class='deck-list-item'>React</li>
</a>
<a class='deck-link ' href='/flashcards/learn-jquery-12032745/packs/20927149'>
<li class='deck-list-item'>Learn jQuery</li>
</a>
<a class='deck-link  selected' href='/flashcards/fe1-web-development-fundamentals-12033938/packs/20927149'>
<li class='deck-list-item'>FE1: Web Development Fundamentals</li>
</a>
<a class='deck-link ' href='/flashcards/fe2-improved-styling-with-css-12064881/packs/20927149'>
<li class='deck-list-item'>FE2: Improved Styling with CSS</li>
</a>
<a class='deck-link ' href='/flashcards/learn-javascript-unit-testing-12079753/packs/20927149'>
<li class='deck-list-item'>Learn JavaScript Unit Testing</li>
</a>
<a class='deck-link ' href='/flashcards/build-web-apps-with-aspnet-12079797/packs/20927149'>
<li class='deck-list-item'>Build Web Apps with ASP.NET</li>
</a>
<a class='deck-link ' href='/flashcards/architecture-12088052/packs/20927149'>
<li class='deck-list-item'>Architecture</li>
</a>
<a class='deck-link ' href='/flashcards/build-python-web-apps-with-flask-12088204/packs/20927149'>
<li class='deck-list-item'>Build Python Web Apps with Flask</li>
</a>
<a class='deck-link ' href='/flashcards/create-a-back-end-app-with-javascript-12122625/packs/20927149'>
<li class='deck-list-item'>Create a Back-End App with JavaScript</li>
</a>
<a class='deck-link ' href='/flashcards/leetcode-12179803/packs/20927149'>
<li class='deck-list-item'>Leetcode</li>
</a>
<a class='deck-link ' href='/flashcards/learn-sorting-algorithms-with-python-12216693/packs/20927149'>
<li class='deck-list-item'>Learn Sorting Algorithms with Python</li>
</a>
</ul>
</div>
</div>
</div>
<div id='tooltip-controller'></div>
<div data='{"packId":20927149,"source":"spaced-repetition-modal","subject":"Web Development","resources":{"deckId":12033938,"packId":20927149},"returnTo":"/packs/20927149/subscribe"}' id='spaced-repetition-modal-controller'></div>
<div id='banner-controller'></div>
<div id='dialog-modal-controller'></div>

<div class='band band-footer'>
<div class='footer-main'>
<ul class='sections'>
<li class='section key-links'>
<p class='section-heading'>
Key Links
</p>
<ul class='options-list'>
<li class='option'>
<a id="footer-pricing-link" class="option-link" href="/pricing?paywall=upgrade">Pricing</a>
</li>
<li class='option'>
<a class="option-link" href="/companies">Corporate Training</a>
</li>
<li class='option'>
<a class="option-link" href="/teachers">Teachers & Schools</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://itunes.apple.com/us/app/brainscape-smart-flashcards/id442415567?mt=8">iOS App</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="nofollow noopener noreferrer" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal">Android App</a>
</li>
<li class='option'>
<a class="option-link" target="_blank" rel="noopener" href="https://www.brainscape.com/faq">Help Center</a>
</li>
</ul>
</li>
<li class='section subjects'>
<p class='section-heading'>
Subjects
</p>
<ul class='options-list'>
<li class='option'>
<a class="option-link" href="/subjects/medical-nursing">Medical & Nursing</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects/law">Law Education</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects/foreign-languages">Foreign Languages</a>
</li>
<li class='option'>
<a class="option-link" href="/subjects-directory/a">All Subjects A-Z</a>
</li>
<li class='option certified-classes'>
<a class="option-link" href="/learn">All Certified Classes</a>
</li>
</ul>
</li>
<li class='section company'>
<p class='section-heading'>
Company
</p>
<ul class='options-list'>
<li class='option'>
<a class="option-link" href="/about">About Us</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" rel="nofollow noopener noreferrer" href="https://brainscape.zendesk.com/hc/en-us/articles/115002370011-Can-I-earn-money-from-my-flashcards-">Earn Money!</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://www.brainscape.com/academy">Academy</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://brainscapeshop.myspreadshop.com/all">Swag Shop</a>
</li>
<li class='option'>
<a target="_blank" rel="nofollow noopener" class="option-link" href="/contact">Contact</a>
</li>
<li class='option'>
<a target="_blank" rel="nofollow noopener" class="option-link" href="/terms">Terms</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="https://www.brainscape.com/academy/brainscape-podcasts/">Podcasts</a>
</li>
<li class='option'>
<a target="_blank" class="option-link" href="/careers">Careers</a>
</li>
</ul>
</li>
<li class='section find-us'>
<p class='section-heading'>
Find Us
</p>
<ul class='social-media-list'>
<li class='option twitter-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://twitter.com/Brainscape"><img data-src="/pks/images/shared/twitterx-af917e8b474ed7c95a19.svg" alt="twitter badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option linkedin-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.linkedin.com/company/brainscape/"><img data-src="/pks/images/shared/linkedin-2f15819658f768056cef.svg" alt="linkedin badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option facebook-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.facebook.com/Brainscape"><img data-src="/pks/images/shared/facebook-1598a44227eabc411188.svg" alt="facebook badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option youtube-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.youtube.com/c/BrainscapeNY"><img data-src="/pks/images/shared/youtube-7f2994b2dc1891582524.svg" alt="youtube badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option pinterest-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.pinterest.com/brainscape/"><img data-src="/pks/images/shared/pinterest-04f51aa292161075437b.svg" alt="pinterest badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option tiktok-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.tiktok.com/@brainscapeu"><img data-src="/pks/images/shared/tiktok-644cf4608bd73fbbb24f.svg" alt="tiktok badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
<li class='option insta-badge group'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://www.instagram.com/brainscape/"><img data-src="/pks/images/shared/insta-210cc2d059ae807961d2.svg" alt="insta badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="24" height="24" /></a>
</li>
</ul>
<div class='get-the-app'>
<div class='qr-code'>
<img data-src="https://www.brainscape.com/assets/cms/public-views/shared/shortio-from-homepage.png" alt="QR code" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="130" height="130" />
</div>
<div class='app-badges'>
<div class='badge apple-badge'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://apps.apple.com/us/app/brainscape-smart-flashcards/id442415567"><img data-src="/pks/images/shared/apple-badge-b6e4f380fb879821d601.svg" alt="apple badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a>
</div>
<div class='badge android-badge'>
<a rel="nofollow noopener noreferrer" target="_blank" class="option-link" href="https://play.google.com/store/apps/details?id=com.brainscape.mobile.portal&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img data-src="/pks/images/shared/android-badge-a2251833dc7f6ca8879c.svg" alt="android badge" class="lazy-load" src="/pks/images/shared/placeholder-2f8e0834f3c4456dc1cc.jpg" width="124" height="50" /></a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class='footer-blurb'>
Brainscape helps you reach your goals faster, through stronger study habits.
<br>
© 2025 Bold Learning Solutions. <a class="option-link" href="/terms">Terms and Conditions</a>
</div>
</div>

</body>
</html>