HTML/CSS Basics Flashcards
Attributes
HTML
Provides additional information about an element.
Ex: href src id
Tags
HTML Property
Brackets (<>) Surrounding an Element
<> Opening Tag
</> Closing Tag
HTML
HyperText Markup Language
Defines Structure of Content
CSS
Cascading Style Sheets
Represents Appearance of Content
Elements
Used in HTML
Define Structure
Ex: <h1>> <p> <div>
HTML Document Structure
All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>
Self-Closing Elements
Some elements simply receive their content or behavior from attributes within a single tag
Ex: <meta></meta> <img></img> <input></input> <link></link>
Selectors
CSS
A selector designates exactly which element or elements within our HTML to target and apply styles (such as color, size, and position) to.
Generally target an attribute value such as an id or class value.
Selectors are followed with curly brackets, {}, which encompass the styles to be applied to the selected element.
Properties
A property determines the styles that will be applied to that element.
ex: background color font-size height width padding
Values
Values determine the behavior of a property.
Values can be identified as the text between the colon, :, and semicolon, ;.
Type Selector
Type selectors target elements by their element type.
Should we wish to target all division elements, <div>, we would use a type selector of div.
Class Selector
Class selectors allow us to select an element based on the element’s class attribute value.
Class selectors allow us to apply the same styles to different elements at once by using the same class attribute value across multiple elements.
Within CSS, classes are denoted by a leading period, ., followed by the class attribute value
ID Selector
ID selectors are even more precise than class selectors, as they target only one unique element at a time. Just as class selectors use an element’s class attribute value as the selector, ID selectors use an element’s id attribute value as a selector.
Within CSS, ID selectors are denoted by a leading hash sign, #, followed by the id attribute value.
IDs can only be used one per page.
Syntax
Spelling and Gramar Rules
<p>
</p>
Paragraph Tag
<a></a>
Anchor Tag
<h1><h1>
...................
<h6></h6>
</h1></h1>
Heading Tag
<span></span>
HTML
Short Text
<pre>
</pre>
HTML
Preserves Whitespace
Better to do with CSS
<em></em>
HTML
Stress Emphasis
Looks Italicized
Accessibility Tag
<strong></strong>
HTML
Strong Importance
Looks Bold
Accessibility Tag
<ul>
</ul>
HTML
Unordered List
<ol>
</ol>
HTML
Ordered List
<li>
</li>
HTML
List Item
Containing Element
Element that contains other element
<div></div>
<section></section>
<article></article>
<aside></aside>
<header></header>
<footer></footer>
Semantics
Semantics within HTML is the practice of giving content on the page meaning and structure by using the proper element
Header
The <header> element, like it sounds, is used to identify the top of a page, article, section, or other segment of a page. In general, the <header> element may include a heading, introductory text, and even navigation.
Navigation
The <nav> element identifies a section of major navigational links on a page. The <nav> element should be reserved for primary navigation sections only, such as global navigation, a table of contents, previous/next links, or other noteworthy groups of navigational links.
Article
The <article> element is used to identify a section of independent, self-contained content that may be independently distributed or reused. We’ll often use the <article> element to mark up blog posts, newspaper articles, user-submitted content, and the like.
Section
The <section> element is used to identify a thematic grouping of content, which generally, but not always, includes a heading. The grouping of content within the <section> element may be generic in nature, but it’s useful to identify all of the content as related.
The <section> element is commonly used to break up and provide hierarchy to a page.
Aside
Mainly used for ads.
The <aside> element holds content, such as sidebars, inserts, or brief explanations, that is tangentially related to the content surrounding it. When used within an <article> element, for example, the <aside> element may identify content related to the author of the article.
Footer
The <footer> element identifies the closing or end of a page, article, section, or other segment of a page. Generally the <footer> element is found at the bottom of its parent. Content within the <footer> element should be relative information and should not diverge from the document or section it is included within.
Division Element
A <div> is a block-level element that is commonly used to identify large groupings of content, and which helps to build a web page’s layout and design.
Span Element
A <span>, on the other hand, is an inline-level element commonly used to identify smaller groupings of text within a block-level element.</span>
Cascade
Within CSS, all styles cascade from the top of a style sheet to the bottom, allowing different styles to be added or overwritten as the style sheet progresses.
Cascading Properties
Because the green background color declaration comes after the orange background color declaration, it will overrule the orange background, and, as before, our paragraphs will appear with a green background.
Specificity
The type selector has the lowest specificity weight and holds a point value of 0-0-1. The class selector has a medium specificity weight and holds a point value of 0-1-0. Lastly, the ID selector has a high specificity weight and holds a point value of 1-0-0. As we can see, specificity points are calculated using three columns. The first column counts ID selectors, the second column counts class selectors, and the third column counts type selectors.
The ID selector has a higher specificity weight than the class selector, and the class selector has a higher specificity weight than the type selector.
Box Model
Every element on a page is a rectangular box and may have width, height, padding, borders, and margins
Margin
The margin property allows us to set the amount of space that surrounds an element. Margins for an element fall outside of any border and are completely transparent in color. Margins can be used to help position elements in a particular place on a page or to provide breathing room, keeping all other elements a safe distance away.
Padding
The padding property is very similar to the margin property; however, it falls inside of an element’s border, should an element have a border. The padding property is used to provide spacing directly within an element.
Borders
Borders fall between the padding and margin, providing an outline around an element. The border property requires three values: width, style, and color. Shorthand values for the border property are stated in that order—width, style, color. In longhand, these three values can be broken up into the border-width, border-style, and border-color properties. These longhand properties are useful for changing, or overwriting, a single border value.
Border Radius
The border-radius property accepts length units, including percentages and pixels, that identify the radius by which the corners of an element are to be rounded. A single value will round all four corners of an element equally; two values will round the top-left/bottom-right and top-right/bottom-left corners in that order; four values will round the top-left, top-right, bottom-right, and bottom-left corners in that order.
Typeface
A typeface is what we see. It is the artistic impression of how text looks, feels, and reads.
