HTML and CSS Flashcards
What is the primary use of HTML
Hypertext Markup Language - functions to describe the structure and meaning of webpages. Hypertext refers to documents that link to one another. Markup refers to its ability to describe webpages.
What is meant by HTML elements
These are used to create the structure of HTML documents. They can stand on their own or be nested in other elements.
How can we specify HTML elements using tags?
Elements are represented by using a pair of opening and closing tags. An opening tag has its name enclosed in <>, and a closing tag has its name enclosed in </>
What is the general structure of an HTML document?
The first line is a Document Type Declaration; <!doctype html> which tells the browser that this is an HTML document. We then have the <html> element which is the root element of the document. This element typically has a lang attribute to describe the language used by the majority of content on the page; <html lang='en'>.
All other elements are descendants of this element. Inside the <html> element, we have the elements <head> and <body>
The <head> element is used to specify meta-data bout the document and is also called the header of the document. It helps the browser and robots (e.g., search engine crawlers) understand what is on the page.
The body element contains the actual content which will be visible in the browser.
The html elements are not case sensitive, however it is recommended that we use lower case.
What are attributes and how do we specify values of attributes?
Additional information on top of tags that can be provided. Usually specified using the syntax of attribute-name=”attribute-value”, or attribute-name=’attribute-value’
- choose either single or double quotes, but be consistent throughout
On occasion you will see an attribute name with no associated value.
How do we nest multiple tags in an HTML document?
Opening and closing tags act a lot like parenthesis. if a tag has both an opening and closing tag, those must both appear at the right depth inside the nested elements.
What is meant by percent-encoding?
What are the different types of header elements?
H1, h2, h3, h4 , h5, h6
H1 is the most important or highest level heading. H6 is the lowest level heading that you might find deep in an article.
to ensure our web pages are accessible to screen readers (for the visually impaired) and search engine algorithms, headings h1 to h6 must be used hierarchically to denote new or sub-level content.
What are the uses of elements section, article, and div?
The div element is eg., <div>Content Here</div>, is used to divide content. It should be used as a last resort when no other element makes sense. If you want to divide content purely for stylistic reasons, this is the element to use. it conveys no meaning and just generically divides content.
what are the uses of the elements strong, b and em?
This family of elements is for adding meaning or style to specific text within a paragraph. This is different from the previous elements which generally served to group text.
<strong>
This element marks text that is more important. e.g., <strong> This is important </strong> It requires an opening and closing tag. The important thing about strong is that it signifies that text is important. Usually browsers will make it bold by default. But a browser could make it red, or make it underlined. By marking text with strong you are saying it is more important than the tea around it. Screen readers can also use this element to change voice inflection.</strong>
<b>
This element makes text stylistically different from other text. Look at me, I am <b>different</b>. This could be used to highlight keywords in a paragraph or conform to style guidelines set by some journal</b>
<em>
This element adds emphasis to a word. Often making it italic. It adds additional meaning to the word or phrased that is emphasized.</em>
<q>
This element is typically used to add double-quotation marks (English) to phrases and sentences. They work well with p and block quote tags.</q>
<span>
This element is typically used along with a new style or class (explored later) to change the way a specific piece of content looks.</span>
How can we create different types of lists in HTML?
<ul>
unordered lists contain list items with the <li> tag as children. Those list items can however contain most other html elements.
<ol>
Ordered lists are numbered or otherwise sequenced, unlike unordered lists.
<dl>
Definition lists use the dl tag and are similar but have pairs of terms and definitions. They contain <dt> tags for terms, and <dd> tags for definitions.
</dd></dt></dl></ol></li></ul>
How can we create tables in HTML?
The most structurally complex html element out there, the table element.
<table>
The table tag starts a table
<caption>
The caption tag can be used after the <table> tag to show a title and description at the top of the table
<thead>
This tag is used for the first row of the table
<tr>
This is a table row tag
<th>
This is to create an item in the head row
<tbody>
This is to create the body of the table
<td> this is to create an item in the body
</td></tbody></th></tr></thead></table></caption></table>
What is the difference between absolute and relative URLs?
An absolute URL is a complete URL to a resource including the protocol and the domain name.
- The URLs https://module2.cs290.com/index.html and https://module2.cs290.com/contacts.html are both absolute URLs
A relative URL points to a location relative to the file in while we use the URL
- Same Directory: We can specify a relative URL to a file in the same directory by using just the name of that file or by adding ./ before the name of the file. Using only the name of the file is the preferred syntax.
- Moving up the parent directories. We can specify relative URLs for files up the directory structure using ..
How can we create links using the anchor element?
The following anchor element links to the URL https://developer.mozilla.org/en-US/. The text A link to MDN. describes the link. When someone clicks on the text, they will be taken to the page https://developer.mozilla.org/en-US/
<a>A link to MDN.</a>
What is the use of the img element?
used to display images: <img></img>.
By default images are displayed in line so no new line is made for them.
What is the link element and how we can use it to specify a relationship between a document and an external recourse?
The link element is another way to use URLs in HTML documents. IT specifies a relationship between a document and an external resource. The href attribute is used to specify the URL of the eternal resource. The real attribute, which stands for “relationship”, is used to specify the relationship between the external resource and the HTML document. Two commonly used values of red are stylesheet to link stylesheets and icon to link a websites icon
What is the script element and its use?
We add javascript code to an html document using the script element. We can either simply embed javascript code inside an opening and a closing
tag or use the script tag to refer to a javascript file using the src attribute to specify the URL for that file.
What is the need for CSS?
Css is used for styling HTML elements. The key idea is to separate content from style. HTML specifies the semantic structure and content of a web page. Each HTML element has a default style we can override with Css. CSS treats each HTML element as if it were contained inside its own box. Using CSS rules, we can specify how that box and element inside the box should be styled
What is the general form of a CSS rule?
A simple CSS rule starts with a selector which selects the HTML elements to which the rule applies. This is followed by one or more declarations placed inside a pair of curly braces. Each declaration is a property value pair, specifying a property of the element and then the value we want to set for that property. A colon: separates a property and its value, while different declarations are separated by a semi-colon;
h1 {
color: blue; font-size: 25pt;
What are CSS selectors, and what are they used for?
selectors select the HTML elements to which the rule applies.
What are some types of basic CSS selectors?
- is the universal selector which matches all elements
Type selectors match elements based on the element type, i.e., the tag name.
h1 {
color: red;
font-size: 25pt;
}
The ID selector selects the single element with a matching ID and is of the form #id
Example: we select an element with id vivid by using the selector #vvip
#vvip{
font-weight: bold;
}
The class selector selects all elements in which the attribute class has that value. The syntax is .class, i.e., we add a . before the value of the class.
Example: The selector .navigation will apply to all elements with the class attribute of navigation
.navigation {
font-size: 16pt;
}
When should we use classes vs. IDs as selectors in our rules?
- In a single page, an ID can be used only by one element, whereas a class can be reused by multiple elements.
- Thus, IDs are good for anchoring and specifying unique blocks, whereas classes are more about design properties that get used again and again.
Grouping selectors:
It is possible to specify rules that apply to multiple selectors. This is done by specifying multiple selectors separated by commas. her is an example rule that selects paragraphs and list elements and sets their color to blue:
p, li {
color: blue;
}
What are location-based CSS selectors?
Descendant Selector selects all elements of type x which are a descendant of type y with the syntax y x. So nav ul will apply a style to all ul elements which are the descendants of a nav element.
Child Selector selects all elements of type x which are direct children of type y. The syntax is y>x. So nav>ul would select those ul elements whose direct parent is a nav element. But unlike the descendant selector it would not target a ul within a div within a nav because the ul is a child of the divine, not the nav.
Adjacent Sibling selects elements of type x which have the same parent element and appear immediately after an element of type y,. The syntax is y+x. So h1+p would select a p element if it directly follows an h1 element. An example use of this would be in an HTML document for a news article where we wanted the first paragraph after the news article’s headline to always look different than the rest of the paragraphs in that article.
General Sibling selects all siblings, and not only the one sibling that immediate follows. The syntax here is y~x. So h1~p would target all paragraphs on the same level as the h1 elements, not just the one immediately after it.
Complex Selectors
We can combine selectors to form more complex selectors. A common use is combining a type and a class to specify a selector that applies to tags with that type but only if they have that particular class. The syntax for this is tag.class
What are pseudo-selectors?
Selectors that are based on the state of an element. We can specify pseudo selectors using a selector followed by a pseudo-class where a pseudo-class is a keyword preceded by a :. Here is the general syntax:
selector:psuedo-class {
property: value:
}
Common use cases for pseudo-classes are changing the style of an element when the mouse hovers over it, and displaying visited links differently from links that have not been visited
/* hover over a paragraph */
p:hover {
color: white;
background: black;
}
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: orange;
}
What are different ways of adding styling rules to an HTML document, and what are the pros and cons of these different ways?
External CSS using separate stylesheet
- We put the style rules in a file with .css extension and link the stylesheet to the document using the link element.
- Using this approach the same styles can be easily shared across multiple pages in a website.
- This also makes it easy to make a change in one stylesheet and update the style across many pages.
- The ease of sharing styles and the clean separation between content and style make this the preferred approach for specifying styling information
Internal CSS using the style element:
- This allows us to specify styles that are specific to that HTML page
Inline CSS using the style attribute of an element
- this approach is used to apply a style to a single element
- To apply the same style to multiple elements, this approach requires repeating the style declaration in all these elements.
- The potential for repetition of styling information and the mixing of content and styling information make this the least recommended approach for specifying styling information.
How is rule precedence determined for CSS rules?
Later rules overrule earlier rules. This means that:
- inline rules overrule rules specified in the style tags
- Rules in the style tags override rules in the linked stylesheet file
- Stylesheet files specified later in the head element override those specified earlier in the head element
Rules with a more specific selector take precedence over those with more general selectors. For example:
- p is more specific than *
- p em is more specific than p
Rules associated with id override rules associated with class
Rules associated with class override rules associated with tags
Some rules (though not all) are inherited by default depending on how tags are nested inside one another. And that’s not even taking into account advanced CSS rules such as media selectors and @import
We should keep the style rules as simple as possible:
- Try to use a single .css file
- Do not use inline styles
In addition, you can test your page using browser Dev Tools that can explain to you how rules override each other.
What are some of the common color related properties?
color - the foreground color of an element, e.g., an elements text
border-color - The color of the border of an element
background-color - The background color of an element
How can we specify the value of colors?
- Hex values in the form of #RRGGBB
- Larger R values give more red, similarly G for green and B for Blue
- So #FF0000 would be pure red, #FFFFFF would be white, #550055 would be darkish purple - Decimal values in the form of rgb(x, y, z)
- This is just an alternate representation of the hex values given as either decimal numbers or as percentages,
- For example, #FF0000 is represented as Rgb(255, 0, 0) or as Rgb(100%, 0%, 0%) - Named colors:
- In addition to using hex there are several named colors
- A list of the basic named colors and their corresponding hex values can be found at the W3C site
Notes;
- Many times hex colors are used when designing a site’s color scheme because of the greater control they provide.
- Colors can also be represented using HSL (Hue/Saturation/Luminosity) notation
- With both RGB and HSL, we can add an alpha channel to control transparency, leading to RGBa and HSLa notation
What are some of the important units for specifying size in CSS?
Length Units
Frequently used in cSS to specify sizes and distances. There are 2 types of CSS distance units, absolute and relative. As the names imply, the absolute units are not relative to anything, whereas the relative units are relative to something else, e.g., the size of the parent element
Absolute units:
used for printing, rather than for displaying a webpage on the screen. Here are some commonly used absolute length units:
Relative units:
- Using relative units allows the size of an element or the distance between element to scale relative to other elements on the screen, For this reason, lengths for displaying a webpage on the screen are typically specified using relative units,. This is useful for layouts because if a user increases their font size to make a site easier to read, the size of elements using relative units will expand as well. On the other hand, if we were to use a fixed measurement and a user changed the font size, text might spill outside of the elements which are supposed to contain it.
The most commonly used relative units are em and rem.
- em is a relative unit based on the current font size of the parent element,. For example, 2em means two times the parent elements current font size.
- rem is a relative unit based on the current font size of the root element. For example, 2rem means two times the current font size of the root element.
What is the CSS box model?
CSS treats each HTML element as if it were contained in its own box. There are 2 types of boxes, block-level and inline corresponding to whether the element in the box is a block-level element or an inline element. Recall that elements such as h1, p, ul, li are block-level elements and start on a new line, whereas elements such as ing, b, I are inline elements and do not start a new line. Various CSS properties are available to control the appearance of the box surrounding an element. The most important properties to control the sizing of the box are shown in the following figure:
In the CSS Box Model, the element is contained in a rectangular box of a certain width and height. The box containing the element is separated from its border by padding on all four sides. After the padding comes the border of the box. Finally, a margin is defined on all four sides of the border specifying the distance between this box and its neighboring boxes.
what are the different size properties relevant to the box model?
- Element
- We can specify width and height properties to override element defaults - Padding
- We can specify the size of the padding using the properties padding-top, padding-right, padding-bottom, and padding-left - Margin
- We can specify the size of the margin using the properties margin-top, margin-right, margin-bottom and margin-left - Border
- We can specify the color, style, and width of the border at the top, bottom, left, and right, using 12 different properties.
- The names of the properties for controlling the border at the top are border-top-color, border-top-style and border-top-width,.
- The names of the properties corresponding to the border at the bottom have the word bottom instead of top in their names. Similarly replace top by left or right.,
Note:
- Typically the sizes of the padding are declared using one of many abbreviated forms. For example:
- The declaration padding: 10px; means that all 4 padding sizes are 10px
- The declaration padding: 10px 20px 30px 40px; specifies the 4 padding sizes in the order top, right, bottom, and left
- These abbreviated forms are also used for margin and border
What are the different ways to position elements in the box model?
The position property in css is used to position elements in the document. this property can have one of five values that we discuss below.
Static
Static or normal positioning is specified using the declaration position: static;. It is also used when there is no declaration for position. With static positioning, the browser figures out where something should be positioned using default positioning algorithm. This algorithm starts each block-level element at a new line and each block-level element is placed on top of the next.
Relative
Elements with relative positioning are moved in relation to where they would be placed by the static positioning. The properties top, right, bottom and left can be used to specify the offset by which element should be moved from the position it would be placed in if static positioning were being used.
Absolute
Elements with absolute positioning are positioned in relation to the parent element. The properties top, right, bottom and left can be used to specify the offset by which element should appear relative to its parent element.
Fixed
Elements with fixed positioning are positioned with respect to the document window. If we scroll the page, the fixed element will scroll with the page. Using fixed position, we can, for example, make a nav bar always appear at the top of the page.
Sticky
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block, including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor.
