amp-web-push-widget button.amp-subscribe { display: inline-flex; align-items: center; border-radius: 5px; border: 0; box-sizing: border-box; margin: 0; padding: 10px 15px; cursor: pointer; outline: none; font-size: 15px; font-weight: 500; background: #4A90E2; margin-top: 7px; color: white; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /** * Jetpack related posts */ /** * The Gutenberg block */ .jp-related-posts-i2 { margin-top: 1.5rem; } .jp-related-posts-i2__list { --hgap: 1rem; display: flex; flex-wrap: wrap; column-gap: var(--hgap); row-gap: 2rem; margin: 0; padding: 0; list-style-type: none; } .jp-related-posts-i2__post { display: flex; flex-direction: column; /* Default: 2 items by row */ flex-basis: calc( ( 100% - var(--hgap) ) / 2 ); } /* Quantity qeuries: see https://alistapart.com/article/quantity-queries-for-css/ */ .jp-related-posts-i2__post:nth-last-child(n+3):first-child, .jp-related-posts-i2__post:nth-last-child(n+3):first-child ~ * { /* From 3 total items on, 3 items by row */ flex-basis: calc( ( 100% - var(--hgap) * 2 ) / 3 ); } .jp-related-posts-i2__post:nth-last-child(4):first-child, .jp-related-posts-i2__post:nth-last-child(4):first-child ~ * { /* Exception for 4 total items: 2 items by row */ flex-basis: calc( ( 100% - var(--hgap) ) / 2 ); } .jp-related-posts-i2__post-link { display: flex; flex-direction: column; row-gap: 0.5rem; width: 100%; margin-bottom: 1rem; line-height: 1.2; } .jp-related-posts-i2__post-link:focus-visible { outline-offset: 2px; } .jp-related-posts-i2__post-img { order: -1; max-width: 100%; } .jp-related-posts-i2__post-defs { margin: 0; list-style-type: unset; } /* Hide, except from screen readers */ .jp-related-posts-i2__post-defs dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .jp-related-posts-i2__post-defs dd { margin: 0; } /* List view */ .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__list { display: block; } .jp-relatedposts-i2[data-layout="list"] .jp-related-posts-i2__post { margin-bottom: 2rem; } /* Breakpoints */ @media only screen and (max-width: 640px) { .jp-related-posts-i2__list { display: block; } .jp-related-posts-i2__post { margin-bottom: 2rem; } } /* Container */ #jp-relatedposts { display: none; padding-top: 1em; margin: 1em 0; position: relative; clear: both; } .jp-relatedposts::after { content: ''; display: block; clear: both; } /* Headline above related posts section, labeled "Related" */ #jp-relatedposts h3.jp-relatedposts-headline { margin: 0 0 1em 0; display: inline-block; float: left; font-size: 9pt; font-weight: 700; font-family: inherit; } #jp-relatedposts h3.jp-relatedposts-headline em::before { content: ""; display: block; width: 100%; min-width: 30px; border-top: 1px solid rgba(0,0,0,.2); margin-bottom: 1em; } #jp-relatedposts h3.jp-relatedposts-headline em { font-style: normal; font-weight: 700; } /* Related posts items (wrapping items) */ #jp-relatedposts .jp-relatedposts-items { clear: left; } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: -20px; } /* Related posts item */ #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { float: left; width: 33%; margin: 0 0 1em; /* Needs to be same as the main outer wrapper for Related Posts */ box-sizing: border-box; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post { padding-right: 20px; filter: alpha(opacity=80); -moz-opacity: .8; opacity: .8; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4), #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) { clear: both; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover .jp-relatedposts-post-title a { text-decoration: underline; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:hover { filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } /* Related posts item content */ #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title, #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time { font-size: 14px; line-height: 20px; margin: 0; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs { position:relative; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs a.jp-relatedposts-post-aoverlay { position:absolute; top:0; bottom:0; left:0; right:0; display:block; border-bottom: 0; } #jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts .jp-relatedposts-items time { margin-bottom: 0; } #jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title { text-transform: none; margin: 0; font-family: inherit; display: block; max-width: 100%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a { font-size: inherit; font-weight: 400; text-decoration: none; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-title a:hover { text-decoration: underline; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post span { display: block; max-width: 90%; overflow: hidden; text-overflow: ellipsis; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post span { height: auto; max-width: 100%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date, #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-context { opacity: .6; } /* Hide the date by default, but leave the element there if a theme wants to use css to make it visible. */ .jp-relatedposts-items .jp-relatedposts-post .jp-relatedposts-post-date { display: none; } /* Behavior when there are thumbnails in visual mode */ #jp-relatedposts .jp-relatedposts-items-visual div.jp-relatedposts-post-thumbs p.jp-relatedposts-post-excerpt { display: none; } /* Behavior when there are no thumbnails in visual mode */ #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs p.jp-relatedposts-post-excerpt { overflow: hidden; } #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post-nothumbs span { margin-bottom: 1em; } /* List Layout */ #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post { clear: both; width: 100%; } #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img { float: left; overflow: hidden; max-width: 33%; margin-right: 3%; } #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title { display: inline-block; max-width: 63%; } /* * Responsive */ @media only screen and (max-width: 640px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 50%; } #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n) { clear: left; } #jp-relatedposts .jp-relatedposts-items-visual { margin-right: 20px; } } @media only screen and (max-width: 320px) { #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post { width: 100%; clear: both; margin: 0 0 1em; } #jp-relatedposts .jp-relatedposts-list .jp-relatedposts-post img.jp-relatedposts-post-img, #jp-relatedposts .jp-relatedposts-list h4.jp-relatedposts-post-title { float: none; max-width: 100%; margin-right: 0; } } /* * Hide the related post section in the print view of a post */ @media print { .jp-relatedposts { display:none ; } } .amp-logo amp-img{width:371px} .amp-menu input{display:none;}.amp-menu li.menu-item-has-children ul{display:none;}.amp-menu li{position:relative;display:block;}.amp-menu > li a{display:block;} /* Inline styles */ div.acss138d7{clear:both;}div.acss0dcba{--relposth-columns:3;--relposth-columns_m:3;--relposth-columns_t:3;}div.acss7eda5{aspect-ratio:16/9;background:transparent url(https://i0.wp.com/jerz.setonhill.edu/wp-content/uploads/2025/05/6824ff171400002400a3fa3e.jpeg?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;}div.acss020fa{color:#333333;font-family:Arial Narrow;font-size:11px;height:45px;}div.acss8f56f{aspect-ratio:16/9;background:transparent url(https://i0.wp.com/jerz.setonhill.edu/wp-content/uploads/2025/05/msn-ai-brandon-hunter-useless2.jpg?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;}div.acssff828{aspect-ratio:16/9;background:transparent url(https://i0.wp.com/jerz.setonhill.edu/wp-content/uploads/2025/05/fact-check-leo-xiv-e1747405844692.jpg?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;}div.acss41db2{aspect-ratio:16/9;background:transparent url(https://i0.wp.com/jerz.setonhill.edu/wp-content/uploads/2025/05/Screenshot-2025-05-11-at-12.17.31%E2%80%AFAM.png?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;}div.acssec620{aspect-ratio:16/9;background:transparent url(https://i0.wp.com/jerz.setonhill.edu/wp-content/uploads/2025/05/Screenshot-2025-05-07-at-10.46.51%E2%80%AFAM.png?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;}div.acss60ed4{aspect-ratio:16/9;background:transparent url(https://i0.wp.com/jerz.setonhill.edu/wp-content/uploads/2025/05/Screenshot-2025-05-05-at-11.30.56%E2%80%AFAM-1.png?resize=150%2C150&ssl=1) no-repeat scroll 0% 0%;height:150px;max-width:150px;} .icon-widgets:before {content: "\e1bd";}.icon-search:before {content: "\e8b6";}.icon-shopping-cart:after {content: "\e8cc";}
Categories: CybercultureEducationLiteracyTechnologyWriting

A Beginner’s Guide to HTML & CSS

A Beginner’s Guide to HTML & CSSA Beginner’s Guide to HTML & CSS

Filing this wonderful resource for the next time I introduce students to the subject.

Before beginning our journey to learn HTML and CSS it is important to understand the differences between the two languages, their syntax, and some common terminology.

As an overview, HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance.

To put this into laymen terms, HTML determines the structure and meaning of content on a web page while CSS determines the style and appearance of this content. The two languages are independent of one another. CSS should not reside within an HTML document and vice versa.

—Terminology, Syntax, & Introduction – A Beginner's Guide to HTML & CSS.

Similar:

'Most Transparent’ White House In History Keeps Majority Of Trump’s Remarks Secret

Microsoft Publishes Garbled AI Article Calling Tragically Deceased NBA Player "Useless"

Stop sharing those unsourced memes about "be woke" and "God doesn't need soldiers" -- here...

Pope Leo XIV names AI one of the reasons for his papal name

This 1960s teenager knew the neighborhood that inspired August Wilson’s plays

A.I. Is Getting More Powerful, but Its Hallucinations Are Getting Worse

Post was last modified on 1 Aug 2013 10:21 am

View Comments

Leave a Comment
Share
Published by
Dennis G. Jerz
12 years ago

    Related Post

  • ‘Most Transparent’ White House In History Keeps Majority Of Trump’s Remarks Secret

    On the White House website, there is no official record of about 80% of President…

  • Microsoft Publishes Garbled AI Article Calling Tragically Deceased NBA Player “Useless”

    This is what we have to look forward to, as a torrent of AI-generated slop…

  • Stop sharing those unsourced memes about “be woke” and “God doesn’t need soldiers” — here’s what Pope Leo XIV is actually saying.

    Pope Leo XIV, in his first address to journalists at the Vatican, called for the…

Recent Posts

The Missing Will, by Agatha Christie (WAOB Audio Theatre)

I had a great time playing Hastings in this audio adaptation of a classic Agatha…

9 hours ago

‘Most Transparent’ White House In History Keeps Majority Of Trump’s Remarks Secret

On the White House website, there is no official record of about 80% of President…

16 hours ago

Microsoft Publishes Garbled AI Article Calling Tragically Deceased NBA Player “Useless”

This is what we have to look forward to, as a torrent of AI-generated slop…

3 days ago

The Big Boy Graveyard

On road trips in my youth, watching the Bob's Big Boy signs transition to Shoney's…

3 days ago

Stop sharing those unsourced memes about “be woke” and “God doesn’t need soldiers” — here’s what Pope Leo XIV is actually saying.

Pope Leo XIV, in his first address to journalists at the Vatican, called for the…

5 days ago

A Simple Investigation #StarTrek #DS9 Rewatch (Season 5, Episode 17) Odo falls for a femme fatale

Rewatching ST:DS9 A duo of knobby-faced macguffin-hunters, bantering like the crooks from Home Alone, rough…

6 days ago