HTML Flashcards
1
Q
how to add style with CSS
A
“Style Tags”
h1 {
color: blue;
}
2
Q
CSS Selector
A
the HTML element that you want the style to be applied to (the h1 in the example below)
h1 {
color: blue;
}
3
Q
CSS Property
A
color in the example below:
h1 {
color: blue;
}
4
Q
HTML Headline element
A
<h1></h1>
5
Q
what every webpage needs to start with this
A
document type
(This is an example of telling the browser to interpret this doc as an html document)
should always be at the top and there shouldn’t ever have a space before it
6
Q
HTML tags
A
this is what placed right after the doctype and serves as the “root”
7
Q
what is contained in the head tags?
A
meta information invisible to the users and CSS
8
Q
character set
A
9
Q
what is an HTML attribute and attribute format
A
information provided to the browser, invisible to the user
word=””
10
Q
html entity for copyright symbol
A
©
11
Q
header
A
The header element helps to structure the content. This is different from the head element, which is just for document metadata.
12
Q
section
A
Sections break up logical groupings of information, just like sections of a newspaper.
13
Q
footer
A
The footer element is a complement to the header element. It represents the bottom of a content area.
14
Q
<h2></h2>
A
The second level headline element, similar to first level headlines. Typically these appear slightly smaller by default.
15
Q
<p></p>
A
The paragraph element should contain text in sentence or paragraph form.
16
Q
<a></a>
A
The anchor element allows for two HTML pages to be linked together.
<a href="index.html">
<h1>Brent Colson</h1>
<h2>Tennis Player</h2>
</a>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Notice the two locations the anchor tag is used
17
Q
A
The navigation element is a semantic element that wraps any type of site navigation. It doesnt add anything to the page - it really just organizes the structure
18
Q
<ul></ul>
A
The unordered list element contains list item elements and is typically styled with bullet points by default.
19
Q
<li>
</li>
A
The list item element makes it possible to format text in a list form. Each list item element should go inside of an ordered or unordered list element.
20
Q
Relative Path
A
Describes the location of a file using a partial file path that’s based on the location of the original file relative to the file that’s being referenced.
21
Q
Absolute Path
A
Describes the location of a file using the full file path.
22
Q
<img></img>
A
The image element is a self closing element with two required attributes. The source (src) attribute points to the image file and the alternate (alt) attribute describes the image using text (for a screen reader for example). An example when an image is a list item:
<ul>
<li><img></img></li>
</ul>
23
Q
A
The link element connects other files to an HTML document, such as CSS or JavaScript files. It is self closing tag.
note: the rel (relationship) is the type of file you are linking to
24
Q
CSS
A
Cascading Style Sheets, the computer code that defines the visual presentation of web pages.
25
Rule
The entirety of a CSS selector and its declarations.
26
Selector
CSS syntax that defines elements on a page to which declarations should be applied.
27
Declaration
Pairs of CSS properties and values that define how an element should be styled.
28
Property
CSS syntax that defines which part of an element should be styled, such as its color, size, position, and so on.
29
Value
CSS syntax that sets the variable units for properties.
30
CSS stylesheet
The style element can contain CSS code that will be applied to the HTML. Typically it's better to keep CSS in an external stylesheet.
31
Type or element Selector
Also known as an "element selector" this CSS selector that isolates all the elements of a given type.
nav {
background-color: orange;
color: white;
}
Nav is the element selector
32
Descendent Selector
CSS selector that selects all the elements of a given type that are nested inside another type of element.
nav a {
background-color: orange;
color: white;
}
note that the "a" specifies the "anchor element" within the nav element
33
color
Sets the text color of an element. Accepts any CSS color unit.
34
background-color
Sets the background color of an element. Accepts any CSS color unit.
35
groups together sections of the website
the id in the div element allows you to name the div that can be referenced in the CSS
36
how to reference a custom div in CSS (use
as an example)
```
#wrapper {
max-width: 940px;
margin: 0 auto;
}
```
37
max-width
Sets the maximum width of an element. Accepts any CSS length unit. related to "width" but max-width is better for responsive
max-width: 940px;
38
margin (with 2 numbers)
Sets the space around the exterior four sides of an element. Accepts any CSS length unit.
margin: 0 auto;
```
first number is how much margin there will be on top and bottom of element
second number (auto in this case) - is the amount of spacing on the left and right. auto just uses whatever remaining space and splits it so it is the same on the left and right
```
If it is just - margin: 0; - then it will apply that margin to all sides of the element
39
padding
Sets the space on the interior four sides of an element. Accepts any CSS length unit.
padding: 0 5%;
```
first number is how much padding there will be on top and bottom of element
second number (5%) - is the amount of spacing on the left and right
```
40
Hexadecimal
A base-16 number system that uses the letters "A" through "F" to represent the numerals 10 through 15.
Order is:
RED GREEN BLUE
41
Pseudo-Class
Dynamic selectors that change based on user interaction with the browser, such as hovering over a link, for example
nav a, nav a:visited {
color: #fff;
}
the first nav a represents only the anchor (a) tags inside a nav tag. the nav a:visited represents the state that the link is in (so in this case, both the clicked and unlicked version of the link will be white
42
Hexadecimal shorthand
color: #fff;
| this uses the each letter twice for each of the colors
43
difference between a class and an id
you can have multiple classes on a page but you can only have one ID on a single page
44
how to select a class in CSS to declare a rule
element.class
example: nav a.selected
or
.selected
45
Class Selector
Selects any HTML element that contains a matching class attribute
example:
Portfolio
46
hover
state of a link in CSS when you hover over it with your mouse
example: nav a:hover
47
visited
nav a:visited
48
Comment
A reminder or visual cue in computer code that's meant to be readable by programmers. Comments are typically not interpreted by the browser and shouldn't impact a website's function in any way.
format: /* comment here */
/*******************************
HEADING
*******************************/
#logo {
text-align: center;
margin: 0;
}
/*******************************
COLORS
*******************************/
```
/* site body */
body {
background-color: #fff;
color: #999;
}
```
in the above, you see general categories, as well as single sections. You should have 3 lines between the bottom of one sections and then next general categories
49
font-family
Defines which fonts should be applied to text.
50
font-size
Sets the size of text in either relative or absolute units.
51
Google Fonts
A 3rd party font service from Google that provides a large library of fonts that are legitmately licensed. All of the fonts are available for free.
52
how to add Google Fonts to your webpage
link it to your HTML BELOW normalize, but ABOVE main
Brent Colson | Tennis Player
53
adding font in CSS
font-family: 'Changa One', cursive;
note the ' ' (not " ") around the font. after the comma (cursive in this case) is the fallback font to be used if google fonts is down
54
em
relative sizing for fonts. 1em is equal to the default browser size (16 px)
example: font-size: 1.75em
55
font-weight
normal, bold, etc
or you can use one of the numbers that the font offers (i.e. 800) like this:
font-weight: 800;
56
line-height
space between lines of text
example: line-height: 0.8em;
another way
57
margin (with 3 numbers)
margin: -5px 0 0;
first number is space above item
second is space to the left and right
3rd is space below the item
58
padding-top
specifies that you only want padding on top
example: padding-top: 50px;
59
text-decoration
if set to none, it will remove any underlining
example: a {
text-decoration: none;
}
60
max-width
sets width. if % is used, then it will adjust to be 100% width of whatever the container that it is in.
example:
img {
max-width: 100%;
}
61
list-style
if set to none - you remove any bullets points
example:
list-style: none;
62
width (%)
only will ever take up some percentage of what it's parent container size is
63
float
allows items to be side by side, instead of stacking on top of each other
remember - if you float an item and you want it to span the entire page - you need to set width: 100%;
64
clear
this clears the both the left and right side of any floating elements (i.e. images).
example is that the footer could try to wrap with an ordered list - but if you add the clear rule (set to "both" means that it will clear it on both the left and right side.
clear: both;
65
margin (with 4 numbers)
the go clockwise starting from the top.
padding: 5px 3px 2px 1px;
top: 5px
right: 3px
bottom: 2px
left: 1px
66
block vs in-line
every element has a built in display - either block or in-line.
Inline: and images text - just appears in-line
div, ul, ol,, etc - blocks that appear to put blocks around each other that force other things from around it
67
border-radius
allows you to make rounded corners on your image
example:
border-radius: 100%;
will give you a circle
68
display an image centered
```
img {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
```
you need to make the image display as a block (it is defaulted to in-line) and so that when you set the width to auto, it is able to use that to center the block
69
background-image
Accepts an image path that applies the file to the background of an element.
allows you to set an image on the page through CSS
background-image: url('../image/phone.png');
70
how to move up a directory when setting a relative link
..
for example:
background-image: url('../image/phone.png');
71
background-image
example:
72
background-size
Sets the size of background images.
background-size: 20px 20px;
73
background-repeat
Sets whether or not a background image should be repeated. By default, backgrounds will repeat.
background-repeat: no-repeat;
repeat-x only repeats horizontally
repeat-y only repeats vertically
74
What is the general difference between margin and padding?
Margin adds space on the "outside" of the element and pushes nearby elements away. Padding adds space on the "inside" of the element and makes space between th elements edge and its content.
75
Responsive Web Design
A technique for creating websites that work on multiple screen resolutions via the combination of fluid images, fluid grids, and media queries.
76
Responsive - Fluid Images
img {
max-width: 100%;
}
77
Responsive - Fluid Grid
use relative units, instead of fixed
78
Responsive - Media Query
@media screen and (min-width: 480px) {
}
this targets digital "screens" that are 480px or larger. if it is less than 480, then it will not be applicable
79
Breakpoints
The specific screen widths where a responsive layout "breaks" and needs to change in order to accommodate the screen
80
@media
Media queries use the @media CSS rule to define conditions of the browser medium. In other words, it allows for CSS styling to only be included if certain conditions are met, such as a specific browser width.
81
cascading media queries
start with the smallest break point, then the later ones will overwrite the smaller ones if the screen grows
```
@media screen and (min-width: 480px) {
body {
background: navy;
}
}
```
```
@media screen and (min-width: 660px) {
body {
background: darkgreen;
}
}
```
82
margin-left
margin-right
margin-bottom
margin-top
you can provide specific margin adjustment without needing to specify all of the other sides
margin-left: 5%;
margin-right: 5%;
83
border-bottom
provides a boarder at the bottom of the screen
border-bottom: 5px solid #599a68;
border-width: 5px
border-style: solid border type (others are dash or dotted)
color
border-color: #599a68
you can also add different colors, styles to each edge of the border so that
84
place where you can go to validate your html
http://validator.w3.org
85
place where you can go to validate your css
http://jigsaw.w3.org/css-validator/
86
allows you to get screenshots of your website on different devices
browserstack.com
87
URL - Protocol
A system of rules for the exchange of digital information. On the web, the Hyper Text Transfer Protocol (HTTP) allows for the exchange of websites.
88
URL - Subdomain
A smaller domain that is part of a larger domain. For example, "www" is a common subdomain.
89
URL - Domain
A unique identifying string that defines a realm of authority or control on the web.
90
URL TLD
TLD stands for Top Level Domain and it is the highest level domain in the Domain Name System (DNS). This is the part of the domain such as .com, .net, and .org, that comes at the end.
91
shortcut for getting to dev tool on chrome
command + option + i
92
places i can get good CSS help/reference
Mozilla Developer Network (MDN)
WebPlatform.org
W3C
Can I Use
93
Inline Styles
When we write inline styles, we write the CSS in the HTML file, directly inside an element's tag using a style attribute.
94
Internal Styles
Internal styles are embedded in the section of the HTML document and are defined inside a tag.
```