Skip to content

Instantly share code, notes, and snippets.

@Oluwasetemi

Oluwasetemi/index.css

Last active January 11, 2025 00:07
Show Gist options
  • Save Oluwasetemi/9905d53d4aed39a364ccb7fe7d0cac13 to your computer and use it in GitHub Desktop.
Save Oluwasetemi/9905d53d4aed39a364ccb7fe7d0cac13 to your computer and use it in GitHub Desktop.
Download ZIP
Code used during Tinyuka CSS Teaching
Raw
index.css
/*
CSS Reset
*/
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
* {
margin: 0;
}
body {
/* 3. Add accessible line-height */
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* 5. Improve media defaults */
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input,
button,
textarea,
select {
font: inherit;
}
/* 7. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-wrap: balance;
}
/*
9. Create a root stacking context
*/
#root,
#__next {
isolation: isolate;
}
/* END OF CSS RESET */
:root {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
color: red;
font-size: 18px;
/* display: flex; */
}
div.my-css-rule1 {
background: red;
color: beige;
font-size: 1.2rem;
}
span#container-wrapper {
color: red;
font-size: 36px;
}
[href] {
color: blue;
}
/* attribute, =, ^, $, ~, |,* */
[href="https://altschoolafrica.com"]
{
color: rebeccapurple;
}
[href^="https"] {
color: rebeccapurple;
}
[href$=".io"] {
color: rebeccapurple;
}
[href*="altschool.dev"] {
color: rebeccapurple;
}
[href~="altschool"] {
color: fuchsia;
}
[href|="oluwasetemi-team.dev"] {
color: brown;
}
[href]:visited {
text-decoration: none;
}
/* pseudo classes */
/* pseudo element */
p::before {
content: "✅";
display: flex;
}
p::after {
content: "🚀";
display: flex;
}
p::first-line,
p::first-letter {
font-size: 46px;
font-weight: 900;
}
p::selection {
background: tomato;
color: white;
}
p span {
text-decoration: underline;
}
h1 + p {
margin-top: 0;
border: 1px solid green;
color: blueviolet !important;
}
h1 ~ p {
color: blue;
}
.content {
padding: 20px;
.title {
color: darkkhaki;
}
&:hover {
background-color: lightblue;
}
}
div.content {
box-sizing: border-box;
max-width: 500px;
padding: 20px;
border: 10px solid black;
margin: 25px auto;
}
ul > li,
ol > li {
list-style: none;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intro to CSS with Ramon</title>
<style>
</style>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="content">
<h1>Intro to CSS with Ramon</h1>
<nav class="menu">
<ul>
<li><a href="./tinyuka-normalize.html">Normalize</a></li>
<li><a href="./tinyuka-reset.html">Reset</a></li>
<li><a href="./tinyuka.html">Ordinary</a></li>
</ul>
</nav>
<p title="a para" lang="en" >This is a paragraph with internal CSS.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis at cumque ut explicabo! Nobis corrupti quos, natus dolore mollitia laboriosam esse ad id neque odit pariatur eligendi molestias tempora. Sit.</p>
<div class="my-css-rule1">
I am nobody, nobody is perfect, therefore I am perfect.
</div>
<div>
<span id="container-wrapper">
You can style me using my id value which is container-wrapper.
</span>
</div>
<nav class="title" >
<ul>
<li>Qwerty</li>
</ul>
</nav>
<section>
<a href="https://altschoolafrica.com">
You can style me using my attribute which is href.
</a>
<a href="https://oluwasetemi.dev">
You can style me using my attribute which is href.
</a>
<a href="altschool">
I was styled with tilda ~ and attribute selector.
</a>
<a href="oluwasetemi-team.dev-123">
I was styled with
</a>
<p>
AltSchool Africa is a tech school that offers varieties of tech courses like
<span>Frontend engineering</span>, <span>Backend engineering</span> and newly
added <span>Cybersecurity</span> online.
</p>
</section>
<section>
<ol>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
</ol>
</section>
</div>
</body>
</html>
Raw
tinyuka-normalize.css
/*
Normalize added to index.html
*/
div.wrapper {
max-width: 750px;
margin: 0 auto;
padding: 0 1rem;
h1 {
text-align: center;
color: rgb(255 0 0);
}
}
html {
/* declaration */
--red-hue: 0deg;
--red-sat: 100%;
--red-lit: 50%;
--red: hsl(
var(--red-hue)
var(--red-sat)
var(--red-lit)
);
--dark-red: hsl(
var(--red-hue)
var(--red-sat)
calc(var(--red-lit) - 20%)
);
--transparent-red: hsl(
var(--red-hue)
var(--red-sat)
var(--red-lit) / 0.5
);
--soft-red: hsl(
var(--red-hue)
calc(var(--red-sat) - 30%)
calc(var(--red-lit) + 10%)
);
}
Raw
tinyuka-normalize.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teaching My Tinyuka Friends CSS</title>
<link rel="stylesheet" href="./normalize.css">
<link rel="stylesheet" href="./tinyuka-normalize.css">
</head>
<body>
<div class="wrapper">
<h1>Hello Tinyuka 2024/2025 Set</h1>
<p style="color: var(--red)">This text is red.</p>
<p style="color: var(--dark-red)">This text is darker.</p>
<p style="color: var(--transparent-red)">This text is transparent.</p>
<p style="color: var(--soft-red)">This text is softer.</p>
</div>
</body>
</html>
Raw
tinyuka-reset.css
/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
}
/* 2. Remove default margin */
* {
margin: 0;
}
body {
/* 3. Add accessible line-height */
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
}
/* 5. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/* 6. Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}
/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
/*
9. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}
div.wrapper {
max-width: 750px;
margin: 0 auto;
padding: 0 1rem;
h1 {
text-align: center;
color: rgb(255 0 0);
}
}
html {
/* declaration */
--red-hue: 0deg;
--red-sat: 100%;
--red-lit: 50%;
--red: hsl(
var(--red-hue)
var(--red-sat)
var(--red-lit)
);
--dark-red: hsl(
var(--red-hue)
var(--red-sat)
calc(var(--red-lit) - 20%)
);
--transparent-red: hsl(
var(--red-hue)
var(--red-sat)
var(--red-lit) / 0.5
);
--soft-red: hsl(
var(--red-hue)
calc(var(--red-sat) - 30%)
calc(var(--red-lit) + 10%)
);
}
Raw
tinyuka-reset.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teaching My Tinyuka Friends CSS</title>
<!-- <link rel="stylesheet" href="./normalize.css"> -->
<link rel="stylesheet" href="./tinyuka-reset.css">
</head>
<body>
<div class="wrapper">
<h1>Hello Tinyuka 2024/2025 Set</h1>
<p style="color: var(--red)">This text is red.</p>
<p style="color: var(--dark-red)">This text is darker.</p>
<p style="color: var(--transparent-red)">This text is transparent.</p>
<p style="color: var(--soft-red)">This text is softer.</p>
</div>
</body>
</html>
Raw
tinyuka.css
div.wrapper {
max-width: 750px;
margin: 0 auto;
padding: 0 1rem;
h1 {
text-align: center;
color: rgb(255 0 0);
}
}
html {
/* declaration */
--red-hue: 0deg;
--red-sat: 100%;
--red-lit: 50%;
--red: hsl(
var(--red-hue)
var(--red-sat)
var(--red-lit)
);
--dark-red: hsl(
var(--red-hue)
var(--red-sat)
calc(var(--red-lit) - 20%)
);
--transparent-red: hsl(
var(--red-hue)
var(--red-sat)
var(--red-lit) / 0.5
);
--soft-red: hsl(
var(--red-hue)
calc(var(--red-sat) - 30%)
calc(var(--red-lit) + 10%)
);
}
Raw
tinyuka.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teaching My Tinyuka Friends CSS</title>
<!-- <link rel="stylesheet" href="./normalize.css"> -->
<link rel="stylesheet" href="./tinyuka.css">
</head>
<body>
<div class="wrapper">
<h1>Hello Tinyuka 2024/2025 Set</h1>
<p style="color: var(--red)">This text is red.</p>
<p style="color: var(--dark-red)">This text is darker.</p>
<p style="color: var(--transparent-red)">This text is transparent.</p>
<p style="color: var(--soft-red)">This text is softer.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment