actualNoteContentPart: # Add the custom stylesheet as a file hosted on your blog
  To publish an embedded note with Medium-inspired styling, you need a stylesheet file that exists on your blog's domain with the proper CSS rules. Here is the content of the stylesheet you will be adding:
  
  ```
  /* Extracted from Medium in 2020 */.ample-editor.readonly {  width: 100%;  margin: 0 auto;  padding: 35px 20px 25px;  border-top: 1px solid #e0e4eb; /* $default-border-color */  line-height: 1.5;} @media only screen and (min-width: 600px) {  .ample-editor.readonly {    width: 95%;    max-width: 750px;    padding-left: 0;    padding-right: 0;  }} .ample-editor.readonly .ProseMirror {  font-family: Georgia, Helvetica, Arial, "Helvetica Neue", sans-serif; /* $blog-font-family */  font-weight: 400;  font-size: 18px;  line-height: 1.5;  white-space: normal;} @media only screen and (min-width: 600px) {  .ample-editor.readonly .ProseMirror {    font-size: 21px;  }} .ample-editor.readonly h1, h2, h3, h4, h1.heading, h2.heading, h3.heading, h4.heading {  font-family: Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif;  font-weight: 600;  letter-spacing: -0.022em;  line-height: 1.18;} .ample-editor.readonly h1, h1.heading {  font-size: 26px;} .ample-editor.readonly h2, h2.heading {  font-size: 24px;} .ample-editor.readonly h3, h3.heading {  font-size: 21px;} .ample-editor.readonly h4, h4.heading {  font-size: 18px;} .ample-editor.readonly b, strong {  font-weight: 600;} .ample-editor.readonly p, .paragraph {  margin: 0; /* Since AN inserts duplicate p tags between paragraph */  letter-spacing: -0.004em;} .ample-editor.readonly blockquote {  border-left: 3px solid #e0e4eb;  padding-left: 20px;  color: #757575;} .ample-editor.readonly ul li {  display: block; /* Default display for AN is "list-item" which duplicates the li's disc for reasons WBH doesn't understand */  margin-top: 1.05em;  margin-left: 15px;  margin-bottom: -0.46em;} .ample-editor.readonly a.link {  display: inline;  align-items: center;} .ample-editor.readonly a.link > span {  margin-right: 0;} .ample-editor.readonly a.link > .icon {  position: relative;  top: 5px;  height: 22px;  margin-left: 0;} .ample-editor.readonly .promo-banner {  width: 100%;  margin: 0 auto;  padding: 35px 20px 25px;  line-height: 1.5;} @media only screen and (min-width: 600px) {  .promo-banner {    width: 95%;    margin: 0 auto;    max-width: 750px;  }}
  ```
  
  [You can also download this stylesheet as a file from GitClear](https://www.gitclear.com/assets/amplenote/blog_style.css) . 
  
  This stylesheet content needs to be uploaded to your blog host. This can be accomplished by using the File Manager or an FTP/SFTP tool provided by your host. The exact path through which a stylesheet gets uploaded will vary by domain host, but we'll review a typical upload process in the following section.
  
  ### CSS file for blogs with dark themes
  If you're looking for a stylesheet that is dark-background friendly, find an example [here](https://public.amplenote.com/5egFrDKEMk7akZMzgHTJ218n) .
processedNoteContent: ---
  title: Use case: Create your own CSS styled blog with ...
  headers: # Add the custom stylesheet as a file hosted on your blog
  ---
  Add the custom stylesheet as a file hosted on your blog
  To publish an embedded note with Medium-inspired styling, you need a stylesheet file that exists on your blog's domain with the proper CSS rules. Here is the content of the stylesheet you will be adding: /* Extracted from Medium in 2020 */.ample-editor.readonly {  width: 100%;  margin: 0 auto;  padding: 35px 20px 25px;  border-top: 1px solid #e0e4eb; /* $default-border-color */  line-height: 1.5;} @media only screen and (min-width: 600px) {  .ample-editor.readonly {    width: 95%;    max-width: 750px;    padding-left: 0;    padding-right: 0;  }} .ample-editor.readonly .ProseMirror {  font-family: Georgia, Helvetica, Arial, "Helvetica Neue", sans-serif; /* $blog-font-family */  font-weight: 400;  font-size: 18px;  line-height: 1.5;  white-space: normal;} @media only screen and (min-width: 600px) {  .ample-editor.readonly .ProseMirror {    font-size: 21px;  }} .ample-editor.readonly h1, h2, h3, h4, h1.heading, h2.heading, h3.heading, h4.heading {  font-family: Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif;  font-weight: 600;  letter-spacing: -0.022em;  line-height: 1.18;} .ample-editor.readonly h1, h1.heading {  font-size: 26px;} .ample-editor.readonly h2, h2.heading {  font-size: 24px;} .ample-editor.readonly h3, h3.heading {  font-size: 21px;} .ample-editor.readonly h4, h4.heading {  font-size: 18px;} .ample-editor.readonly b, strong {  font-weight: 600;} .ample-editor.readonly p, .paragraph {  margin: 0; /* Since AN inserts duplicate p tags between paragraph */  letter-spacing: -0.004em;} .ample-editor.readonly blockquote {  border-left: 3px solid #e0e4eb;  padding-left: 20px;  color: #757575;} .ample-editor.readonly ul li {  display: block; /* Default display for AN is "list-item" which duplicates the li's disc for reasons WBH doesn't understand */  margin-top: 1.05em;  margin-left: 15px;  margin-bottom: -0.46em;} .ample-editor.readonly a.link {  display: inline;  align-items: center;} .ample-editor.readonly a.link > span {  margin-right: 0;} .ample-editor.readonly a.link > .icon {  position: relative;  top: 5px;  height: 22px;  margin-left: 0;} .ample-editor.readonly .promo-banner {  width: 100%;  margin: 0 auto;  padding: 35px 20px 25px;  line-height: 1.5;} @media only screen and (min-width: 600px) {  .promo-banner {    width: 95%;    margin: 0 auto;    max-width: 750px;  }}
  [You can also download this stylesheet as a file from GitClear](https://www.gitclear.com)`
   . This stylesheet content needs to be uploaded to your blog host. This can be accomplished by using the File Manager or an FTP/SFTP tool provided by your host. The exact path through which a stylesheet gets uploaded will vary by domain host, but we'll review a typical upload process in the following section. 
  CSS file for blogs with dark themes
  If you're looking for a stylesheet that is dark-background friendly, find an example [here](https://public.amplenote.com)`
   .
noteTitle: Use case: Create your own CSS styled blog with Amplenote to replace Wordpress