My reading notes journal for Code Fellows
HTML also has features available for marking up quotations; which element you use depends on whether you are marking up a block or inline quotation.
Blockquotes
If a section of block level content (be it a paragraph, multiple paragraphs, a list, etc.) is quoted from somewhere else, you should wrap it inside a <blockquote> element to signify this, and include a URL pointing to the source of the quote inside a cite attribute. For example, the following markup is taken from the MDN <blockquote> element page:
The HTML <blockquote> Element (or HTML Block
Quotation Element) indicates that the enclosed text is an extended quotation.
Copy to Clipboard To turn this into a block quote, we would just do this:
Here is a blockquote:
The HTML
<blockquote>Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.
Copy to Clipboard Browser default styling will render this as an indented paragraph, as an indicator that it is a quote; the paragraph above the quotation is there to demonstrate that.
First, let’s examine three methods of applying CSS to a document: with an external stylesheet, with an internal stylesheet, and with inline styles.
External stylesheet An external stylesheet contains CSS in a separate file with a .css extension. This is the most common and useful method of bringing CSS to a document. You can link a single CSS file to multiple web pages, styling all of them with the same CSS stylesheet. In the Getting started with CSS, we linked an external stylesheet to our web page.
You reference an external CSS stylesheet from an HTML element:
<!DOCTYPE html>
This is my first CSS example
Copy to Clipboard The CSS stylesheet file might look like this:
h1 { color: blue; background-color: yellow; border: 1px solid black; }
p { color: red; } Copy to Clipboard The href attribute of the element needs to reference a file on your file system. In the example above, the CSS file is in the same folder as the HTML document, but you could place it somewhere else and adjust the path. Here are three examples:
Copy to Clipboard Internal stylesheet An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside a
The HTML for an internal stylesheet might look like this:
<!DOCTYPE html>
This is my first CSS example
Copy to Clipboard In some circumstances, internal stylesheets can be useful. For example, perhaps you’re working with a content management system where you are blocked from modifying external CSS files.
But for sites with more than one page, an internal stylesheet becomes a less efficient way of working. To apply uniform CSS styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling. The efficiency penalty carries over to site maintenance too. With CSS in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.
Inline styles are CSS declarations that affect a single HTML element, contained within a style attribute. The implementation of an inline style in an HTML document might look like this:
<!DOCTYPE html>
This is my first CSS example
Copy to Clipboard Avoid using CSS in this way, when possible. It is the opposite of a best practice. First, it is the least efficient implementation of CSS for maintenance. One styling change might require multiple edits within a single web page. Second, inline CSS also mixes (CSS) presentational code with HTML and content, making everything more difficult to read and understand. Separating code and content makes maintenance easier for all who work on the website.
There are a few circumstances where inline styles are more common. You might have to resort to using inline styles if your working environment is very restrictive. For example, perhaps your CMS only allows you to edit the HTML body. You may also see a lot of inline styles in HTML email to achieve compatibility with as many email clients as possible.