HTML/SASS Flashcards
(34 cards)
Document Object Model
Tree-likes structure of HTML Web Page
Ex: Root is < html > having two children < head > and and < body > so on
HTML Tag
Pair of open/end
Ex: < html > < / html>
HTML Attribute
Addition about some structure or info of HTML Tag
Ex: < html lang = “en” > < div class = “general” >
< head > and < body >
< head > contains infomation for web browser
Ex: having < title > and < script > < href > tags
contains what to show to user
Basic HTML structure
< !DOCTYPE html >
< html >
< head >
< title > Hello! < / title >
< / head >
< body >
< h1 > Hello World < / h1 >
< p > Nice to meet you < / p >
< / body >
< / html >HTML Lists
< ul > or < ol > < li > 1st < / li > < li > 2nd < / li > < li > 3rd < / li > < / ul > or < / ol >
HTML Images
< / img src=”Link of images” alt=”Alternate text if cannot display the image properly” >
HTML Link
< a href = “Destination Web (Absolute URL or relative URL) > Text to display (Ex: “Click Here”) < / a >
HTML Table
< table >
< thead > Name for each columns / feature of table
< tr >
< th > Ocean Name < / th >
< th > Average Depth < / th >
< th > Maximum Depth < / th >
< / tr >
< / thead >
< tbody >
< tr > Each tr occupy one columns in table
< td > Pacific Ocean < / td >
< td > 4,654m < / td >
< td > 8,567m < / td >
< / tr >
< tr >
< td > Alantic Ocean < / td >
< td > 2,424m < / td > Each td is a data cell
< td > 6,224m < / td >
< / tr >
< / tbody >
< / table >
HTML Form
HTML < form > contains some < input > for user to interact
Attributes for < input >:
- type = “” : represent the way user input data input that input tag. Some examples: “text” for text, “password” for text but hidden, multiple “radio” < input > tag for multiple choice
- placeholder = “initial text show in text box input”
- name = “ref name” : An attribute saves a unique name for that input tags later serves as an reference names for Web Application to be able to pick and handle information from that input tags.
- value = “value” : the result of user input that Web App receive, using in tags that not text (radio)
- list = “list name” : new HTML5 feature able to scroll for a list, shrink down into correct option when types in
Web App use “name” to get input tags, and take value from “value” attribute
< form >
< div >
< input name=”username” type=”text” placeholder=”Your Name” >
< input name=”password” type=”password” placeholder=”Password” >
< / div >
< div >
Favorite Colors ? Four input tags same name attribute serve as one input in Web apps
< input name=”color” type=”radio” value=”red” >
< input name=”color” type=”radio” value=”green” >
< input name=”color” type=”radio” value=”yellow” >
< input name=”color” type=”radio” value=”blue” >
< / div >
< div >
< input name=”country” list=”countries” placeholder=”Country” >
< datalist id=”countries” >
< option value=”Murica” >
< option value=”French Fries” >
…
< / div >
< / form >
HTML Link
Link tag use for link this HTML file with other files by some relationship specified by “rel” attribute:
Ex: < link rel=”stylesheet” href=”styles.css” >
The HTML file is linking to styles.css file (href for the targeted file for linking to) with a relationship of a stylesheet meaning the file that linked will specify the style for this HTML.
External CSS
styles.css:
h1 {
color: blue;
text-align: center;
}
index.html:
< !DOCTYPE html >
< html >
< head >
< title > Hello! < / title >
< link rel="stylesheet" href="styles.css" >
< / head >
< body >
< h1 > Hello World < / h1 >
< h1 > This is TITLES < / h1 >
< p > Nice to meet you < / p >
< / body >
< / html >Internal CSS
< !DOCTYPE html >
< html >
< head >
< title > Hello! < / title >
< style >
h1 {
color: blue;
text-align: center;
}
div {
background-color: green;
width: 400px;
height: 100px;
< / style >
< / head >
< body >
< div >
< h1 > Hello World < / h1 >
< h1 > This is TITLES < / h1 >
< p > Nice to meet you < / p >
< / div >
< / body >
< / html >CSS Padding Margin
Padding adjusts how far the tag’s children element from its border (space out distance inside)
Margin adjusts how far the tag border from its parent or its siblings element (space out distance outside)
CSS Table Example
table {
border: 1px solid black;
border-collapse: collapse;
td, th {
border: 1px solid black;
padding: 5px;
}CSS Id, Class
Id is an unique name given only for one HTML element for CSS reference
Class is a name can be given to multiple HTML element so CSS can style all of them within the same class similarly
Ex: < html >
< head >
< title > Titles < / titles >
< style >
#NameID {
color: green;
}
.NameClass {
color: blue;
}
< / style >
< / head >
< body >
< h1 = id="NameID" > heading 1 < / h1 >
< h1 class="NameClass" > heading 2 < / h1 >
< h1 class="NameClass" > heading 3 < / h1 >
< h1 > heading 4 < / h1 >
< / body >
< / html >CSS Specificity
Having multiple CSS selectors could apply to the same HTML elements, have to specify one. Order of specificity:
1) Inline: put a style=”CSS_code” directly into a HTML element so highest priority, always follow inline CSS.
2) id: prioritize for uniqueness id specification
3) class: group of specific HTML element
4) type: specify by HTML type (h1, div, img,…)
CSS Identifying Elements
Using: < div > < / div >, < span >, id = “” and class = “”
CSS Selectors
- Mutiple Selector: a, b {} styling both a and b
- Descendant Selector: a b {} only style b if b is a’s descendant
- Child Selector: a > b {} only style b if b is a’s direct child
- Adjacent Siblings Selector: a + b {}
- Attribute Selector: [ a=b ] {}
- Pseudo Class Selector: a:b {} the styling for element “a” when on style “b”C
- Pseudo Element Selector: a::b {}
CSS Attribute Selector
selectors[attribute=”info”;] {}
Style only elements that has the same selector and satisfy the attribute info
< html >
< head >
< title > Titles < / titles >
< style >
a[href=”www.facebook.com”] {only “Facebook” on red
color: red;
}
< / style >
< / head >
< body >
<a> Google < / a >
</a><a> Facebook < / a >
</a><a> Amazon < / a >
< / body >
< / html ></a>
CSS Pseudo Class Selector Example
< html >
< head >
< title > Titles < / titles >
< style >
button {
background-color: green;
padding: 20px;
}
/ Pseudo Class: only modified or add some styling, keeps the style of original class as much as possible /
button:hover {
background-color: orange;
}
< / style >
< / head >
< body >
< button > Click me < / button >
< / body >
< / html >Responsive Design
Use CSS property to change styling depends on how web pages are rendered (Ex: render on computer or phone, render with more or less 600px width). 4 types of responsive design:
- viewport
- @media
- flexbox
- grid
CSS viewport
Control the info of the web browser property to affect CSS styling choice, for example change with to fit device width, then CSS media will render by the given width
< head >
/ Adding metadata to head of web page /
< meta name=”viewport” content =”width=device-width, initial-scale=1.0” >
< / head >
CSS @media
Control stylings of web page depends on how the web pages is rendered, what is current screensize the web browser, ...
Ex: < style >
@media (min-width: 600px) {
body {
background-color: red;
}
}
@media (max-width: 599px) {
body {
background-color: blue;
}
}
< / style >
