HTML & CSS Flashcards
1
Q
What is the first thing that goes into every HTML document?
A
The DOCTYPE tag which looks like is the is in the first line of every HTML document.
2
Q
What does HTML stand for?
A
Hyper Text Markup Language
3
Q
What is a block-level element?
A
A block-level element always starts on a new line and takes up the full width available. Examples of block elements:
, # - ###### ,
,
4
Q
What is an inline element?
A
an inline element does not start on a new line and only takes up as much width as necessary. Examples of inline elements: , ,
5
Q
What would an example of a div block-level element look like?
A
## 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.
6
Q
What would an example of a span inline-level element look like?
A
My Important Heading
7
Q
Do all html tags need to have a separate closing tag with it?
A
no, most do but there are some self closing tags as well.
8
Q
and image tag usually consists of 3 parts, what are they and how would it look like in a proper HTML document?
A
image tags usually consists of the source attribute, the alternative text attribute and the width/height attributes. ex.
9
Q
Attributes usually come in ____ pairs like:
A
name=”value”
10
Q
What are the 3 types of lists, and what are their tags.
A
- 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>
11
Q
How do list items appear in a proper html document?
A
- list item1
- list item2
- list item3
*
12
Q
in an unordered list type, what are the possible options to style your lists?
A
13
Q
in an ordered list type, what are the possible options to style your lists?
A
- Default-Case Numerals.
- Upper-Case Numerals.
- Lower-Case Numerals.
- Upper-Case Letters.
- Lower-Case Letters.
14
Q
How is a Description list built out in an HTML Document?
A
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>
15
Q
What would a nested list look like in an HTML Document?
A
- Coffee
- Tea
- Black Tea
- Green Tea
- Milk
16
Q
1Footnote… ©Copyright tom 2017 How do you make that?
A
1Footnote…
©Copyright tom 2017
like that
17
Q
How do you implement HTML character entities?
A
I will display €
I will display €
I will display €
like that
18
Q
What is absolute position?
A
When you change position starting from the top left
19
Q
What is relative position?
A
when you change the position starting from the default position
20
Q
What is static position?
A
Staying in its default position
21
Q
What do the left and right attributes do in css when dealing with absolute position?
A
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
22
Q
What do the left and right attributes do in css when dealing with relative position?
A
left: -20px; = is heading left: 0px; = This heading left: 20px = This heading
23
Q
What is margin?
A
Margin is the distance between one element and the next.
24
Q
What are the purposes of HTML, CSS, and JavaScript?
A
HTML is the structure of a website CSS is the styling & design of a website Javascript controls the dynamic behavior of a website
25
What does the Doctype do?
it tells use agents which version of HTML it's going to be using.
26
What does the do?
it tells the browser what language is used
27
What does metadata do?
it helps search engines and other robots find and make sense of what your website is about.
28
What types of things go in the head section of an HTML document?
non visual content that go into making a page work
29
what is the
tag?
paragraph
30
What are the h1 - h6 tags?
header tags, to relay which sections are more important than others
31
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**
32
What are the building blocks of HTML pages?
Elements
33
How are elements represented?
34
what do HTML tags do?
HTML tags label pieces of content such as "heaeding". "paragraph". "table"... etc.
35
What does the element do?
it specifies a title for the document for the browser to recognize
36
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
![]()
37
is the
tag block level or inline?
Defines a section in a document and is block level
38
is the tag block level or inline?
Defines a section in a document and is inline
39
how do you add a link to an HTML document?
[This is a link](.......)
40
how do you add a title to a link that shows when you hover over it?
41
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. ![]()
42
What is an attribute?
Attributes provide additional information about an element.
43
Where are attributes located?
Attributes are always specified in the start tag
44
What would a usual attribute layout look like?
name="value"
45
What is the src attribute?
the src attribute is the filename of the source and is used to locate an image to display.
46
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.
47
What must a list contain?
All lists must contain one or more list element.
48
What are the 3 types of lists?
an unordered list which uses bullet points
an ordered list which uses different number schemes
- a definition list which arranges your items in the same way as they are arranged in a dictionary?
49
How would a list generally look?
* ....
* ....
50
What attribute is used to style a list type?
The type attribute -
.......
51
How is a description list built out?
The
- tag defines the description list, the
- tag defines the term (name), and the
- tag describes each term. e.g.
- Coffee
- - black hot drink
- Milk
- - white cold drink
52
What is a nested list?
a list nested in another list. e.g - Coffee - Tea - black tea - green tea - Milk
53
How is a nested list build out?
* Coffee
* Tea
* Black Tea
* Green Tea
* Milk
54
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
55
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
56
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
57
What does CSS mean?
Cascading Style Sheets
58
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.
59
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
60
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; }
61
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{ }
62
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{ }
63
How do you group selectors together in CSS?
You group them with a comma: e.g. h1, h2, p { }
64
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.
65
What are the 3 ways to insert a style sheet?
External, Internal & Inline
66
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.
67
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.
68
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.
69
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
70
What are the 5 CSS background properties?
- background-color - background-image - background-repeat - background-attachment - background-position
71
What are the 3 properties for a border?
Style, width & color
72
What is the box method?
The element is surrounded by padding, which is surrounded by an optional border which is surrounded by margin.
73
What do border properties allow you to specify in CSS?
Style, width and color.
74
What are the three ways to specify a color in CSS?
Color name, RGB value, and HEX code
75
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.
76
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.
77
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.
78
What is the element used for?
it is used to color a part of a text. e.g.
My mother has **eyes.**
79
What is the float property mainly used for?
In its simplest use, the float property can be used to wrap text around images.
80
How do you make a list item a link?
* [Title](......)
81
How do you style a list in CSS?
ul{ list-style-type: none; }
82
How do you make a horizontal Navigation Bar?
you use inline items. e.g. li { display: inline; }
83
How would you adjust just the margin bottom value only?
margin-bottom: 0px;
84
What is an element?
an article element represents a group of related content that makes sense with the context of the page
85
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.
86
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.
87
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.
88
What is a element?
The header element will be associated with the nearest sectioning element, usually it's direct parent in the page structure.
89
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.
90
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.
91
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%;
92
How is an image embeded into the header element?
93
How would you use a link to jump to a specific id?
If it's on the same html page, [Jump to Chapter 4](#c4)
If it's on a different page, [Jump to Chapter 4](html_demo.html#c4)
94
What is the default link text-decoration type?
underlined
95
How do you get rid of the underline on a link list-item?
text-decoration: none;
96
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.
97
What is the pseudo class code for controlling how a link looks when hovered.
a: hover {
color: hotpink;
text-decoration: underline;
}
98
How do the NAV CSS codes look?
99
How do you use a section id to quickly navigate the page?
100
How do you create list-style-images?
101
How do you use an image as a link?
102
What container holds the address?
An address container
103
How do you style the footer section?
104
How do you create boxes and responsive web pages?
105
How do you make boxes using div elements?
106
How do you put an image inside a boX?
107
What are the 5 layout properties in CSS?
position: static;
position: relative;
position: absolute;
Float and clear
108
How does position: static; act?
109
How does position: Absolute; act?
110
How does position: relative; act?
111
How are the float and clear CSS layout properties used?
112
Explain how the clear property works in CSS
113
How does the box model look?
114
What is a wild card and how is it used?
115
What is the CSS border-radius property?
116
What does the code look like when building out a website using the box method?
117
How do you add photos instead of bullet points in a list?
118
How is a table built in HTML and what tags are used?
119
How would a table look in HTML?
120
How do you add borders to your tables in HTML?
121
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.
122
How do you build table cells that span multiple columns?
123
How do you build table cells that span multiple rows?
124
How do you make a table caption in an HTML table?
125
How do you define a specific style to a specific HTML table?
126
How do you create row groups in an HTML table?
127
How do you create column groups in an HTML table?
128
What is the HTML
## Footnote
summary attribute?
129
What is the HTML
## Footnote
frame attribute?
130
What are table rules?
131
What are some ways you can format a table in CSS?
132
How do you define an HTML table width and height?
133
How do you position table captions?
134
What are the CSS multi-column properties?
135
What does the count property look like in CSS multi-column properties?
