Reusable Styles

Developer
Keith Pickering
Size
11,486 Kb
Views
64,768
  1. Reusable Styles Previews
  2. Reusable Styles HTML Codes
  3. Reusable Styles CSS Codes

How do I make an reusable styles?

For other pens. What is a reusable styles? How do you make a reusable styles? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Reusable Styles Previews
IQ Test

Reusable Styles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Reusable Styles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/http___codepen_io_keithpi.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
/**
* Colors from Flat UI
* Source: http://flatuicolors.com
*/
/**
* Brand Colors
*/
/**
* Set up reusable colors
*/
/**
* Grid Settings
*/
/**
* Media Query Breakpoints
*/
* { box-sizing: border-box;
}
body { font-family: "Cantarell"; font-size: 100%; line-height: 1.5; background-color: #e7e7e7; color: #444;
}
.container { width: 70%; margin: 0 auto; padding: 48px;
}
a { text-decoration: none; color: #2ecc71; transition: all 0.25s;
}
a:hover, a:focus { color: #62d995;
}
/**
* This can be extended to anything to make it get slightly bigger on hover,
* which is a pretty commonly desired effect
*/
.big-on-hover { transform: scale(1, 1);
}
.big-on-hover:hover { transform: scale(1.2, 1.2);
}
/**
* Reusable single-direction margin declaration
*/
.margin, h1, h2, h3, h4, h5, h6, p, .island, .media, .flag, .nav { margin-top: 0; margin-bottom: 24px;
}
.margin:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, .island:last-child, .media:last-child, .flag:last-child, .nav:last-child { margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 { font-family: "Fjalla One";
}
h1, .h1 { font-size: 2.4rem;
}
h2, .h2 { font-size: 2rem;
}
h3, .h3 { font-size: 1.5rem;
}
h4, .h4 { font-size: 1.25rem;
}
h5, .h5 { font-size: 1rem;
}
h6, .h6 { font-size: .75rem;
}
.xl { font-size: 4rem;
}
.xxl { font-size: 8rem;
}
h2, h3, h4, h5, h6 { color: #666;
}
h3, h4, h5, h6 { font-weight: 400;
}
.island { padding: 24px;
}
/**
* Media Object
* Source: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
*/
.media,
.media__image,
.media__body { overflow: hidden;
}
.media__image { float: left;
}
.media__image > img { display: block; max-width: none;
}
.media--rev .media__image { float: right;
}
/**
* Flag Object
* Source: http://csswizardry.com/2013/05/the-flag-object/
*/
.flag { display: table; width: 100%;
}
.flag__image,
.flag__body { display: table-cell; vertical-align: middle;
}
.flag--top .flag__image, .flag--top
.flag__body { vertical-align: top;
}
.flag--bottom .flag__image, .flag--bottom
.flag__body { vertical-align: bottom;
}
.flag__image { padding-right: 24px;
}
.flag__image > img { display: block; max-width: none;
}
.flag--rev .flag__image { padding-right: 0; padding-left: 24px;
}
.flag__body { width: 100%;
}
/**
* Nav Abstraction
* Source: http://csswizardry.com/2011/09/the-nav-abstraction/
*/
.nav { list-style: none; margin-left: 0; padding-left: 0;
}
.nav > li,
.nav > li > a { display: inline-block;
}
.module h2 { border-bottom: 1px solid #ccd4d5;
}
.module h3 { text-transform: uppercase;
}
.module h4 { font-style: italic;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <article class="module island">
<h1>Header 1</h1> <p>OK, if everyone's finished being stupid. Soon enough. I could if you hadn't turned on the light and shut off my stereo. Aww, it's true. I've been hiding it for so long.</p>
<h2>Header 2</h2> <p>Oh, how I wish I could believe or understand that! There's only one reasonable course of action now: kill Flexo! You wouldn't. Ask anyway! Tell her she looks thin. Yes, I saw. You were doing well, until everyone died. As an interesting side note, as a head without a body, I envy the dead. Now what?</p>
<h3>Header 3</h3> <p>Have you ever tried just turning off the TV, sitting down with your children, and hitting them? Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man. You're going back for the Countess, aren't you? Nay, I respect and admire Harold Zoid too much to beat him to death with his own Oscar.</p>
<h4>Header 4</h4> <p>Oh sure! Blame the wizards! Yes! In your face, Gandhi! Now what?</p>
<h5>Header 5</h5> <p>Ugh, it's filthy! Why not create a National Endowment for Strip Clubs while we're at it? I was all of history's great robot actors - Acting Unit 0.8; Thespomat; David Duchovny! Oh right. I forgot about the battle. Five hours? Aw, man! Couldn't you just get me the death penalty? Leela, are you alright? You got wanged on the head. Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd.</p>
<h6>Header 6</h6> <p>Robot 1-X, save my friends! And Zoidberg! Throw her in the brig. Leela, are you alright? You got wanged on the head.</p>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Reusable Styles - Script Codes CSS Codes

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
@import url(http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic);
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
/**
* Colors from Flat UI
* Source: http://flatuicolors.com
*/
/**
* Brand Colors
*/
/**
* Set up reusable colors
*/
/**
* Grid Settings
*/
/**
* Media Query Breakpoints
*/
* { box-sizing: border-box;
}
body { font-family: "Cantarell"; font-size: 100%; line-height: 1.5; background-color: #e7e7e7; color: #444;
}
.container { width: 70%; margin: 0 auto; padding: 48px;
}
a { text-decoration: none; color: #2ecc71; transition: all 0.25s;
}
a:hover, a:focus { color: #62d995;
}
/**
* This can be extended to anything to make it get slightly bigger on hover,
* which is a pretty commonly desired effect
*/
.big-on-hover { transform: scale(1, 1);
}
.big-on-hover:hover { transform: scale(1.2, 1.2);
}
/**
* Reusable single-direction margin declaration
*/
.margin, h1, h2, h3, h4, h5, h6, p, .island, .media, .flag, .nav { margin-top: 0; margin-bottom: 24px;
}
.margin:last-child, h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child, .island:last-child, .media:last-child, .flag:last-child, .nav:last-child { margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6 { font-family: "Fjalla One";
}
h1, .h1 { font-size: 2.4rem;
}
h2, .h2 { font-size: 2rem;
}
h3, .h3 { font-size: 1.5rem;
}
h4, .h4 { font-size: 1.25rem;
}
h5, .h5 { font-size: 1rem;
}
h6, .h6 { font-size: .75rem;
}
.xl { font-size: 4rem;
}
.xxl { font-size: 8rem;
}
h2, h3, h4, h5, h6 { color: #666;
}
h3, h4, h5, h6 { font-weight: 400;
}
.island { padding: 24px;
}
/**
* Media Object
* Source: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
*/
.media,
.media__image,
.media__body { overflow: hidden;
}
.media__image { float: left;
}
.media__image > img { display: block; max-width: none;
}
.media--rev .media__image { float: right;
}
/**
* Flag Object
* Source: http://csswizardry.com/2013/05/the-flag-object/
*/
.flag { display: table; width: 100%;
}
.flag__image,
.flag__body { display: table-cell; vertical-align: middle;
}
.flag--top .flag__image, .flag--top
.flag__body { vertical-align: top;
}
.flag--bottom .flag__image, .flag--bottom
.flag__body { vertical-align: bottom;
}
.flag__image { padding-right: 24px;
}
.flag__image > img { display: block; max-width: none;
}
.flag--rev .flag__image { padding-right: 0; padding-left: 24px;
}
.flag__body { width: 100%;
}
/**
* Nav Abstraction
* Source: http://csswizardry.com/2011/09/the-nav-abstraction/
*/
.nav { list-style: none; margin-left: 0; padding-left: 0;
}
.nav > li,
.nav > li > a { display: inline-block;
}
.module h2 { border-bottom: 1px solid #ccd4d5;
}
.module h3 { text-transform: uppercase;
}
.module h4 { font-style: italic;
}
Reusable Styles - Script Codes
Reusable Styles - Script Codes
Home Page Home
Developer Keith Pickering
Username keithpickering
Uploaded August 10, 2022
Rating 3
Size 11,486 Kb
Views 64,768
Do you need developer help for Reusable Styles?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keith Pickering (keithpickering) Script Codes
Name
Delicious SASS Buttons
Metro Interactive Live Tiles
A Pen by Keith Pickering
Windows 8 Start Screen
Image with inset shadow
Sliding Navigation Menu
Windows 10 Concept
Notifications
CSS Business Card
Easy Container-Breaking Sidebar
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!