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.
How do you reference an external style sheet in an .html document’s head element?
It is linked to the .html doc with a link tag, a relationship attribute of stylesheet, and a hyperlink reference attribute to dictate the path to the stylesheet file
(the filename is all that is needed in practice, as the stylesheet is located in the same place as the .html document when uploading site contents to the web).
E.g.,
What is a CSS reset?
It is a block of CSS code at the beginning of a stylesheet, used to tone down the default styling of the web browser reading the .html document, allowing each element to be styled from the same base.
Margin
The space between an elements border and surrounding elements.
Padding
The space between the element and its border.
What happens when an element’s margin is set to a negative value?
The element grows larger
What does Inheritance refer to in HTML?
The styling of elements based on their parent element’s styling. If not given their own selectors, classes, or ids, the element inherits the styling of its parent.
Which attribute takes precedence in styling, class or id?
id is specific to one single element, and always takes higher presence than class styles.
If an element belongs to multiple classes, how does the browser determine which styles to apply within the classes?
It chooses whichever class was declared last.
What is the only way I’d styles are overridden?
Inline styling
How can all styles be overridden, even when id and inline are declared?
Placement of the keyword ‘!important’ after the value declaration and before the semicolon of the style you want to ensure overrides.
How do you comment out text in HTML?
open a comment with ‘ ‘
How do you comment out text in CSS?
open a comment with ‘ /* ‘, close one with ‘ */ ‘
