7. Beginner Guide to HTML & CSS Flashcards
HTML
Hypertext Markup Language
HTTP
Hypertext Transfer Protocol
Elements
Designated that define the structure and content of objects within a page
(e.g., headings <h1>, paragraphs </h1><p>, etc…)</p>
Tags
The syntax wrapped in angle brackets that represent elements.
Opening tag
Marks the beginning of an element, and consists of: a left angle bracket, element name, and right angle bracket. (E.g., <div>)</div>
Closing tag
Marks the end of an element, and consists of: a left angle bracket, a forward slash, the element’s name, and a right angle bracket. (E.g., )
Attributes
Properties used to provide add’l info about an element.
(E.g., id, which identifies an element; class, which classifies an element; src, which specifies a source for embeddable content; href, which provides hyperlink reference to a linked resource)
Selectors
Designates exactly which element(s) to target and apply styles to.
E.g., ‘p’ is the selector and has the ‘color’ property set to a value of ‘orange’:
p {
color: orange;
}
Properties
Determine the styles that will be applied to the element; found inside of curly brackets and preceding a colon.
E.g., The ‘color’ property has the value ‘orange’ for the ‘p’ selector:
p {
color: orange;
}
Values
The text btw the colon and semicolon that dictates the behavior of the property it follows.
(E.g., ‘orange’ is the value of the ‘color’ property of the ‘p’ selector:
p {
color: orange;
}
Type Selectors
Target elements by their element type.
E.g., to target all division elements, use the type selector ‘div’:
div {
color: light blue;
}
Class Selectors
More specific than type selectors, as they select a group of elements; select an element based on the element’s class attribute value; are preceded by a ‘ . ‘
E.g.,
(HTML)
<div>...</div>
<p></p>
(CSS)
.awesome {
…
}
ID Selectors
Even more precise than class selectors, they target only one unique element; uses an element’s I’d attribute value as a selector; preceded by a ‘#’ symbol.
E.g.,
(HTML)
<div>...</div>
(CSS)
#shayhowe {
…
}
Why is it best practice to use a single external style sheet?
It allows for styling to be cohesive across an entire website and for changes to styling to be made quickly sitewide.
Where do you reference a style sheet in an .html document?
In the head element.
