HTML Flashcards
how to add style with CSS
“Style Tags”
h1 {
color: blue;
}
CSS Selector
the HTML element that you want the style to be applied to (the h1 in the example below)
h1 {
color: blue;
}
CSS Property
color in the example below:
h1 {
color: blue;
}
HTML Headline element
<h1></h1>
what every webpage needs to start with this
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
HTML tags
this is what placed right after the doctype and serves as the “root”
what is contained in the head tags?
meta information invisible to the users and CSS
character set
what is an HTML attribute and attribute format
information provided to the browser, invisible to the user
word=””
html entity for copyright symbol
©
header
The header element helps to structure the content. This is different from the head element, which is just for document metadata.
section
Sections break up logical groupings of information, just like sections of a newspaper.
footer
The footer element is a complement to the header element. It represents the bottom of a content area.
<h2></h2>
The second level headline element, similar to first level headlines. Typically these appear slightly smaller by default.
<p></p>
The paragraph element should contain text in sentence or paragraph form.
<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
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
<ul></ul>
The unordered list element contains list item elements and is typically styled with bullet points by default.
<li>
</li>
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.
Relative Path
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.
Absolute Path
Describes the location of a file using the full file path.
<img></img>
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>
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
CSS
Cascading Style Sheets, the computer code that defines the visual presentation of web pages.
Rule
The entirety of a CSS selector and its declarations.
Selector
CSS syntax that defines elements on a page to which declarations should be applied.
Declaration
Pairs of CSS properties and values that define how an element should be styled.
Property
CSS syntax that defines which part of an element should be styled, such as its color, size, position, and so on.
Value
CSS syntax that sets the variable units for properties.
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.
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
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
color
Sets the text color of an element. Accepts any CSS color unit.
background-color
Sets the background color of an element. Accepts any CSS color unit.
<div></div>
groups together sections of the website
<div>
~~~
<ul>
<li>
<a>
<img></img>
<p>Creating shapes using repetition</p>
</a>
</li>
</ul>
~~~
<a><img></img></a>
<p>© 2015 Brent Colson</p>
</div>
the id in the div element allows you to name the div that can be referenced in the CSS
how to reference a custom div in CSS (use <div> as an example)</div>
#wrapper {
max-width: 940px;
margin: 0 auto;
}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;
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
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
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
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
Hexadecimal shorthand
color: #fff;
this uses the each letter twice for each of the colors
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
how to select a class in CSS to declare a rule
element.class
example: nav a.selected
or
.selected
Class Selector
Selects any HTML element that contains a matching class attribute
example:
<a>Portfolio</a>
hover
state of a link in CSS when you hover over it with your mouse
example: nav a:hover
visited
nav a:visited
Comment
logo {
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
*******/
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
font-family
Defines which fonts should be applied to text.
font-size
Sets the size of text in either relative or absolute units.
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.
how to add Google Fonts to your webpage
link it to your HTML BELOW normalize, but ABOVE main
Brent Colson | Tennis Player
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
em
relative sizing for fonts. 1em is equal to the default browser size (16 px)
example: font-size: 1.75em
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;
line-height
space between lines of text
example: line-height: 0.8em;
another way
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
padding-top
specifies that you only want padding on top
example: padding-top: 50px;
text-decoration
if set to none, it will remove any underlining
example: a {
text-decoration: none;
}
