CSS COURSE
Contents of the presentation
01 02 03
Before the Preparing for During the
exam the exam exam
01
What is CSS?
CSS
Cascading Style
Sheets
What is CSS?
• Cascading Style Sheets (CSS) is a stylesheet language used to describe the
presentation of a document written in HTML or XML. It defines how elements
are displayed on a web page.
• CSS makes websites visually appealing and user-friendly.
How to code CSS ?
h1 {
color: red;
font-size: 32px;
}
Creators & Maintenance of CSS?
• CSS was created by a group of individuals known as the World Wide Web
Consortium (W3C).
• Primary contributors include Håkon Wium Lie and Bert Bos.
• CSS standards and specifications are maintained by the W3C.
• A community of web developers, designers, and browser vendors also
contribute to its evolution.
• Regular updates and new versions ensure CSS remains relevant and adaptable
to changing web design needs.
CSS History (Version)
0 CSS1 (1996)
1 Limited properties and selectors.
0 CSS2 (1998)
CSS to 2 CSS 2 was released and work on CSS 3 began
CSS3
0 CSS 2.1 (2011)
3 CSS 2.1 was released, which fixed
the errors found in CSS 2
02
CSS Rule
Structure
CSS Rule Structure
• A CSS rule consists of a selector and a declaration block.
• Declarations are used to define the style properties for the selected elements.
• Each declaration consists of a property and a value.
Declaration
selector {
property: value;
/* More properties and values */
}
CSS Rule Structure
Selector
Value
h1 {
color: red;
Property font-size: 32px;
}
Syntax – CSS
Selector
Value
p{
color: blue;
Property font-weight: bold;
}
Declaration
03
How to use
CSS in
HTML?
0 Inline CSS
1 Style applied directly to an HTML element
using the style attribute.
0 Internal CSS
3 Ways 2 Styles defined within the <style> tag within
the HTML document's <head>.
0 External CSS
3 Styles stored in separate .css files linked
to the HTML document using the <link>
element.
03
Types of
Selectors
CSS Tag / Element Selector
Selector
Value
h1 {
color: red;
Property font-size: 32px;
}
Class Selector – CSS
Class-Selector
Value
.btn{
color: blue;
Property font-weight: bold;
}
Declaration
ID Selector – CSS
ID-Selector
Value
#btn{
color: blue;
Property font-weight: bold;
}
Pseudo-Class – CSS
Pseudo-class
Value
a:hover{
color: blue;
Property font-weight: bold;
}
Declaration
05
CSS
Comments
CSS Comment
/* This is a
comment */
Study planning (I)
01 Date of the exam
(note it in your planner)
Find out Type of exam
02
about: (oral, practical, multiple-choice...)
03 Information
Content that may be included in the exam
Start from day one!
Pre-exam study
1. From the first day, try to review what you have seen in class when you get home
2. Take notes
3. Highlight what the teacher has said is most important
4. Start creating your own study outlines
5. Ask in class the questions you need to ask
Very important:
Don't wait for the
professor to tell you the
day of the exam—get a
head start
Study planning (II)
1. Count the days you have to study from the day you are notified until the day of the
exam
2. Take into account other tasks, homework or activities you have during those days
and calculate the time (hours per day) you will have for studying
3. Break down the information by topics or by sections
4. Use a weekly planner and write in it which sections you are going to study each
day from the day you start until the day of the exam
5. Organize your study, making sure that the last few days are for review
Take a few minutes to get organized:
1. Find out how much time you have to
take the exam
2. Keep a watch or clock handy to keep
track of the time
Time planning 3. Take a first look at the exam: how
many questions there are, what
kind, which ones you know and
in the exam which ones you don't know
4. Determine how much time to devote
to each question
5. To avoid possible mistakes, solve
your doubts before you start by
asking the teacher the questions you
need to ask
Start to answer:
Review your answers to
Read each question
01 carefully
04 make sure you haven't
forgotten anything
Start by answering the Save the questions you
02 ones you know best first
05 don't know for the end
Continue with those you Do a final review before
03 partially know
06 turning it in
Thanks!
Do you have any questions?
youremail@freepik.com
+91 620 421 838
yourwebsite.com
CREDITS: This template has been created by Slidesgo, and
includes icons by Flaticon, infographics & images by
Freepik and content by Sandra Medina
Please keep this slide for attribution
Alternative resources
Here’s an assortment of alternative resources whose style fits that of this template:
● Hand drawn flat case study landing page template I
● Hand drawn flat case study landing page template II
Resources
Did you like the resources used in this template? Get them for free at our other websites:
VECTORS
● Hand drawn flat case study landing page template
● Hand drawn flat case study illustration
Instructions for use
If you have a free account, in order to use this template, you must credit Slidesgo by keeping the Thanks slide. Please
refer to the next slide to read the instructions for premium users.
As a Free user, you are allowed to:
● Modify this template.
● Use it for both personal and commercial projects.
You are not allowed to:
● Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
● Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
● Include Slidesgo Content in an online or offline database or file.
● Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
● Acquire the copyright of Slidesgo Content.
For more information about editing slides, please read our FAQs or visit our blog:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
Instructions for use (premium users)
As a Premium user, you can use this template without attributing Slidesgo or keeping the Thanks slide.
You are allowed to:
● Modify this template.
● Use it for both personal and commercial purposes.
● Hide or delete the “Thanks” slide and the mention to Slidesgo in the credits.
● Share this template in an editable format with people who are not part of your team.
You are not allowed to:
● Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
● Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
● Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
● Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.
For more information about editing slides, please read our FAQs or visit our blog:
https://slidesgo.com/faqs and https://slidesgo.com/slidesgo-school
Fonts & colors used
This presentation has been made using the following fonts:
Poppins
(https://fonts.google.com/specimen/Poppins)
#210a26 #4d476d #a0bfdb #dff3f8 #ea3554
#ffa406 #c1712d #1d9e4e #3169f8 #ffffff
Storyset
Create your Story with our illustrated concepts. Choose the style you like the most, edit its
colors, pick the background and layers you want to show and bring them to life with the animator
panel! It will boost your presentation. Check out how it works.
Pana Amico Bro Rafiki Cuate
Use our editable graphic resources...
You can easily resize these resources without losing quality. To change the color, just ungroup the resource and click on
the object you want to change. Then, click on the paint bucket and select the color you want. Group the resource again
when you’re done. You can also look for more infographics on Slidesgo.
JANUARY FEBRUARY MARCH APRIL MAY JUNE
PHASE 1
Task 1
Task 2
PHASE 2
Task 1
Task 2
JANUARY FEBRUARY MARCH APRIL
PHASE 1
Task 1
Task 2
...and our sets of editable icons
You can resize these icons without losing quality.
You can change the stroke and fill color; just select the icon and click on the paint bucket/pen.
In Google Slides, you can also use Flaticon’s extension, allowing you to customize and add even more icons.
Educational Icons Medical Icons
Business Icons Teamwork Icons
Help & Support Icons Avatar Icons
Creative Process Icons Performing Arts Icons
Nature Icons
SEO & Marketing Icons
