Skip to content

Instantly share code, notes, and snippets.

@coffeedacode

coffeedacode/gist-reveal.it-slides.html

Forked from ryanj/gist-reveal.it-slides.html
Last active September 30, 2024 14:10
Show Gist options
  • Save coffeedacode/0cb28983eebd5ab5c140b57d3e87e61c to your computer and use it in GitHub Desktop.
Save coffeedacode/0cb28983eebd5ab5c140b57d3e87e61c to your computer and use it in GitHub Desktop.
Download ZIP
Gist-powered Revealjs slideshow presentations http://gist-reveal.it
Raw
gist-reveal.it-slides.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fundamentals</title>
<link rel="stylesheet" href="https://unpkg.com/reveal.js/dist/reveal.css">
<link rel="stylesheet" href="https://unpkg.com/reveal.js/dist/theme/black.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- Slide 3: CSS Syntax and Selectors -->
<section data-transition="slide">
<h2>CSS Syntax and Selectors</h2>
<!-- Section 1: Basic Syntax -->
<section data-transition="slide">
<h3>Basic Syntax</h3>
<p>A CSS rule consists of a selector and a declaration block.</p>
<pre><code>selector {
property: value;
}</code></pre>
</section>
<!-- Section 2: Common Selectors -->
<section data-transition="slide">
<h3>Common Selectors</h3>
<div style="display: flex; justify-content: space-around;">
<div>
<h4>Element Selector</h4>
<pre><code>p {
color: blue;
}</code></pre>
<p style="color: blue;">This is a paragraph.</p>
</div>
<div>
<h4>Class Selector</h4>
<pre><code>.class-name {
font-size: 16px;
}</code></pre>
<p class="class-name" style="font-size: 16px;">This is a paragraph with class.</p>
</div>
<div>
<h4>ID Selector</h4>
<pre><code>#id-name {
margin: 10px;
}</code></pre>
<p id="id-name" style="margin: 10px; border: 1px solid;">This is a paragraph with ID.</p>
</div>
</div>
</section>
<!-- Section 3: Grouping Selectors -->
<section data-transition="slide">
<h3>Grouping Selectors</h3>
<p>Apply the same styles to multiple elements:</p>
<pre><code>h1, h2, h3 {
color: red;
}</code></pre>
<h1 style="color: red;">Heading 1</h1>
<h2 style="color: red;">Heading 2</h2>
<h3 style="color: red;">Heading 3</h3>
</section>
</section>
</div>
</div>
<script src="https://unpkg.com/reveal.js/dist/reveal.js"></script>
<script>
Reveal.initialize({
transition: 'slide', // Default transition for horizontal slides
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment