Created
July 18, 2024 10:37
-
-
Save OnesimusUnbound/78b375c59d6e53ad1b6914741c7f18b3 to your computer and use it in GitHub Desktop.
Classless CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Basic reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| padding: 20px; | |
| background-color: #f7f7f7; | |
| color: #333; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| background-color: #fff; | |
| border-radius: 5px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| /* Headings */ | |
| h1 { | |
| font-size: 2.5em; | |
| margin-bottom: 20px; | |
| } | |
| h2 { | |
| font-size: 2em; | |
| margin-bottom: 18px; | |
| } | |
| h3 { | |
| font-size: 1.75em; | |
| margin-bottom: 16px; | |
| } | |
| h4 { | |
| font-size: 1.5em; | |
| margin-bottom: 14px; | |
| } | |
| h5 { | |
| font-size: 1.25em; | |
| margin-bottom: 12px; | |
| } | |
| h6 { | |
| font-size: 1em; | |
| margin-bottom: 10px; | |
| } | |
| /* Paragraphs */ | |
| p { | |
| margin-bottom: 20px; | |
| } | |
| /* Links */ | |
| a { | |
| color: #3498db; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Lists */ | |
| ul, ol { | |
| margin-bottom: 20px; | |
| padding-left: 20px; | |
| } | |
| li { | |
| margin-bottom: 10px; | |
| } | |
| /* Tables */ | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-bottom: 20px; | |
| } | |
| thead { | |
| background-color: #999; | |
| color: #fff; | |
| } | |
| th, td { | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| text-align: left; | |
| } | |
| /* Forms */ | |
| input, textarea, select, button { | |
| display: block; | |
| width: 100%; | |
| padding: 10px; | |
| margin-bottom: 20px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| } | |
| button { | |
| width: auto; | |
| background-color: #3498db; | |
| color: #fff; | |
| border: none; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| background-color: #2980b9; | |
| } | |
| /* Fieldset */ | |
| fieldset { | |
| border: 1px solid #ccc; | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| border-radius: 5px; | |
| } | |
| legend { | |
| padding: 0 10px; | |
| font-weight: bold; | |
| } | |
| /* Blockquotes */ | |
| blockquote { | |
| margin: 20px 0; | |
| padding: 10px 20px; | |
| background-color: #f9f9f9; | |
| border-left: 5px solid #ccc; | |
| color: #666; | |
| } | |
| /* Code */ | |
| code { | |
| background-color: #f4f4f4; | |
| padding: 2px 4px; | |
| border-radius: 3px; | |
| } | |
| pre { | |
| background-color: #f4f4f4; | |
| padding: 20px; | |
| border-radius: 5px; | |
| overflow: auto; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Classless CSS Example</title> | |
| <link rel="stylesheet" href="base.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Main Heading (h1)</h1> | |
| <h2>Subheading (h2)</h2> | |
| <h3>Section Heading (h3)</h3> | |
| <h4>Subsection Heading (h4)</h4> | |
| <h5>Smaller Heading (h5)</h5> | |
| <h6>Smallest Heading (h6)</h6> | |
| </header> | |
| <main> | |
| <p>This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque aliquet odio, id pharetra eros sagittis nec.</p> | |
| <a href="#">This is a link</a> | |
| <ul> | |
| <li>Unordered list item 1</li> | |
| <li>Unordered list item 2</li> | |
| <li>Unordered list item 3</li> | |
| </ul> | |
| <ol> | |
| <li>Ordered list item 1</li> | |
| <li>Ordered list item 2</li> | |
| <li>Ordered list item 3</li> | |
| </ol> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Header 1</th> | |
| <th>Header 2</th> | |
| <th>Header 3</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Data 1</td> | |
| <td>Data 2</td> | |
| <td>Data 3</td> | |
| </tr> | |
| <tr> | |
| <td>Data 4</td> | |
| <td>Data 5</td> | |
| <td>Data 6</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <form action="#"> | |
| <fieldset> | |
| <legend>Personal Information</legend> | |
| <label for="name">Name:</label> | |
| <input type="text" id="name" name="name"> | |
| <label for="message">Message:</label> | |
| <textarea id="message" name="message"></textarea> | |
| </fieldset> | |
| <label for="option">Choose an option:</label> | |
| <select id="option" name="option"> | |
| <option value="1">Option 1</option> | |
| <option value="2">Option 2</option> | |
| <option value="3">Option 3</option> | |
| </select> | |
| <button type="submit">Submit</button> | |
| </form> | |
| <blockquote> | |
| This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |
| </blockquote> | |
| <p>This is a paragraph with <code>inline code</code>.</p> | |
| <pre> | |
| <code> | |
| This is a code block. | |
| Line 1 | |
| Line 2 | |
| Line 3 | |
| </code> | |
| </pre> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Use this to have a basic idea on how classless css works. If you need one for your project, just use open source libraries, like https://picocss.com/docs/classless