HTML & CSS Flashcards
What is the first thing that goes into every HTML document?
The DOCTYPE tag which looks like is the is in the first line of every HTML document.
What does HTML stand for?
Hyper Text Markup Language
What is a block-level element?
A block-level element always starts on a new line and takes up the full width available. Examples of block elements:
, # - ###### ,
,
What is an inline element?
an inline element does not start on a new line and only takes up as much width as necessary. Examples of inline elements: , ,
What would an example of a div block-level element look like?
## London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
What would an example of a span inline-level element look like?
My Important Heading
Do all html tags need to have a separate closing tag with it?
no, most do but there are some self closing tags as well.
and image tag usually consists of 3 parts, what are they and how would it look like in a proper HTML document?
image tags usually consists of the source attribute, the alternative text attribute and the width/height attributes. ex.
Attributes usually come in ____ pairs like:
name=”value”
What are the 3 types of lists, and what are their tags.
- An unordered list items use plain bullets.
- An ordered list will use different schemes of numbers to list your items. <dl> - A definition list arrages your items in the same way as they are arranged in a dictionary.</dl>
How do list items appear in a proper html document?
- list item1
- list item2
- list item3
*
in an unordered list type, what are the possible options to style your lists?
in an ordered list type, what are the possible options to style your lists?
- Default-Case Numerals.
- Upper-Case Numerals.
- Lower-Case Numerals.
- Upper-Case Letters.
- Lower-Case Letters.
How is a Description list built out in an HTML Document?
The
<dl> tag defines the description list, the <dt> tag defines the term (name), and the </dt>
<dd> tag describes each term;
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</dd>
</dl>
What would a nested list look like in an HTML Document?
- Coffee
- Tea
- Black Tea
- Green Tea
- Milk
1Footnote… ©Copyright tom 2017 How do you make that?
1Footnote…
©Copyright tom 2017
like that
How do you implement HTML character entities?
I will display €
I will display €
I will display €
like that
What is absolute position?
When you change position starting from the top left
What is relative position?
when you change the position starting from the default position
What is static position?
Staying in its default position
What do the left and right attributes do in css when dealing with absolute position?
top: 0px = all the way to the top bottom: 0px = all the way to the bottom right: 0px = all the way to the right left: 0px = all the way to the left
What do the left and right attributes do in css when dealing with relative position?
left: -20px; = is heading left: 0px; = This heading left: 20px = This heading
What is margin?
Margin is the distance between one element and the next.
What are the purposes of HTML, CSS, and JavaScript?
HTML is the structure of a website CSS is the styling & design of a website Javascript controls the dynamic behavior of a website
What does the Doctype do?
it tells use agents which version of HTML it’s going to be using.
What does the do?
it tells the browser what language is used
What does metadata do?
it helps search engines and other robots find and make sense of what your website is about.
What types of things go in the head section of an HTML document?
non visual content that go into making a page work
what is the
tag?
paragraph
What are the h1 - h6 tags?
header tags, to relay which sections are more important than others
what is the tag?
it is the bold tag, and is only used when you only want to have a visual change, when you want an overall importance change then you would use the tag
What are the building blocks of HTML pages?
Elements
How are elements represented?
what do HTML tags do?
HTML tags label pieces of content such as “heaeding”. “paragraph”. “table”… etc.
What does the element do?
it specifies a title for the document for the browser to recognize
How are tags used?
There needs to be an opening and closing tag in most cases, there are few tags that are self closing. e.g.
or
is the
tag block level or inline?
Defines a section in a document and is block level
is the tag block level or inline?
Defines a section in a document and is inline
how do you add a title to a link that shows when you hover over it?
How do you add an image to an HTML document?
tag, with the source file (src), alternative text (alt), width and height are provided as attributes. e.g.
What is an attribute?
Attributes provide additional information about an element.
Where are attributes located?
Attributes are always specified in the start tag
What would a usual attribute layout look like?
name=”value”
What is the src attribute?
the src attribute is the filename of the source and is used to locate an image to display.
What is the alt attribute?
The alt attribute specifies an alternative text to be used when an image cannot be displayed, whether it couldn’t be found, or is being read by a screen reader.
What must a list contain?
All lists must contain one or more list element.
What are the 3 types of lists?
an unordered list which uses bullet points
an ordered list which uses different number schemes <dl> a definition list which arranges your items in the same way as they are arranged in a dictionary?</dl>
How would a list generally look?
- ….
- ….
What attribute is used to style a list type?
The type attribute -
…….
How is a description list built out?
The
<dl> tag defines the description list, the <dt> tag defines the term (name), and the </dt>
<dd> tag describes each term. e.g.
<dl>
<dt>Coffee</dt>
<dd> - black hot drink</dd>
<dt>Milk</dt>
<dd> - white cold drink</dd>
</dl>
</dd>
</dl>
What is a nested list?
a list nested in another list. e.g - Coffee - Tea - black tea - green tea - Milk
How is a nested list build out?
- Coffee
- Tea
- Black Tea
- Green Tea
- Milk
How do you make a symbol thats small and higher like an exponent?
the tag is used to make a smaller higher symbol like an exponent. This would look like 3
How do you make a symbol thats small and lower like the 2 in H2O?
the tag is used to make a smaller lower symbol like the 2 of H2O. This would look like H2O
How do you display special characters that you can’t type on a keyboard or is already taken by the HTML commands?
special characters start with an ampersand or and symbol, are followed by the characters code, and ended with a semi colon. ¼ is the symbol used to show a quarter fraction
What does CSS mean?
Cascading Style Sheets
How does CSS save a lot of work?
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
What is the proper form of a CSS rule-set?
A CSS rule-set consists of a SELECTOR and a DECLARATION BLOCK. e.g. h1 - selector { color:blue; } - Declaration Color - Property Blue - Value
How does the element selector work?
The element selector selects elements based on the element name. e.g. you can select all
elements on a page by; p { text-align: center; }
What format is used to call upon an ID in CSS that is defined in an HTML document?
you use the # before the ID name. e.g.
would be pulled up in CSS using; #fool{ }
What format is used to call upon a Class in CSS that is defined in an HTML document?
you use the . before the Class name. e.g.
would be pulled up in CSS using; .fool{ }
How do you group selectors together in CSS?
You group them with a comma: e.g. h1, h2, p { }
Why would you group together selectors is CSS?
to save time and space, if multiple sections are going to have the same styling done to them, group them together.
What are the 3 ways to insert a style sheet?
External, Internal & Inline
How does an external Style Sheet work?
With an external style sheet, you can change the look of an entire website by changing just one file. Each page must include a reference to the external style sheet file inside the element, which goes inside the element.
How does an Internal Style Sheet work?
An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the element, inside the
section of an HTML page.
How do Inline Styles Work?
An inline style may be used to apply a unique style for a single element. This is done by adding the style attribute to the relevant element.
What is the priority order for inline, external and internal styles?
Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority: 1: Inline Style 2: External and Internal Style Sheets 3: Browser Default
What are the 5 CSS background properties?
- background-color - background-image - background-repeat - background-attachment - background-position
What are the 3 properties for a border?
Style, width & color
What is the box method?
The element is surrounded by padding, which is surrounded by an optional border which is surrounded by margin.
What do border properties allow you to specify in CSS?
Style, width and color.
What are the three ways to specify a color in CSS?
Color name, RGB value, and HEX code
When specifying values for margin or padding how are the values appropriated?
If there is one value given then that value is the same for top, right, left and bottom. If there are two values given the first one is for the top and bottom, and the second one is for the right and left. If all four are given then the order is top, right, bottom, left.
How do you select all elements in a DIV for a global CSS style change?
div *{} selects all elements inside the div to change properties for all at once.
What is the tag?
The emphasis tag is a phrase tag, it renders as emphasized text, looks like italicizing but has more backend operations like an reader bot emphasizing the word instead of it just being a visual change and not tonal.
What is the element used for?
it is used to color a part of a text. e.g.
My mother has eyes.
What is the float property mainly used for?
In its simplest use, the float property can be used to wrap text around images.
How do you make a list item a link?
How do you style a list in CSS?
ul{ list-style-type: none; }
How do you make a horizontal Navigation Bar?
you use inline items. e.g. li { display: inline; }
How would you adjust just the margin bottom value only?
margin-bottom: 0px;
What is an element?
an article element represents a group of related content that makes sense with the context of the page
What is a element?
The section element represents a group of related content that doesn’t necessarily need to make sense out of the context of the page.
What is a element?
The nav element is used to mark up a collection of links to external pages or sections within the current page.
What is an element?
The aside element is used to represent content that is tangibly related to the content surrounding it, but could be considered separate.
What is a element?
The header element will be associated with the nearest sectioning element, usually it’s direct parent in the page structure.
What is a element?
The footer element is used to represent information about a section such as the author, copyright information, or links to related web pages.
What is CSS?
CSS is a language that describes the style of an HTML document, or more in detail describes how HTML elements should be displayed.
How should the font-family property be used?
The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems. e.g. font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:11;width: 90%;
How is an image embeded into the header element?
How would you use a link to jump to a specific id?
If it’s on the same html page, Jump to Chapter 4
If it’s on a different page, Jump to Chapter 4
What is the default link text-decoration type?
underlined
How do you get rid of the underline on a link list-item?
text-decoration: none;
What is a pseudo class used for?
A Pseudo Class is used to define a special state of an element like the style of an element when a user hovers the mouse or to show visited and unvisited links differently.
What is the pseudo class code for controlling how a link looks when hovered.
a: hover {
color: hotpink;
text-decoration: underline;
}
How do the NAV CSS codes look?
How do you use a section id to quickly navigate the page?
How do you create list-style-images?
How do you use an image as a link?
What container holds the address?
An address container
How do you style the footer section?
How do you create boxes and responsive web pages?
How do you make boxes using div elements?
How do you put an image inside a boX?
What are the 5 layout properties in CSS?
position: static;
position: relative;
position: absolute;
Float and clear
How does position: static; act?
How does position: Absolute; act?
How does position: relative; act?
How are the float and clear CSS layout properties used?
Explain how the clear property works in CSS
How does the box model look?
What is a wild card and how is it used?
What is the CSS border-radius property?
What does the code look like when building out a website using the box method?
How do you add photos instead of bullet points in a list?
How is a table built in HTML and what tags are used?
How would a table look in HTML?
How do you add borders to your tables in HTML?
What is the border-collapse CSS property?
The border-collapse CSS property determines whether a table’s borders are separated or collapsed. In the separated model, adjacent cells each have their own distict borders. In the collapsed model adjacent table cells share borders. The separated model is the traditional HTML table border model.
How do you build table cells that span multiple columns?
How do you build table cells that span multiple rows?
How do you make a table caption in an HTML table?
How do you define a specific style to a specific HTML table?
How do you create row groups in an HTML table?
How do you create column groups in an HTML table?
What is the HTML
summary attribute?
What is the HTML
frame attribute?
What are table rules?
What are some ways you can format a table in CSS?
How do you define an HTML table width and height?
How do you position table captions?
What are the CSS multi-column properties?
What does the count property look like in CSS multi-column properties?
