chap 4+6

pseudo-element selector

, specified with two colon characters (::) followed by a pseudo-element, matches parts of elements. The pseudo-element selectors allow styles to apply to the first line or first letter of text of an element or to text that is selected by the user, or allow additional content to be inserted before or after an element.

first website

1991

yahoo created

1994

website number in 2001

30 mil

how many websites now

350 mil

style sheet

A language describing the visual presentation of structured documents.

Algorithm

A sequence of instructions that solves a problem is called an algorithm.

td { background-color: yellow; } what is it?

A tag name selector consists of the tag name without the opening and closing angle brackets < and >.

web browser

A web browser is a program that downloads an HTML document from a server, displays the document to the user with the appropriate formatting, and allows the user to interact with the document, such as clicking hyperlinks to access other documents. A web browser uses HTML to understand the structure and semantics, or meaning, of the document.

CSS (Cascading Style Sheets)

A web page without any styling will have a white background, black text, and standard-sized text. CSS is a language that can be used to style a web page via changes in colors, sizes, spacing, fonts, and more. CSS is short for Cascading Style Sheets. is a textual language for describing how a web page is styled for visual presentation. Web browsers use CSS to determine how a web page is rendered on the screen, printed to paper, or presented via other media. The CSS acronym highlights the two main characteristics of presenting a web page:

web server

A web server is a computer (or software running on a computer) that serves web pages to web browsers.

class attribute

An HTML tag's class attribute specifies the classes to which the tag belongs, with each class name separated by a space. Ex: <span class="highlight first"> has two classes, highlight and first. While HTML elements' ID names are unique, many elements may use the same HTML class name.

binary numbers

But computers can only represent two values (0 or 1), so use base two numbers, known as binary numbers ("bi" refers to two). Rather than each digit being a power of ten and holding 0-9, each digit is a power of two and holds 0 or 1.

origin of computers

Computers originated from telephone switches in the early 1900's. Engineers realized switches could be used for performing calculations, with a switch's on position meaning 1 and the off position 0. The first computers, built in the 1940s, had thousands of switches and occupied entire rooms. Early computers were largely used for military purposes, like codebreaking in World War II, and calculating the paths of bombs.

box model

HTML elements take up space on the webpage. The size of each element depends on the content and also the space around the content. The box model describes this space as nested boxes. The box model is useful and important to understand when considering design and layout. Content: The innermost box contains the content of the element, such as text and images. Padding: The padding box contains the content box and adds a transparent area around the content. Border: The border box contains the padded content and adds an optionally colored area around the padding. Margin: The margin box contains all three boxes and adds a transparent area around the border.

HyperText markup language (HTML)

HyperText markup language (HTML) is the standard markup language for web documents Hypertext is text that has links to other text (and today to images, videos, and more). Document markup is special markings in the document that provide additional information about links, formatting, and images. HTML also permits adding metadata like search engine keywords, author information, and language.

World Wide Web, or simply "the web".

In the early 1990s, Tim Berners-Lee was working at a Swiss research institute named CERN and developed a more convenient way for computers to communicate files over the Internet. 1.Text files, known as HTML files, containing links to other text files. 2.A program, known as a browser, for viewing HTML files. 3.A set of rules, known as the HTTP protocol, for transferring HTML files among computers.

Computational Thinking

In the information age, many people believe computational thinking, or creating a sequence of instructions to solve a problem, will become increasingly important for work, and even everyday life.

w3c

Short for World Wide Web Consortium. It is the international governing body for the development of platform independent web standards and specifications.

background properties

The background-color property specifies the background color. The background-image property specifies a background image. The background property is shorthand for setting several of the element's background properties at the same time.

Child Selector

The child selector, specified using a greater than character (>) between two selectors, matches any elements where the second element is a direct child of the first element. The child selector is similar to the descendant selector (space between selectors), but the matching child element in the child selector must be a direct descendant of the matching parent element.

color property

The color CSS property changes the color of the text. The value of the color property is specified by a color value. A color value is specified using a color name, RGB or RGBA values, hexadecimal values, or HSL or HSLA values. CSS also defines 140 color names, such as White, Blue, Black, Gray, ForestGreen, Magenta. Color names are not case sensitive, so DarkGray and darkgray are the same color. An RGB color value specifies a color using the rgb(red, green, blue) function by indicating the red, green, and blue intensities. Each intensity for red, green, and blue is between 0 and 255, where 0 is the lowest intensity and 255 is the highest. Ex: rgb(0, 0, 0) is black, rgb(0, 0, 255) is blue, rgb(255, 255, 0) is yellow, and rgb(255, 255, 255) is white. A hexadecimal color specifies a color using the #RRGGBB format by indicating the red, green, and blue intensities. Each intensity for red, green, and blue is between 00 and ff hexadecimal numbers, where 00 is the lowest intensity and ff is the highest. Ex: #000000 is black, #0000ff is blue, #ffff00 is yellow, and #ffffff is white. An HSL color value specifies a color using the hsl(hue, saturation, lightness) function by indicating the hue, saturation, and lightness values. The hue value ranges between 0 and 360, and the saturation and lightness values range between 0% and 100%. Ex: hsl(0, 0%, 0%) is black, hsl(120, 100%, 50%) is green, and hsl(0, 100%, 25%) is dark red. The HSL color specification method is harder to understand and is not used as frequently as the RGB and hexadecimal color specification methods. The RGB and HSL color values can add an alpha value to allow for transparency. The RGBA color value specifies a color using the rgba(red, green, blue, alpha) function by indicating the red, green, blue, and alpha intensities. The HSLA color value specifies a color using the hsla(hue, saturation,lightness, alpha) function by indicating the hue, saturation, lightness, and alpha intensities. The intensities have the same ranges as for RGB or HSL color values, but the alpha intensity is between 0 and 1. An alpha of 0 means fully transparent, 1 means fully opaque, and 0.5 means half transparent.

CSS has many ways to specify the selector. Five common selector types are:

The element selector matches elements with the specified element names. Ex: p { color: blue; } selects all p elements. The class name selector, specified with a period character followed by the class name, matches elements that have the specified class name. Ex: .notice { color: blue; } selects all elements with a notice class attribute. The ID name selector, specified with a hash character followed by the ID name, matches the element that has the specified ID. Ex: #byLine { color: blue; } selects the element with the byLine ID attribute. The descendant selector, specified with a selector followed by a space and another selector, matches elements that are contained in other elements. Ex: h2 em { color: blue; } selects em elements contained in h2 elements. The pseudo-class selector, specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation. Ex: :hover { color: blue; } selects elements under the mouse cursor

float property

The float CSS property specifies whether the element will float to the right or left of the element's parent, allowing text to flow around the element. The clear property moves an element down to avoid previously floated elements on the left, right, or both sides.

font properties

The font-family property specifies the font family, such as "Times New Roman" or serif. The font-size property changes the font size, such as 120%, small, or 12pt. The font-weight property specifies the font weight, such as normal or bold. The font-style property changes the text style, such as normal, italic, or oblique. The font-variant property specifies the variant of the text, such as normal or small-caps. The font property is shorthand for setting several of the element's font properties at the same time.

multiple selector

The multiple selector, specified using a comma (,) to separate selectors, matches all listed elements to apply a style rule. Ex: The figure below shows two CSS examples that apply the same styles to ol and ul elements.

Moore's Law

The number of transistors per square inch on an integrated chip doubles every 18 months

padding, border, and margin

The padding, border, and margin CSS properties control the padding, border, and margin boxes. The padding and margin boxes are transparent, so the CSS padding and margin properties specify only the thickness. The border box can be colored and styled, so the CSS border property specifies the thickness, style, and color.

cascading

The process of combining multiple style rules and resolving conflicts between those rules.

universal selector

The universal selector, specified using an asterisk character (*), matches all elements in the web page. The universal selector is implied when a tag name is not specified. Ex: the CSS selectors .highlight and *.highlight match exactly the same elements, where the universal selector is implied in .highlight and explicit in *.highlight.

computer chip

a small piece of semi-conducting material, usually silicon, on which integrated circuits are etched

h1 + p

adjacent sibling selector The adjacent sibling selector consists of a selector, the plus character (+), and another selector. h1 + p matches the first p element following an h1 element, where the p and h1 elements are siblings.

FTP (File Transfer Protocol) was

an early way for transferring files over the Internet. Users used FTP programs to connect to servers, look at listings of available documents, and download documents of interest.

Combinators

are CSS selectors that match specific relationships between other selectors. The descendant, child, adjacent sibling, and general sibling selectors are all combinators.

sibling elements

are elements that share the same parent element

The Internet began as

as four networked computers in 1969 but is today the largest and most popular computer network, spanning the entire globe. Early versions of the Internet looked and acted similar to today, but in a much simpler way.

p > img

child selector p > img matches any img element that is contained directly inside a p element.

.hidden { background-color: yellow; } what is it

class name Selects all elements with hidden class attribute.

Common CSS Properties

color: The color property changes the color of the element's content. background: The background properties changes the element's background to display as a solid color, slightly or fully transparent, a color gradient, or an image. font: The font properties changes the text's font name, size, weight, style, and variant. float, clear: The float property allows an element to float to the left or right so that text wraps around the element, while the clear property moves the element below any previous floating elements. text-align: The text-align property allows text to display left-aligned, right-aligned, centered, or justified. display: The display property controls the layout of the element on a web page, such as displaying as an inline element, a block element, or hiding the element.

CSS Rule

consists of a selector, an opening curly brace ({), a declaration block, and then a closing curly brace (}). A CSS selector specifies the HTML elements to which the specific style rule apply. A declaration block contains one or more declarations separated by semicolons (;). A CSS styling declaration indicates what value is assigned to a styling property. Each declaration in the declaration block is applied to all elements matching the selector and consists of a styling property, a colon (:), and then the value for the property.

computer program

consists of instructions that a computer executes (or runs), like multiplying numbers or printing a number to a screen.

td img { background-color: yellow; } what is it

descendent Select img elements that are descendants of td elements.

IEC prefixes

exist like kibi (210 or 1024), mebi (220 or 1,048,576), gibi (230 or 1,073,741,824), and tebi (240 or 1,099,511,627,776). In gibi, the gi refers to the metric prefix giga, and the bi to "binary". A gibi is abbreviated Gi, as in 1 Gib for 1 Gibibit. Likewise for other IEC prefixes.

The information age has covered about 100 years. t or f

false The information age is more recent, going back just a few decades.

p { background-color = blue; } v or in?

in A rule declaration uses the colon to separate the property from the value.

embedded computer

is a computer inside another electrical device, like inside a TV, car, printer, thermostat, satellite, etc. Thus, beyond business and personal computing devices like PCs, tablets, and smartphones, computers exist invisibly in nearly anything electrical today too.

ASCII (American Standard Code for Information Interchange)

is a popular code for characters. Ex: Using ASCII, the letter Z would be stored in a computer as 1011010 (shown below as 101 1010; the space is just for readability in this material).

Unicode

is another character encoding standard, published in 1991, whose codes can have more bits than ASCII and thus can represent over 100,000 items, such as symbols and non-English characters.

information age

just began in the 1990's, with human activity shifting from traditional industry to creating/managing/using computerized information

<ol class="numbers"> <li id="first">First number</li> <li id="second">Second number</li> <li id="third">Third number</li> </ol> <ul class="bullets"> <li>A <span class="bullet">bullet</span></li> <li>Another <span class="bullet">bullet</span></li> <li>Last <span class="bullet">bullet</span></li> </ul> what CSS selector matches all the li elements? What CSS selector matches the numbers class attribute? What CSS selector matches the span elements contained in ul elements?

li .numbers ul span

<p>James Bond is known to drive the <span class="mfg">Aston Martin</span> DB5. Below are a few cars James Bond has driven in recent Bond films according to <a href="https://en.wikipedia.org/wiki/List_of_James_Bond_vehicles">Wikipedia</a>.</p> <ol> <li><cite>Casino Royale</cite> (2006) <ul> <li><span class="mfg">Bentley</span> 4.5 Litre</li> <li><span class="mfg">Aston Martin</span> DB5</li> </ul> </li> <li><cite>Quantum of Solace</cite> (2008) <ul> <li><span class="mfg">Aston Martin</span> DBS V12</li> </ul> </li> <li><cite>Skyfall</cite> (2012) <ul> <li><span class="mfg">Jaguar</span> XJ (X351)</li> <li><span class="mfg">Mercedes</span> S400</li> <li><span class="mfg">Aston Martin</span> DB5</li> </ul> </li> <li><cite>Spectre</cite> (2015) <ul> <li><span class="mfg">Aston Martin</span> DB10</li> </ul> </li> </ol> What CSS selector matches all list items? What selector matches list items of ordered lists but not unordered lists? What selector matches all elements with the mfg class attribute? What selector matches ordered and unordered lists? What selector matches cite, span, and a elements?

li ol>li *.mfg ol,ul cite,span,a

li ~ img

li ~ img matches any img elements that follow an li element, where the li and img elements are siblings.

Will "text" in the first li element appear highlighted? <ol> <li>The <span>text</span> is highlighted.</li> <li>The text is not highlighted.</li> </ol>

no The span element in is not contained in a p element, so the span element is not a descendant, and the selector does not match.

Will "text" appear highlighted? <span><p>text</p></span>

no The span element is outside the p element, so the span element is not a descendant, and the selector does not match.

<p style="color:green">George Washington was president from 1789 until 1797.</p> will there be blue text?

no The paragraph has a style rule specifying the paragraph should use the color green, so the paragraph's more specific rule overrides the general rule about paragraphs.

<html> <head> <title>White House History</title> <style> body { color: black; } p { color: blue; } </style> <body> <p>George Washington never lived in the White House because construction was completed after he retired from the presidency.</p> </body> Will the paragraph be displayed using black text?

no The paragraph's rule overrides the general rule inherited from the <body> parent element, so the paragraph is displayed in blue.

attribute selector

pecified with an attribute name and optional value comparison enclosed in square brackets ([ and ]), matches elements with the specified attribute or the specified attribute and value. Ex: a[target] selector matches anchor elements with a target attribute specified. The attribute selector can be more specific by matching elements with attributes having a specific value. Ex: a[target="_blank"] attribute selector matches anchor elements with a target attribute value of _blank.

text align

property changes the horizontal alignment of text for an element. Text is left aligned using the value left, right aligned with right, center aligned with center, or fully justified with justify. Spaces in justified text are stretched so each line of wrapped text fills the element. The text-align property also affects children elements that are inlined, such as img or a elements.

display

property controls the layout of the element on a web page. Values for the display property include: inline displays the element as an inline element, like span or a elements. block displays the element as a block element, like p, h1, or div elements. none hides the element from being displayed, like style elements. inline-block displays the contents of the element as a block element, but formats the element as an inline element. list-item displays the contents of the element as a list item element.

web page

s a document that is viewed in a web browser. A collection of related web pages are organized into a website and stored on a web server.

adjacent sibling selector

specified using a plus character (+) between two selectors, matches an element that immediately follows another element, where both elements have the same parent Ex: The adjacent selector h1 + p in the figure below matches the first paragraph immediately following the h1 header element, where both the paragraph and heading are siblings on the section element.

general sibling selector

specified using a tilde character (~) between two selectors, matches the second element if the second element occurs after the first element and both elements are siblings. Any number of other elements can be placed between two general sibling elements.

industrial age

starting in the late 1700's transformed civilization towards manufacturing goods, leading to mass migration to cities, creation of strong nations, world wars, doubling of lifespans and thus dramatic world population growth

The industrial age has led to steep population growth. t or f

true

An embedded computer is a computer inside a personal computer such as a desktop or laptop. t or f

true An embedded computer is a computer inside another device. Typically, these devices have a dedicated function such as a coffee maker or washing machine. =

*.hide

universal selector The universal selector uses an asterisk (*) to match any tag name.

h1 { color: black; } v or in ?

v The CSS has a selector (h1), an opening brace, a rule declaration, and a closing brace.

span { font-weight: bold; font-size: 2em; } v or in?

v While a single line may contain multiple rules, good practice is to place each declaration on a separate line.

div { font-family: serif } v or in?

v While the last rule declaration of a block does not require a trailing semicolon, good practice is to add a semicolon to each rule.

Will "text" appear highlighted? <p>The <span>text</span> is highlighted.</p>

yes The descendant selector matches the span element contained in the p element, so "text" will appear highlighted.

Will "text" appear highlighted? <p><em><span>text</span></em></p>

yes The span element is a descendant of a p element. The descendant selector selects any descendant, not just immediate descendants.

<html> <head> <title>White House History</title> <style> body { color: black; } </style> <body> <p>George Washington never lived in the White House construction was completed several years after he retired from the presidency.</p> </body> Will the paragraph be displayed using black text?

yes A general style rule for paragraphs does not exist, and the paragraph does not have any specific rules. So the paragraph is displayed according to the style rules inherited from the paragraph's parent element, the <body>.

Will "text" appear highlighted in both span elements? <p> <span>text</span> <span><em>text</em></span> </p>

yes Both "text" strings are within a span element, which is in a p element.

<p>George Washington was the first president of the United States.</p> Will the paragraph be displayed using blue text?

yes The paragraph does not have a style rule, so the paragraph is displayed using the general rule.