Copy and paste the following code and adjust the colors and measurements by changing the style variables under the BEGIN STYLE VARIABLES section below.
<style>
:root {
/* ---------- BEGIN STYLE VARIABLES ---------- */
--aside-border-width: 0.2em;
--aside-border-style: solid;
--aside-border-color: #ccc;
--aside-border-radius: none;
--aside-margin-top: 1em;
--aside-margin-right: 1em;
--aside-margin-bottom: 5em;
--aside-margin-left: 1em;
--aside-padding-top: 1em;
--aside-padding-right: 1em;
--aside-padding-bottom: 1em;
--aside-padding-left: 1.25em;
--aside-background-color: #ddd;
--p-border-width: 0em;
--p-border-style: solid;
--p-border-color: #296ca0;
--p-border-radius: 1em;
--p-margin: 1em;
--p-padding: 0em;
--p-background-color: #fff;
--p-strong-label-strong-label-background-color: #296ca0;
--p-strong-label-border-color: #296ca0;
--p-strong-label-border-width: 0.6em;
--p-strong-label-border-style: solid;
--p-strong-label-color: #fff;
--section-border-width: 0.2em;
--section-border-style: solid;
--section-border-color: #34396b;
--section-border-radius: none;
--section-margin: 1em;
--section-padding: 1em;
--section-background-color: rgba(0, 0, 0, 0.25);
}
</style>Copy and past the following code to apply the styling to the different components. Each main or parent container is using the <aside> element and the sub or child containers are using the <section> element.
<style>
* {box-sizing: border-box;}
/* Styles for the MLA Container Examples */
.rioMLAcontainer * {font-size: var(--font-size-default);}
aside.rioMLAcontainer {
margin-top: var(--aside-margin-top);
margin-right: var(--aside-margin-right);
margin-bottom: var(--aside-margin-bottom);
margin-left: var(--aside-margin-left);
border: var(--aside-border-width) var(--aside-border-style) var(--aside-border-color);
border-radius: var(--aside-border-radius);
background-color: var(--aside-background-color);
padding-top: var(--aside-padding-top);
padding-right: var(--aside-padding-right);
padding-bottom: var(--aside-padding-bottom);
padding-left: var(--aside-padding-left);
min-width: fit-content;
width: 30%;
}
aside.rioMLAcontainer p {
margin: var(--p-margin);
border: var(--p-border-width) var(--p-border-style) var(--p-border-color);
border-left: none;
border-radius: 0 var(--p-border-radius) var(--p-border-radius) 0;
padding: var(--p-padding);
background-color: var(--p-background-color);
min-width: fit-content;
border-right: 1em solid var(--p-background-color);
}
aside.rioMLAcontainer strong {
background-color: var(--p-border-color);
display: inline-block;
position: relative;
left: -1.25em;
border: var(--p-strong-label-border-width) var(--p-strong-label-border-style) var(--p-border-color);
border-radius: var(--p-border-radius) 0 0 var(--p-border-radius);
color: var(--p-strong-label-color);
}
aside.rioMLAcontainer section {
border: var(--section-border-width) var(--section-border-style) var(--section-border-color);
margin: var(--section-margin) 0em;
padding: var(--section-padding);
padding-left: calc(var(--section-padding) + 1em);
background-color: var(--section-background-color);
}
</style>A stand-alone work like a novel is self-contained. No title of container is given.
<aside class="rioMLAcontainer" aria-label="container">
<p><strong>Author:</strong>
<!-- Add your data below this line -->
King, Stephen.
</p>
<p><strong>Title of Source:</strong>
<!-- Add your data below this line -->
On Writing.
</p>
<section aria-label="sub container">
<p><strong>Title of Container:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Contributor:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Version:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Number:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Publisher:</strong>
<!-- Add your data below this line -->
Scribner,
</p>
<p><strong>Publication Date:</strong>
<!-- Add your data below this line -->
2000.
</p>
<p><strong>Location:</strong>
<!-- Add your data below this line -->
</p>
</section>
</aside>An article from a print journal is a work in one container. The article is contained in the journal.
<aside class="rioMLAcontainer" aria-label="container">
<p><strong>Author:</strong>
<!-- Add your data below this line -->
Queen, Douglas, and Keith Harding.
</p>
<p><strong>Title of Source:</strong>
<!-- Add your data below this line -->
"Societal Pandemic Burnout: A COVID Legacy."
</p>
<section aria-label="sub container">
<p><strong>Title of Container:</strong>
<!-- Add your data below this line -->
International Wound Journal,
</p>
<p><strong>Contributor:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Version:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Number:</strong>
<!-- Add your data below this line -->
vol. 17, no. 4,
</p>
<p><strong>Publisher:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Publication Date:</strong>
<!-- Add your data below this line -->
2020,
</p>
<p><strong>Location:</strong>
<!-- Add your data below this line -->
pp. 873-874.
</p>
</section>
</aside>An article from a print journal in an online database is a work in two containers. The database contains the journal, which in turn contains the article.
<aside class="rioMLAcontainer" aria-label="container">
<p><strong>Author:</strong>
<!-- Add your data below this line -->
Greer, Michael.
</p>
<p><strong>Title of Source:</strong>
<!-- Add your data below this line -->
"Civic Engagement and Inclusion through Art."
</p>
<section aria-label="sub container">
<p><strong>Title of Container:</strong>
<!-- Add your data below this line -->
National Civic Review,
</p>
<p><strong>Contributor:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Version:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Number:</strong>
<!-- Add your data below this line -->
vol. 109, no. 4,
</p>
<p><strong>Publisher:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Publication Date:</strong>
<!-- Add your data below this line -->
winter 2021,
</p>
<p><strong>Location:</strong>
<!-- Add your data below this line -->
pp. 30-34.
</p>
</section>
<section aria-label="sub container">
<p><strong>Title of Container:</strong>
<!-- Add your data below this line -->
JSTOR,
</p>
<p><strong>Contributor:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Version:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Number:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Publisher:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Publication Date:</strong>
<!-- Add your data below this line -->
</p>
<p><strong>Location:</strong>
<!-- Add your data below this line -->
https://www.jstor.org/stable/10.32543/naticivirevi.109.4.0030.
</p>
</section>
</aside>