January 30, 2024 by admin
HTML/CSS Reference for DMET 155/355
Span and Div
HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all. They are used extensively in conjunction with CSS.
They are used to group together a chunk of HTML and hook some information onto that chunk, most commonly with the attributes class and id to associate the element with a class or id CSS selector.
The difference between span and div is that a span element is in-line and usually used for small snippets of HTML inside a line (such as inside a paragraph), whereas a div (division) element is block-line (which is equivalent to having a line-break before and after it) and used to group larger snippets of code.
<div id="scissors">
<p>This is <span class="paper">crazy</span></p>
</div>
div, and especially span, shouldn’t be used that often. Whenever there is a sensible alternative that should be used instead. For example, if you want to emphasize the word “crazy” and the class “paper” is adding italics for visual emphasis, then, for richer, more meaningful content, the code might look like this:
<div id="scissors">
<p>This is <em class="paper">crazy</em></p>
</div>
While they are not replacements for the div tag, HTML 5 introduces several tags used for grouping blocks of code together and adding meaning at the same time. Such as article, header, footer.
CSS Cheat Sheet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index Page</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,400&display=swap');
.wrapper {
font-family: 'Montserrat', sans-serif;
width: 400px;
height: 800px;
border: solid 2px red;
margin: auto;
text-align: center;
}
ul, li {
text-align: center;
list-style-type: none;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Intro to Web Assignments</h1>
<br><br><br><br>
<ul>
<li><a href="content.html" target="_blank">Content</a></li>
<li><a href="start.html" target="_blank">start</a></li>
</ul>
<img src="images/nd_logo_blog-2.png">
</div>
</body>
</html>See the Pen Layouts and the Box Model by Christina Truong (@christinatruong) on CodePen.
The following is some code I created on codepen.io. It includes div nesting, which we covered in class. The “pen” also has advanced CSS to make each div stand out.
From: https://www.htmldog.com/