Styling / HTML / CCS Flashcards
How do you use application.html.erb?
Located in /app/views/layouts
sets the styling for your application
HTML
Hyper Text Markup Language - A Markup Language used for describing the structure/layout of web pages.
semantic vs non-semantic tags
Semantic tags act teh same as a div (non-semantic tag) but have implied meaning (e.g., , , )
block vs inline elements
Inline takes up as much space as needed, while block takes up the entire width of a page.
The Type Declaration tells our browsers that our application is using HTML5 (this is NOT an html tag, but rather just an instruction for the browser about our HTML version)
signals the beginning of our HTML
signals the beginning of our HTML
contains all the metadata (information about the document)
contains all the metadata (information about the document)
the title that will show in the tab of your browser
An ActionView::Helpers. How we link to external stylesheets, i.e. our CSS.
We want this in the head so it loads first.
We could also style right in our html document with a style tag but DON’T DO THAT. We always want to use ActionView::Helpers when we can.
Another ActionView::Helpers. How we link to our client-side statements (JavaScript).
We could use the html tag, but we prefer the ActionView::Helpers.
Another ActionView::Helpers. How we link to our client-side statements (JavaScript).
We could use the html tag, but we prefer the ActionView::Helpers.
Contains ALL the elements of the HTML document that we would like to display.
Where all of our view files get rendered.
This is used in a ‘layout level template’ to help us ‘DRY’ up our HTML.
Now instead of needing to repeat the above in every erb/html file we can simply write the html that we want our body to contain.
Where all of our view files get rendered.
This is used in a ‘layout level template’ to help us ‘DRY’ up our HTML.
Now instead of needing to repeat the above in every erb/html file we can simply write the html that we want our body to contain.
Where all of our view files get rendered.
This is used in a ‘layout level template’ to help us ‘DRY’ up our HTML.
Now instead of needing to repeat the above in every erb/html file we can simply write the html that we want our body to contain.
This means that if there is part of a view we want to render on every page (like a navbar or footer), we can put it in application.html.erb.
Non-Semantic Tags
Non-Semantic
divs are incredibly common but with the introduction of HTML5, there was a move towards semantic tags.
divs tell us NOTHING about the content of the element.
A good use case for a div might be creating an element on a page like a solid box.
attributes
We can give our HTML elements attributes. These attributes appear inside the tag itself (in between the angle brackets < >).
<img></img>
The img tag has an attribute of src with a value of ‘https…’
class
the class attribute is used to identify several related elements
id
the id attribute is used to identify a single element.
id takes higher priority than class in CSS
Only one element should have a certain id. If two elements have the same id, your page will still display, but it may not work the way you expect.
CSS
“Cascading Style Sheets”
When we apply a class or an id to an HTML element, we can use CSS to select it and give it a “rule” of how it should be styled.
When more than one rule applies to an HTML element (it might have an id and a class), CSS “cascades” down from the more general rules to the more specific rules. The most specific rule is chosen. An id is the most specific rule.
A common misconception is that “cascading” means that our browser will flow down the CSS file and the last rule will be applied.
There is a way to calculate CSS Specificity. Each rule in CSS (i.e a class or id rule) has a specific value assigned. ids have higher values than classes. The highest number wins for most specific and will correspondingly take precedence in application of style. (nice to know, not a need to know)
What are ActionView::Helpers
allows us to link to external stylesheets (i.e., our CCS) or to our client statements (javascript)
Within our application.html.erb:
Former:
Latter:
Block element
An element with a display of block will take up the entire width of the page, no matter how small the content is within the tag.
It will always start on a new line.
p, form, h1 - h6, ul, section and divs are all block elements
Most “User Agent stylesheets” (the default styles the browser applies) reset many elements to block
Inline element
default value for all HTML tags
link, a, span are all inline by default.
They will only take up as much space as it needs.
It will not start on a new line.
You can set the margin and padding but it will only adjust horizontally. Will ignore any rules for width or height.
Inline-Block
Will situate itself inline, but can set a width and height.
