1696773978931-CSS_Course_Presentation.pptx

01
Before the
exam
Contents of the presentation
02
Preparing for
the exam
03
During the
exam

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)
01
CSS1 (1996)
Limited properties and selectors.
CSS to CSS3 02
CSS2 (1998)
CSS 2 was released and work on CSS 3 began
03
CSS 2.1 (2011)
CSS 2.1 was released, which fixed the
errors found in CSS 2

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.
selector {
property: value;
/* More properties and values */
}
Declaration

CSS Rule Structure
h1 {
color: red;
font-size: 32px;
}
Value
Selector
Property

Syntax – CSS
p{
color: blue;
font-weight: bold;
}
Value
Selector
Property
Declaration

01
Inline CSS
Style applied directly to an HTML element
using the style attribute.
3 Ways 02
Internal CSS
Styles defined within the <style> tag within the
HTML document's <head>.
03
External CSS
Styles stored in separate .css files linked to the
HTML document using the <link> element.

CSS Tag / Element Selector
h1 {
color: red;
font-size: 32px;
}
Value
Selector
Property

Class Selector – CSS
.btn{
color: blue;
font-weight: bold;
}
Value
Class-Selector
Property
Declaration

ID Selector – CSS
#btn{
color: blue;
font-weight: bold;
}
Value
ID-Selector
Property

Pseudo-Class – CSS
a:hover{
color: blue;
font-weight: bold;
}
Value
Pseudo-class
Property
Declaration

CSS Comment
/* This is a comment */

Study planning (I)
01
Date of the exam
(note it in your planner)
Find out
about:
02
Type of exam
(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

Time planning
in the exam
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
3. Take a first look at the exam: how
many questions there are, what kind,
which ones you know and 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:
Read each question
carefully
01
Start by answering the
ones you know best first
02
Continue with those you
partially know
03
Review your answers to
make sure you haven't
forgotten anything
04
Save the questions you
don't know for the end
05
Do a final review before
turning it in
06

CREDITS: This template has been created by Slidesgo, and
includes icons by Flaticon, infographics & images by Freepik
and content by Sandra Medina
Thanks!
Do you have any questions?
youremail@freepik.com
+91 620 421 838
yourwebsite.com
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

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
Instructions for use (premium users)

This presentation has been made using the following fonts:
Poppins
(https://fonts.google.com/specimen/Poppins)
#210a26 #4d476d #a0bfdb #dff3f8
#ffa406 #c1712d #1d9e4e #3169f8
#ea3554
#ffffff
Fonts & colors used

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.
Storyset
Pana Amico Bro Rafiki Cuate

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.
Use our editable graphic resources...

JANUARY FEBRUARY MARCH APRIL MAY JUNE
PHASE 1
PHASE 2
Task 1
Task 2
Task 1
Task 2
JANUARY FEBRUARY MARCH APRIL
PHASE 1
Task 1
Task 2

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.
...and our sets of editable icons

Educational Icons Medical Icons

Help & Support Icons Avatar Icons

Creative Process Icons Performing Arts Icons

1696773978931-CSS_Course_Presentation.pptx

1696773978931-CSS_Course_Presentation.pptx

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 1696773978931-CSS_Course_Presentation.pptx

Semelhante a 1696773978931-CSS_Course_Presentation.pptx (20)

Último

Último (20)

1696773978931-CSS_Course_Presentation.pptx