Flashcards from HTML and CSS lesson
em
A relative value that changes in proportion to the size of the parent element.
What are the functions of div elements
The <div> groups elements together. It makes the HTML file easier to read by organizing the web page into logical section
What does div represent
div: used to organize HTML elements into different groups, which can be given a class attribute: <div class="main"> <h2>Subheading!</h2> </div> metadata tag
What do the h elements indicate?
h1 - h6: indicate text headings on a webpage. h1 is the largest heading; h6 is the smallest. <h1>Heading</h1>
what's a code for hsl colors
h1 { color: hsl(182, 20%, 50%); }
What is a rule
rule: a list of CSS instructions for how to style a specific HTML element or group of HTML elements.
What is the <link> element
element to link the HTML and CSS files together.
in this hexadecimal number which values respond to which colors #09AA34
#09 = refers to the value for red. AA = refers to the value for green. 34= refers to the value for blue.
How many named colors are there in css
147
How many RGB colors are there?
16,777,216
How many hexadecimal colors are there?
16,777,216
What is a mark up language
A markup language is a computer language that defines the structure and presentation of raw text. Markup languages work by surrounding raw text with information the computer can interpret, "marking it up" for processing
How many times can an id attribute be used
An id attribute can only be used once because the id is unique to the element it is assigned to.
What are the two parts of the attributes?
Attributes are made up of the following two parts: The name of the attribute. The value of the attribute.
How do you form a class selector
Class selectors begin with a period (.) and are immediately followed by the name of the class. In the example above, all elements with a class of science will have their typeface, color, and letter case modified.
What is the use of an CSS link element
The HTML link element links a CSS file to an HTML file so that CSS styling can be applied. Here's an example of the link element: <link rel="stylesheet" type="text/css" href="main.css"/>
rule:
a list of CSS instructions for how to style a specific HTML element or group of HTML elements.
CSS code can be written in an HTML file with which of the following tags?
<style>
What are the two types of typeface commonly used in excel
Serif and Sans Serif
What does the type: element stand for
Specifies the type of file linked to.
What is the CSS background image property
sets a background image of your choice for a given selector, as seen below.
Selector
specifies exactly which HTML elements to style. Here h1 is the selector.
What's wrong with large amounts of text in your paragraph section from a web developer standpoint
that large amounts of text in paragraph format can overwhelm web page visitors. For example, if multiple paragraphs on your web page each contain large amounts of text, your web page could become difficult to consume.
Lightness
the amount of white in a given color. Similar to saturation, lightness is specified using a percentage between 0% and 100%. The percentage 0% represents black, whereas 100% represents white. 50% is normal.
Opening tag
the first, or opening, HTML tag used to start an HTML element.
Sans-Serif
the letters in these fonts do not have extra details on the ends of each letter. Instead, letters have straight, flat edges. Some examples include Arial or Helvetica.
percentages %
Percentages are also a relative unit of measurement. The default size of text in web browsers is 16 pixels, or 16px. When percentages are used, they set the size of text relative to this default size. For example, setting the font size to 200% would be equivalent to setting it to 32px.
Whats a definition in CSS
Properties are defined within selectors by defining a property and a value. They are separated with a colon and delineated with a semi-colon.
The section element
Section elements, like divs, can be used to organize webpage content into thematic groups. <section class="contact-form"> <h2>Contact Us</h2> <form> ... </form> </section>
pixel (px)
Standard unit of measurement for sizing fonts and other HTML elements.
Defining properties
Syntax selector { property: value; } h1 { color: blue; }
Why would adding comments be helpful
They help you (and others) understand your code if you decide to come back and review it at a much later date. They allow you to experiment with new code, without having to delete old code.
What is the class element
To label an element with a class, we can use the class attribute on an HTML element.
background-color
this property styles an element's background color.
When should the alt app not be used?
: If the image on the web page is not one that conveys any meaningful information to a user (visually impaired or otherwise), the alt attribute should not be used.
What are attributes
Attributes provide even more information about an element's content. They live directly inside of the opening tag of an element.
Why are classes and ids important
Classes and IDs are useful for labeling elements, but a disorganized, overuse of classes and IDs can result in an HTML file that is difficult to read. We need a way of organizing the contents of the HTML file. This will help:
RGB (Red, Green, Blue) colors
Color created by three numbers representing red, green, and blue. When mixed together, the three values create a specific color. For example: purple can be represented as rgb(128,0,128)
Foreground color
Color is the color that an element appears in. For example, when a heading is styled to appear green, the foreground color of the heading has been styled.
What are comments in like CSS
Comments in CSS are signified by a forward-slash and asterisk. /* This is a single line comment */ /* This is a multi-line comment */
Why are divs crucial to web development
Divs are one of the most commonly used HTML elements. Understanding how they are used is a critical skill for web developers
Figure element
Figure elements can be used to display visual content, such as photos, illustrations, diagrams or code snippets. <figure class="gallery-item"> <img src="image-1.png"> </figure> <figure class="gallery-item"> <img src="image-2.png"> </figure>
What are hue colors
HSL stands for Hue, Saturation, and Lightness.
Why are html and css kept separate
HTML and CSS are kept in separate files in order to keep code maintainable and readable, as well as keep structure separate from styling.
HTML element (or simply, element) -
HTML code that lives inside of angle brackets.
Tell me something about class names
HTML elements are often labeled with class names that reflect the content they represent on the web page. In the example above, perhaps a news company decided that all news headlines about science should be labeled with a class of science.
What are some of the functions of the alt attribute
HTML helps support visually impaired users with the alt attribute.
Hexadecimal color (#RRGGBB):
Hexadecimal values that represent mixtures of red, green and blue. For example, red can be expressed with the hexadecimal value of #FF0000: the value ff represents red, 00 represents green, and 00 represents blue.
What are some of the limits of of ID elements
IDs are great for labeling unique elements, but IDs have a limitation. Because unique IDs should not be used across multiple HTML elements, they are insufficient for quickly styling elements that should all share a specific style.
Some general rules and principles about ids
Ids have greater specificity than classes. If an HTML element is using both id and class attributes, the CSS rule for the id will take precedence over that of the class.
Angle brackets
In HTML, the characters < and > are known as angle brackets.
Is there a difference between RGB values and hex color codes?
Not really. RGB values and hex color codes are different ways to represent the same thing: color. It's possible to convert back and forth between RGB values and hex color codes (color pickers often help with this conversion).
CSS follows certain best practices for spacing and indentation:
One line of spacing between a selector and the opening curly brace. No spacing between CSS declarations and the opening and closing curly braces of the CSS rule. Two spaces of indentation for CSS declarations. One line of spacing between CSS rules.
What does the -href element stand for
Provides the URL of the file being linked to.
<head> element.
The <head> element will contain information about the page that isn't displayed directly on the actual web page (you'll see an example in the next exercise).
What is the <style> element
The <style> element allows you to write CSS code within an HTML file.
Which organization is responsible for maintaining the standards of html
The World Wide Web Consortium (W3C)
The footer element
The footer element is typically found at the bottom or foot of a webpage. It can contain copyright information, links to social media and additional site navigation items. <footer> <p>© Acme Granola Corporation 2016<p> <div class="social"> <a href="#"><img src="instagram-icon.png"></a> <a href="#"><img src="facebook-icon.png"></a> <a href="#"><img src="twitter-icon.png"></a> </div> </footer>
Color can affect the following design aspects:
The foreground color The background color
The header element
The header element can be used to group together introductory elements on a website, such as a company logo, navigation items, and sometimes, a search form. <header> <img src="company-logo.png"> <nav> <p><a href="login.html">Log In</a></p> <p><a href="signup.html">Sign Up</a></p> <p><a href="contact.html">Contact Us</a></p> </nav> </header>
What is opacity
The measure of how opaque a color is
The nav element
The nav element is used for the part of a website that links to other pages on the site. The links can be organized a number of ways. Below, the links are displayed within paragraph elements. An unordered list could also be used. <nav> <p><a href="login.html">Log In</a></p> <p><a href="signup.html">Sign Up</a></p> <p><a href="contact.html">Contact Us</a></p> </nav>
Why is font size important for CSS
The size of text has an impact on how users experience a website. The font-size property sets the size of an HTML element's text.
A stylesheet will not affect HTML code unless which of the following occurs?
The stylesheet is linked to the HTML page using a <link> tag
What is the target attribute?
The target attribute specifies that a link should open in a new window. Why is it beneficial to open links in a new window?
Why are there so many redundant color declarations
Using redundant declarations allow you to support as many users as possible across multiple versions of different Internet browsers.
What is the line-height element
When the line-height property of an element is modified, the leading is increased, resulting in an increase of the vertical spacing between lines of text.
What is the font weight
a property that turns bold on and off
What do the a elements represent
a: short for anchor and used to add links to other webpages. Anchor elements typically have an href attribute: <a href="http://codecademy.com">Click here</a> to learn how to make a website!
What is the alpha value
alpha value. It represents the opacity of a color. The alpha value can be a number between 0 or 1, inclusive.
What is background color
background appears yellow, the background color of the heading has been styled
what does css stand for?
css: stands for cascading style sheets, and is used to style HTML elements.
Defining Multiple Properties
h1 { font-size: 24px; font-weight: bold; border: 1px solid black; color: pink; } /* This will make all <h1> headers big, bold, pink, and inside of a thin black rectangle! */
what is the <rel< attribute
his attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.
What does html stand for?
html: stands for hypertext markup language, and is used to give a webpage structure.
what do the img
img: used to add an image to a webpage. Image elements are self-closing and do not require a closing tag: <img src="https://images.com/favorite.png">
How can you use html to turn any element into a link
link by wrapping that element with an anchor element. With this technique, it's possible to turn images into links by simply wrapping the <img> element with an <a> element. <a
Properties and Values
located inside the { } brackets, properties and values specify what aspect of the selector to style. In the diagram's example, the color property is set to red, which will display all h1 elements in red.
What do the p elements represent
p: used for non-heading text, such as the bodies of articles or company descriptions. <p>Description of company here.</p>
What are the properties and values
properties and values: located inside the { } brackets, properties and values specify what aspect of the selector to style. In the diagram's example, the color property is set to red, which will display all h1 elements in red.
What does a selector do?
selector: specifies exactly which HTML elements to style. Here h1 is the selecto
Saturation
the amount of gray in a given color. In HSL, saturation is specified using a percentage between 0% and 100%. The percentage 0% represents a shade of gray, whereas 100% represents full saturation.
Serif
the letters in these fonts have extra details on the ends of each letter. Examples include fonts like Times New Roman or Georgia, among others.
Closing tag
the second, or closing, HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them.
Hue
the technical term that describes what we understand as "color." In HSL, hue is represented on a color wheel. It can take on values between 0 and 360.
what is the <type> element
this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
color
this property styles an element's foreground color.
what are unordered list
unordered list: used to create lists on a webpage and requires li elements inside a ul: <ul> <li>list item</li> <li>another item</li> <li>yet another</li> </ul>
How do you control the size of the background image
use the property background-size as seen below:
parent/child elements:
used to describe HTML elements that enclose or are enclosed by other elements. For example, below the ul is the parent and the li items are children: <ul> <li>...</li> <li>...</li> <li>...</li> </ul>
What is a boiler plate code
used to describe the basic HTML code required to begin creating a web page. Without all of the elements in the boilerplate code, you'll risk starting without the minimum requirements considered to be best practice.
what does rel: stand for in a link element
-rel: Specifies the relationship between the current file and the file being linked to: in this case, the rel attribute is "stylesheet"
ems
Pronounced just as it looks, "em." An em is equal to the width of the letter "m". Ems are a relative unit of measurement. They change the size of text relative to the parent element's size of text.
rem
Represents the default font size for the web browser. Rems can be used to ensure that HTML elements scale in proportion to each other on various web browsers and screen sizes. On most web browsers, 1rem is equivalent to 16px, 2rem is equivalent to 32px (a doubling), 3rem is equivalent to 48px (a tripling) and so on.
What does px represent in html language
Represents the unit of pixels. The display of a computer monitor can be measured in pixels. A pixel is a small point on the display. How small? Most computer monitors have a resolution of 72 pixels per inch, so a pixel represents about 1/72nd of an inch. Pixels are sometimes also referred to as points. Pixels are used to set the exact size of an element, in this case, text.
Which of the following two constitute a CSS rule?
Selector and one or more declarations
CSS declarations must terminate with which of the following characters?
Semicolon ;
what does video represent
video: used to add videos to a webpage, and uses multiple attributes and a nested source element: <video width="320" height="240" controls> <source src="https://movies.io/great-clip.mp4" type="video/mp4"> </video>
