Introduction to CSS

Styling webpages using CSS

Xaltius Pvt Ltd [Date] Software Engineering

 Learner’s Guide – Introduction to CSS

DOCUMENT VERSION CONTROL RECORD

Version Effective Date of Summary of Included

Author
Number Release Changes

1.0 Xaltius
 Learner’s Guide – Introduction to CSS

Contents
Contents .......................................................................................................................... 3
About Xaltius ................................................................................................................... 4
Overview ......................................................................................................................... 5
Duration........................................................................................................................... 6
Administrative Matters ..................................................................................................... 7
Using the Learners’ Guide............................................................................................... 9
Introduction to CSS ....................................................................................................... 10
Introduction to CSS in web development ...................................................................... 11
How does CSS work with HTML ................................................................................... 16
Activity 1.1: To apply CSS style to basic HTML page using VS Code Editor. ............... 17
Activity 1.2: To apply Inline CSS style to basic HTML page. ......................................... 21
Activity 1.3: Styling a Web page to highlight bakery’s offerings. .................................... 23
Reference...................................................................................................................... 36
 Learner’s Guide – Introduction to CSS

About Xaltius
Xaltius is a technology and data-driven
company with the expertise to provide
innovative software solutions and
training to customers around the globe.
We work to revamp and refine business
potential, driving business excellence.
As a maturing, tech-based company at
heart, we are driven by the ever-changing dynamics of digitalization to provide
personalized software solutions elevating business capabilities. Alongside our
counterparts, we offer retail and corporate training in the fields of data analytics, data
science, big data, and cloud technologies and have been actively doing that in Singapore
since inception.

We are a diverse and value-driven team of knowledgeable and talented individuals,

focusing entirely on achieving outstanding customer satisfaction. Being a young and fast-
moving team, open-mindedness and flexibility define us. We strongly believe in educating
and inspiring interested adult learners through our training sessions and are looking for
enthusiastic and futuristic clients to collaborate with on IT projects

Learning & Development

At Xaltius Academy, we provide customized trainings in Programming, Analytics, Data
Science, Machine Learning and Cloud Computing using the latest tools including Amazon
Web Services, Python, PowerBI, Tableau, Microsoft O365 and others to upskill your
employees and aid your digital transformation journey
 Learner’s Guide – Introduction to CSS

Overview

Course Descriptor

This course is designed to help you understand the fundamentals of CSS and how to use
it effectively to style and layout web pages. This course will provide you with the skills to
transform plain HTML documents into visually appealing web pages.

Learning Outcomes
By the end of the course, learners will be able to:
• Understand the role and importance of CSS in web development.
• Write and apply inline, internal, and external CSS styles.
• Utilize selectors, properties, and values to style HTML elements.

Target Audience / Pre-requisites

• Financial Service Professionals.
 Learner’s Guide – Introduction to CSS

Duration

Duration
Delivery
(Hours)
Facilitated Classroom Training 1.5 Hrs

Assessment 0.5 (Total)

• Written Assessment 15 min

• Practical Assessment 15 min

Hrs 2 Hrs
 Learner’s Guide – Introduction to CSS

Administrative Matters
Attendance = >75% to pass the course

Timings – 2 Hours

Ground Rules
• Please turn your mobiles to “Silent” mode of switch it off
• Please avoid bringing food or beverages into the classroom
• Please keep the classroom tidy and conducive for learning

In case of emergency
• Wait for instructions from the appointed Fire Warden/Course Instructor
• Proceed to the nearest fire escape staircase and assemble at the designated
Assembly Area
• Do not return to the classroom unless permission is given by the appointed
 Learner’s Guide – Introduction to CSS

APPEAL PROCESS
1. In the event that there is a dispute over the assessor’s decision, the candidate has the
right to an appeal process. Examples of dispute over the assessment outcome may
include:
• Assessment process was unfair or invalid
• Assessment decision was incorrect and / or
• Assessment was not carried out in accordance with the assessment plan.

2. The appeal process is as follows:

• Candidates who disagree with the assessment outcome should first inform the
assessor of their intention to appeal against the assessment decision. This will
allow the assessor to document the candidate’s intention in the Feedback Section
of the Summary Assessment Record.

• There is no reassessment fee.

• Candidate should then lodge a formal appeal in writing to Xaltius Academy (email:
appeal@xaltius.tech) within 5 working days from the date of result notification. The
email should state clearly the following:
o Name, NRIC and contact number
o Competency Unit assessed
o Assessment date, time and venue
o Name of assessor
o Reasons for appeal

3. The Appeal Panel will be reviewing the appeal application to establish if the
assessment conducted adhered to the Principles of Assessment and Rules of
Evidence. The participant will be notified of the assessment outcome in writing within
four weeks from the date of appeal.

4. If sufficient evidence is gathered by the Appeal Panel to support the assessor’s

decision of assessment outcome for the candidate, the appeal is deemed to be
unsuccessful, and no further appeals will be entertained. Participants may then opt to
undertake a re-assessment.

5. If sufficient evidence is gathered by the Appeal Panel to indicate the appeal was made
on strong grounds, provisions will be made for a re-assessment by a different
assessor at no additional cost. The re-assessment outcome is final, and no further
appeals will be entertained.
 Learner’s Guide – Introduction to CSS

Using the Learners’ Guide

The Learners’ Guide has been designed to maximize your learning. Each section has
been put together as a self-contained, competency-based learning package. Each of
these sections contains the following components represented by the icons:

Learning Outcomes
It is useful for the learner to do his/her review against the learning
outcome in preparation for the assessment.

Learning Activity
A learning activity involves the learner in ‘doing’ to learn
through experience and/or discussion with peers. Your facilitator
may use these in class or have you complete the activity as
homework.
 Learner’s Guide – Introduction to CSS

Introduction to CSS
 Learner’s Guide – Introduction to CSS

Introduction to CSS in web development

CSS (Cascading Style Sheets) is primarily used to style and format the layout of HTML
documents. While HTML provides the structure and content, CSS is responsible for the
visual presentation. This includes setting colours, fonts, spacing, and more.

Understand the role and importance of CSS

CSS is a useful tool in web development. It provides the means to style and layout web
pages, ensuring they are visually appealing, responsive, and accessible. By separating
content from presentation, CSS allows for efficient and maintainable code, ultimately
enhancing the user experience and making web development more manageable.

• CSS stands for Cascading Style Sheets.

• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media.
• CSS saves a lot of work. It can control the layout of multiple web pages all at once.
• External stylesheets are stored in CSS files.
• CSS (Cascading Style Sheets) is a style sheet language used to describe the
visual presentation of HTML or XML documents. It provides a way to control the
appearance and layout of web pages, allowing developers to define colors, fonts,
spacing, positioning, and other visual aspects.

Types of CSS
There are three ways of inserting a style sheet:
1. External CSS - With an external style sheet, you can change the look of an entire
website by changing just one file. Each HTML page must include a reference to
the external style sheet file inside the <link> element, inside the head section.
2. Internal CSS - An internal style sheet may be used if one single HTML page has
a unique style. The internal style is defined inside the <style> element, inside the
head section.
3. Inline CSS - An inline style may be used to apply a unique style for a single
element. To use inline styles, add the style attribute to the relevant element. The
style attribute can contain any CSS property.
 Learner’s Guide – Introduction to CSS

CSS works by selecting elements within an HTML document and applying styles to them.
These styles can be defined using various CSS properties and values.
Here are some key concepts to understand when working with CSS:

• Selectors: CSS selectors are used to target specific elements within an HTML
document. Selectors can be based on element names, class names, IDs,
attributes, or other criteria. For example, the selector h1 targets all <h1> elements,
while the selector .class targets elements with a specific class name.

• Declaration Blocks: CSS rules consist of a selector and a declaration block. The
declaration block contains one or more CSS properties and their associated
values.

• Inheritance: CSS properties can be inherited from parent elements to their child
elements, meaning the child elements will inherit certain styles by default.
However, not all properties are inherited, and some can be explicitly overridden.

• Box Model: The box model is a fundamental concept in CSS that defines how
elements are structured and how their dimensions are calculated. It consists of
four components: content, padding, border, and margin. The content represents
the actual element's content, while padding, border, and margin provide space
around the content.

• CSS Units: CSS supports different units for specifying lengths, such as pixels (px),
percentages (%), em, rem, and more. These units allow developers to define sizes
and distances in a flexible and responsive manner.

• CSS Selectors: CSS provides a wide range of selectors to target elements based
on their relationship with other elements, attributes, states, and more. This includes
descendant selectors, child selectors, sibling selectors, pseudo-classes (:hover,
:focus), and pseudo-elements (::before, ::after).

• CSS Specificity: Specificity determines which CSS rules take precedence when
multiple rules target the same element. Specificity is calculated based on the types
of selectors used and the number of occurrences. It helps resolve conflicts and
ensure that the correct styles are applied.

CSS is a powerful tool for designing and styling web pages. By applying CSS rules,
developers can control the visual aspects of their websites, create engaging layouts, and
enhance the user experience.
 Learner’s Guide – Introduction to CSS

Example:

Advantages of CSS

The ability to distinguish a web page's appearance from its content using CSS has the
following advantages:

• Consistency: One style code may apply across several pages, giving your website
a unified look and feel.
• Flexibility: Without changing the underlying HTML structure, CSS enables you to
quickly modify your web page's look by changing styles in a single CSS file.
• Efficiency: CSS helps to reduce repetitive code, resulting in smaller, quicker-
loading web pages.
• Accessibility: CSS provides better assistance for building web pages that are
simpler to use and understand for those who have disabilities.
• Faster Page Speed: Slower page performance results from more code. And CSS
makes it possible to write less code. With CSS, you may apply a single CSS rule
to each instance of a certain tag throughout an HTML text.
• Better User Experience: CSS facilitates a user-friendly layout and makes websites
to be pleasant to the eye. The user experience is enhanced whenever buttons and
text are placed logically and are well-organized.
 Learner’s Guide – Introduction to CSS

Basic Concepts in CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the

presentation and design of a document written in HTML or XML. CSS controls the
layout, colors, fonts, and overall visual appearance of a webpage.

1. Syntax
CSS syntax consists of selectors and declaration blocks. A selector points to the HTML
element(s) you want to style. The declaration block contains one or more declarations
separated by semicolons. Each declaration includes a property and a value, separated
by a colon.

h1 {
color: blue;
font-size: 24px;
}

2. Selectors

Selectors are used to target HTML elements for styling. There are several types of
selectors:
Element Selector: Selects all elements of a given type.

p{
color: red;
}

Class Selector: Selects all elements with a specified class attribute. Classes are
denoted by a dot (.) followed by the class name.

.myClass {
background-color: yellow;
}

ID Selector: Selects the element with a specified ID attribute. IDs are denoted by a
hash (#) followed by the ID name.

#myId {
margin: 10px;
}
 Learner’s Guide – Introduction to CSS

Attribute Selector: Selects elements based on an attribute or attribute value.

input[type="text"] {
border: 1px solid black;
}

CSS Box Model

The CSS box model describes how elements are displayed and how spacing is
calculated. It consists of four parts: content, padding, border, and margin.

Content: The actual content of the element.

Padding: The space between the content and the border.

Border: The area surrounding the padding.

Margin: The space outside the border, separating the element from other elements.

Example:

div {
width: 200px;
padding: 10px;
border: 2px solid blue;
margin: 20px;
}
 Learner’s Guide – Introduction to CSS

How does CSS work with HTML

To manage and display the layout of web pages, CSS must be used in combination with
HTML. HTML determines the layout and content of a web page, and CSS is utilized to
add styles to that content, specifying how the page should appear and be shown to the
user. Here is how CSS and HTML interact:

1. HTML Structure: The structure of a web page is built on HTML. The headers,
paragraphs, photos, links, tables, forms, and more are all defined using tags. Each
HTML element represents the content types of a page.

2. CSS Rules: The collection of CSS rules that specify how various HTML components
should be styled. A selector and a declaration block are the two primary components of
a CSS rule. The declaration portion contains one or more style attributes and their
accompanying values, whereas the selector specifies the HTML element(s) upon which
the styles should be implemented.

For example:
/* CSS Rule */
h1 {
color: blue;
font-size: 24px;
}

Linking CSS to HTML: You must link the CSS file with the HTML file to use CSS in an
HTML page. The '<link>' tag in the HTML document's '<head>' section is commonly
used to link a css file with html document. The external CSS file's location is indicated
by the 'href' of the '<link>' tag.

<!-- HTML File -->

<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<!-- Content goes here -->
</body>
</html>
 Learner’s Guide – Introduction to CSS

Activity 1.1: To apply CSS style to basic HTML page using VS Code Editor.

Step 1: Open VS
code and Install
Live Server
extension.

To open Visual
Studio Code , go to
search bar on your
PC and type Visual
Studio Code.

A)Launch VS Code.
From the sidebar,
select Extensions.
This opens an
extensions panel.

B)Type “Live
Server” in the
search box and click
on the Install
button.
 Learner’s Guide – Introduction to CSS

Step 2: Prepare
your HTML and
CSS files
First, we will create a
new folder on
desktop to store our
HTML and CSS files.

To do this, click
Open folder on the
left sidebar.

Step 3 : Creating
Files
a)Select the folder
which you have
created on your
desktop. Here The
folder name is ‘web
project’.

b)Open the folder by

clicking on ‘select
folder’. It opens in
visual studio code.

c)You can create a

folder in your
preferred
directory.
project
explorer view for your
project on the left
side, which shows
files and folders for
your project.

Create an HTML
program in this folder
by pressing the New
File button next to
your folder heading.
Name it
 Learner’s Guide – Introduction to CSS

basic_Activity_1.ht
ml.

Step 4: !DOCTYPE html>

Add the given code
to the html file with <html lang="en">
CSS code. In the
<style>tag, add the <head>
different CSS styling
for heading, <style>
paragraph inside the
body {
<head>tag of html
file. background-color: aqua;

}
Add the html code
given below to which h1{
we are adding the
styling. color: blue;

text-align: center;

p{

font-size: 25px ;

font-style: italic;

font-family: Arial, Helvetica, sans-serif;

h3{

font-size: large;

font-style: italic;

color:fuchsia

</style>
 Learner’s Guide – Introduction to CSS

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,

initial-scale=1.0">

<title>Document</title>

</head>

<body>

<h1>Working on first CSS file</h1>

<p>This is a first paragraph</p>

<h3>This is example of h3 style </h3>

</body>

</html>

Step 5 - Running A
Project

After clicking on Go
Live Option, you can
see your output on
port:5500 i.e. on your
browser.
 Learner’s Guide – Introduction to CSS

Activity 1.2: To apply Inline CSS style to basic HTML page.

Step 1: <!DOCTYPE html>

Open a Visual Studio Code text <html lang="en">
editor on your computer. <head>
“CSS_activity_2.html” in your <meta charset="UTF-8">
created ”WebProject” folder <meta http-equiv="X-UA-Compatible"
content="IE=edge">
Step 2: <meta name="viewport"
<!DOCTYPE html>: Declares the content="width=device-width, initial-scale=1.0">
document type and version of <title>Document</title>
HTML being used (HTML5 in this
case).
<html lang="en">: The opening <!-- Internal CSS -->
tag for the HTML document, <style>
specifying that the content is in p{
English. color: orange;
<head>: Contains meta- }
information about the HTML h2{
document, such as character set, color: yellow;
viewport settings, and the title of }
the page. body{
<meta charset="UTF-8">: background-color: red;
Specifies the character encoding
for the document as UTF-8. }

Step 3: </style>

Add title to your webpage by using

title tag as-
<title>Document</title>: <body>
It sets the title of the HTML <center>
document (which appears on the <!-- Inline CSS -->
browser tab). <h1 style="color:aqua">Heading 1</h1>

Step 4: <h2 style="color:blueviolet">Heading 2</h2>

Adding Internal CSS
For internal CSS, you need to add <p>This is my Internal CSS Example</p>
coding in <title> tag in HTML page.
After the title tag, begins the
internal CSS section, where you
can define styles for the HTML </center>
elements by using tag. </body>
<style> </html>
p { color: orange; }:
 Learner’s Guide – Introduction to CSS

It Styles all <p> (paragraph)

elements to have orange text.

h2 { color: yellow; }:
It Styles all <h2> (heading level 2)
elements to have yellow text.

body { background-color: red;}:

Sets the background image of the
entire page.
To end the internal style tag,
</style>: Ends the internal CSS
section.

Step 5:
Adding inline CSS
For inline CSS, you need to add
coding in <body> tag in HTML
page.
<body>: Begins the body of the
HTML document, where the visible
content goes.

<center>: A deprecated HTML tag

used for centring content. It's better
to use CSS for centring.

<h1 style="color:aqua">Heading
1</h1>: Defines an <h1> (heading
level 1) element with inline CSS to
set the text colour to aqua.

<h2
style="color:blueviolet">Headin
g 2</h2>: Defines an <h2>
element with inline CSS to set the
text color to blueviolet.

<p>This is my Internal CSS

Example</p>: Defines a <p>
(paragraph) element with text.

</center>: Ends the centering

container.
 Learner’s Guide – Introduction to CSS

</body>: Ends the body of the

HTML document.

</html>: Closes the HTML

document.

Step 6:
Run the example

After clicking on Go Live Option,

you can see your output on
port:5500 i.e. on your browser.
The web browser will render the
HTML file, and you should see the
styled content as output.

Activity 1.3: Styling a Web page to highlight bakery’s offerings.

Daniela, a baker, aims to establish an online presence for her bakery, "Sweet
Delights," by creating a simple website. With the basic knowledge of CSS, create
a webpage to highlight her bakery's offerings and contact and below given
details.

Step 1: Open
VS code and
Install Live
Server
extension.

To open Visual
Studio Code ,
go to search
bar on your PC
and type
Visual Studio
Code.

a)Launch VS
Code. From
the sidebar,
select
 Learner’s Guide – Introduction to CSS

Extensions.
This opens an
extensions
panel.

b)Type “Live
Server” in the
search box
and click on
the Install
button.

Step 2:
Prepare your
HTML and
CSS files
First, we will
create a new
folder on
desktop to
store our
HTML and
CSS files.
 Learner’s Guide – Introduction to CSS

To do this,
click Open
folder on the
left sidebar.

Step 3:
a)Select the
folder which
you have
created on
your desktop.
Here The
folder name is
‘web project’.

b)Open the
folder by
clicking on
‘select folder’.
It opens in
visual studio
code.

c)You can
create a folder
in your
preferred
directory.
project
explorer view
for your project
on the left side,
which shows
files and
folders for your
project.

Create an
HTML program
in this folder by
pressing the
New File
button next to
your folder
heading. Name
it Bakery.html.
 Learner’s Guide – Introduction to CSS

Step 4: <!DOCTYPE html>

internal CSS
styling <html lang="en">
Set the title of
the document, <head>
<title>Sweet
Delights <meta charset="UTF-8">
Bakery</title>
<meta name="viewport" content="width=device-width, initial-
which appears
in the scale=1.0">
browser's title
<title>Sweet Delights Bakery</title>
bar or tab.
<style>
<style>
Contains body {
internal CSS
that applies font-family: Arial, sans-serif;
styles directly
within the background-color: rgba(171, 226, 150, 0.858);
document.
color: #333;
Add the given
code inside the margin: 0;
body tag to set
font, padding: 0;
background
}
colour and
other attributes header {
tour html page.
background-color: #ffcc00;
Header
Styling: Sets padding: 20px;
the
background text-align: center;
colour of the
header to }
yellow.padding
: 20px;: Adds h1 {
20 pixels of
padding inside margin: 0;
the header.
}
text-align:
center;:
Centers the
text within the
header.
 Learner’s Guide – Introduction to CSS

main {
h1 Styling:
margin: 0;: padding: 20px;
Removes any
default margin }
from the <h1>
element. section {

margin-bottom: 20px;
main styling:
padding: padding: 15px;
20px;: Adds 20
pixels of }
padding inside
the main /* Highlight About Us section */
content area.
section.about-us {
section
styling: background-color: #91b9ea;
margin-bottom:
20px;: Adds 20 border: 2px solid #444a8f;
pixels of
margin below }
each section.
/* Highlight Contact Us section */
About US section.contact-us {
styling: Set
the background-color: #4a4d4e38;
background
colour of the border: 2px solid #00695c;
"About Us"
section to a }
light blue.
border: Adds a footer {
2-pixel solid
border with a background-color: #8f980a;
dark blue
color: #fff;
color.
text-align: center;
Contact us
section padding: 10px;
styling: Set
the position: fixed;
background
colour of the width: 100%;
"Contact Us"
section to a
 Learner’s Guide – Introduction to CSS

light Gray. bottom: 0;

border: Adds a
2-pixel solid }
border with a
teal colour. .image-container {

Footer text-align: center;

Styling:
margin: 20px 0;
background-
colour: : Set }
the
background </style>
colour of the
footer to an </head>
olive green.
<body>
Image styling:
text-align: <!-- Header Section -->
center;:
Centers the <header>
content (in this
case, an <h1>Welcome to Sweet Delights Bakery</h1>
image) within
</header>
the container.
margin: 20px <!-- Image Section -->
0;: Adds 20
pixels of <div class="image-container"> <img src="background.jpg"
margin above alt="Bakery Image" style="width: 300px; height: auto;">
and below the
container. </div>

Step 5: <!-- Main Content Section -->

Writing HTML
code <main>

<body>: <!-- About Us Section -->

Contains the
visible content <section class="about-us">
of the web
page. <h2>About Us</h2>

<p>We are a cozy neighborhood bakery specializing in

<header>:
Defines a delicious pastries and cakes. Our mission is to spread joy through
header for the sweet treats!</p>
document or a
section. It
 Learner’s Guide – Introduction to CSS

includes an </section>
<h1> tag with
the bakery's <!-- Contact Us Section -->
welcome
message. <section class="contact-us">

<div <h2>Contact Us</h2>

class="image-
<p>You can find us at 123 Main Street, Cityville. Feel free to
container">: A
container for reach out at
the image. The
<a
image is
sourced from href="mailto:info@sweetdelights.com">info@sweetdelights.com</a>
background.jp .</p>
g and is styled
to be 300px </section>
wide with auto
</main>
height.
<!-- Footer Section -->

<footer>
<main>: The
main content <p> Sweet Delights Bakery</p>
area of the
document. </footer>

<section </body>
class="about-
us">: Defines </html>
a section for
the "About Us"
content. It
includes an
<h2> tag and a
paragraph
describing the
bakery.

<section
class="contac
t-us">:
Defines a
section for the
"Contact Us"
content. It
includes an
 Learner’s Guide – Introduction to CSS

<h2> tag and a

paragraph with
contact
information.

<footer>:
Defines a
footer for the
document. It
includes a
paragraph with
the bakery's
name.
Step 6: Run
the code
Run the given
code using
“Go live”
option at the
rightmost down
corner of VS
code and you
can check for
the output in
any preferred
web browser
as shown.
 Learner’s Guide – Introduction to CSS

Activity 1.4 :Creating a web page with simple CSS using Edublock (Optional)

Let’s continue to work on our Corner Book Shop web page. Now that we have some
content, it is time to add in some styling to the page.

Step 1: Let’s add

a background
colour to the
Corner Book
Shop web page.
Grab the Style
block and add in
the class name
block and the
background
block. In this
example, we are
using a light
green colour
(#DCEED1) for
the background.
 Learner’s Guide – Introduction to CSS

Output:

Step 2: Let’s add

some styling to
the heading h1
by changing the
colour to dark
green (#1b6d54)
and aligning the
text to the centre.
 Learner’s Guide – Introduction to CSS

Output:
 Learner’s Guide – Introduction to CSS

Step 3: Let’s Output:

make the button
look nicer.
Change the
background
colour of the
button to green
(#5dd1ad) and
change the text
colour to white
(#ffffff).

Give some
spacing between
the inner text by
adding padding
(10px).

Let’s make the

edges of the
button a bit
rounder by
adding border-
radius of 15px.
By default, the
border colour is
set to black, we
don’t want this so
let’s change it to
the same colour
as the button
background
colour
(#5dd1ad).

You can see the

output in image.
 Learner’s Guide – Introduction to CSS

These are basic styling applied to the web page, please feel free to use your creativity
to add more styles. Have fun with it!

In the future module, we will learn more about HTML, CSS, and JavaScript in greater
details. You will learn how to write the code yourself from scratch.
 Learner’s Guide – Introduction to CSS

Reference

1. Learn HTML, CSS, and JavaScript from Scratch - Free AI-Powered Course
2. CSS Tutorial
3. Web Design Weekly - The Best Web Design Newsletter
4. EduBlocks