Styling Divs | Notion

Block level element. Each new div is rendered on a new line.
A "division," or section, of content within an HTML page.
Used to group elements to style with CSS or manipulate with JS.

<div>
   <p>Content</p>
   <p>Content</p>
</div>

1. Styling `div`s with CSS

Assign id or class to change their with CSS:

<div id="header">
   <h1>Main Heading</h1>
</div>
<div class="sub-content">
   <p>Some more content</p>
</div>

2. Styling `div`s: Example

.special-quote {
  text-align: right;
  color: purple;
  text-decoration:underline;
}
<div class="special-quote">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<p>Magna aliqua. Ut enim ad minim veniam.</p>
<p>Quis nostrud exercitation ullamco.</p>

Sample Code: `div` Elements

A page divided into divs might look like this:

<!doctype html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <div id="header">
      <h1>My Page Title</h1>
    </div>
    <div id="content">
      <p>The main content</p>
    </div>
    <div id="sidebar">
      <p>Some stuff in a sidebar</p>
    </div>
    <div id="footer">
      <p>Copyright me</p>
    </div>
  </body>
</html>

Let's Develop It