SlideShare ist ein Scribd-Unternehmen logo
1 von 48
CSS COURSE
01
Before the
exam
Contents of the presentation
02
Preparing for
the exam
03
During the
exam
What is CSS?
01
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)
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
02
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
How to use
CSS in HTML?
03
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.
Types of
Selectors
03
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
Comments
05
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
Business Icons Teamwork Icons
Help & Support Icons Avatar Icons
Creative Process Icons Performing Arts Icons
Nature Icons
SEO & Marketing Icons
1696773978931-CSS_Course_Presentation.pptx

Weitere ähnliche Inhalte

Ähnlich wie 1696773978931-CSS_Course_Presentation.pptx

٠٠٠٠.pptxنزنزهسدسهيايعغسيتادغسكنرزكسغزكازسكدهغدسكا
٠٠٠٠.pptxنزنزهسدسهيايعغسيتادغسكنرزكسغزكازسكدهغدسكا٠٠٠٠.pptxنزنزهسدسهيايعغسيتادغسكنرزكسغزكازسكدهغدسكا
٠٠٠٠.pptxنزنزهسدسهيايعغسيتادغسكنرزكسغزكازسكدهغدسكا
Maroofimad
 
Furniture And Product Design Portfolio by Slidesgo.pptx
Furniture And Product Design Portfolio by Slidesgo.pptxFurniture And Product Design Portfolio by Slidesgo.pptx
Furniture And Product Design Portfolio by Slidesgo.pptx
mahmoud fouad
 
EN Time Boxing shows all of the other night
EN Time Boxing shows all of the other nightEN Time Boxing shows all of the other night
EN Time Boxing shows all of the other night
ThcChinhTrn1
 
EN Time Boxing template fo ppt presentations
EN Time Boxing template fo ppt presentationsEN Time Boxing template fo ppt presentations
EN Time Boxing template fo ppt presentations
ssuser2a86d12
 
EN Problem-Based Learning by Slidesgo.pptx
EN Problem-Based Learning by Slidesgo.pptxEN Problem-Based Learning by Slidesgo.pptx
EN Problem-Based Learning by Slidesgo.pptx
Meer Farhad
 
phases-of-the-vocational-guidance-process.pptx
phases-of-the-vocational-guidance-process.pptxphases-of-the-vocational-guidance-process.pptx
phases-of-the-vocational-guidance-process.pptx
NarutoooUzumakiii
 

Ähnlich wie 1696773978931-CSS_Course_Presentation.pptx (20)

EN Chat GPT by Slidesgo.pptx
EN Chat GPT by Slidesgo.pptxEN Chat GPT by Slidesgo.pptx
EN Chat GPT by Slidesgo.pptx
 
harvards colegio h.pptx
harvards colegio h.pptxharvards colegio h.pptx
harvards colegio h.pptx
 
KELOMPOK 4 -MSM 23.pptx
KELOMPOK 4 -MSM 23.pptxKELOMPOK 4 -MSM 23.pptx
KELOMPOK 4 -MSM 23.pptx
 
EN Study Technique_ The Traffic Light by Slidesgo.pptx
EN Study Technique_ The Traffic Light by Slidesgo.pptxEN Study Technique_ The Traffic Light by Slidesgo.pptx
EN Study Technique_ The Traffic Light by Slidesgo.pptx
 
1.pptx
1.pptx1.pptx
1.pptx
 
٠٠٠٠.pptxنزنزهسدسهيايعغسيتادغسكنرزكسغزكازسكدهغدسكا
٠٠٠٠.pptxنزنزهسدسهيايعغسيتادغسكنرزكسغزكازسكدهغدسكا٠٠٠٠.pptxنزنزهسدسهيايعغسيتادغسكنرزكسغزكازسكدهغدسكا
٠٠٠٠.pptxنزنزهسدسهيايعغسيتادغسكنرزكسغزكازسكدهغدسكا
 
Furniture And Product Design Portfolio by Slidesgo.pptx
Furniture And Product Design Portfolio by Slidesgo.pptxFurniture And Product Design Portfolio by Slidesgo.pptx
Furniture And Product Design Portfolio by Slidesgo.pptx
 
EN How to Organize a Text? by Slidesgo.pptx
EN How to Organize a Text? by Slidesgo.pptxEN How to Organize a Text? by Slidesgo.pptx
EN How to Organize a Text? by Slidesgo.pptx
 
EN How to Organize a Text_ by Slidesgo.pptx
EN How to Organize a Text_ by Slidesgo.pptxEN How to Organize a Text_ by Slidesgo.pptx
EN How to Organize a Text_ by Slidesgo.pptx
 
programa de experiencia complejas importantes.pptx
programa de experiencia complejas importantes.pptxprograma de experiencia complejas importantes.pptx
programa de experiencia complejas importantes.pptx
 
EN Time Boxing shows all of the other night
EN Time Boxing shows all of the other nightEN Time Boxing shows all of the other night
EN Time Boxing shows all of the other night
 
EN Time Boxing template fo ppt presentations
EN Time Boxing template fo ppt presentationsEN Time Boxing template fo ppt presentations
EN Time Boxing template fo ppt presentations
 
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStartIntro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
Intro to CSS in MadCap Flare - MadWorld 2016, Scott DeLoach, ClickStart
 
EN Problem-Based Learning by Slidesgo.pptx
EN Problem-Based Learning by Slidesgo.pptxEN Problem-Based Learning by Slidesgo.pptx
EN Problem-Based Learning by Slidesgo.pptx
 
EN Problem-Based Learning by Slidesgo.pptx
EN Problem-Based Learning by Slidesgo.pptxEN Problem-Based Learning by Slidesgo.pptx
EN Problem-Based Learning by Slidesgo.pptx
 
phases-of-the-vocational-guidance-process.pptx
phases-of-the-vocational-guidance-process.pptxphases-of-the-vocational-guidance-process.pptx
phases-of-the-vocational-guidance-process.pptx
 
TOPIK 2 PAKK2363D KEUSAHAWANAN DALAM PAKK
TOPIK 2 PAKK2363D KEUSAHAWANAN DALAM PAKKTOPIK 2 PAKK2363D KEUSAHAWANAN DALAM PAKK
TOPIK 2 PAKK2363D KEUSAHAWANAN DALAM PAKK
 
Encouraging Creativity in High School by Slidesgo.pptx
Encouraging Creativity in High School by Slidesgo.pptxEncouraging Creativity in High School by Slidesgo.pptx
Encouraging Creativity in High School by Slidesgo.pptx
 
home-vocabulary.pptx
home-vocabulary.pptxhome-vocabulary.pptx
home-vocabulary.pptx
 
proyectos de aplicacion y evaliacion preliminar infantil.pptx
proyectos de aplicacion y evaliacion preliminar infantil.pptxproyectos de aplicacion y evaliacion preliminar infantil.pptx
proyectos de aplicacion y evaliacion preliminar infantil.pptx
 

Kürzlich hochgeladen

Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
home
 
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdfB. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
University of Wisconsin-Milwaukee
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
TusharBahuguna2
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
amitlee9823
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
amitlee9823
 
DESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- IntroductionDESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- Introduction
sivagami49
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
amitlee9823
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts ServiceVVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
aroranaina404
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
amitlee9823
 

Kürzlich hochgeladen (20)

call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
 
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 104, Noida Call girls :8448380779 Model Escorts | 100% verified
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
B. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdfB. Smith. (Architectural Portfolio.).pdf
B. Smith. (Architectural Portfolio.).pdf
 
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptxDesign Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
 
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
DESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- IntroductionDESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- Introduction
 
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
Whitefield Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Ba...
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...Top Rated  Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
Top Rated Pune Call Girls Koregaon Park ⟟ 6297143586 ⟟ Call Me For Genuine S...
 
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts ServiceVVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 

1696773978931-CSS_Course_Presentation.pptx

  • 2. 01 Before the exam Contents of the presentation 02 Preparing for the exam 03 During the exam
  • 5. 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.
  • 6. How to code CSS ? h1 { color: red; font-size: 32px; }
  • 7. 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.
  • 8. 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
  • 10. 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
  • 11. CSS Rule Structure h1 { color: red; font-size: 32px; } Value Selector Property
  • 12. Syntax – CSS p{ color: blue; font-weight: bold; } Value Selector Property Declaration
  • 13. How to use CSS in HTML? 03
  • 14. 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.
  • 16. CSS Tag / Element Selector h1 { color: red; font-size: 32px; } Value Selector Property
  • 17. Class Selector – CSS .btn{ color: blue; font-weight: bold; } Value Class-Selector Property Declaration
  • 18. ID Selector – CSS #btn{ color: blue; font-weight: bold; } Value ID-Selector Property
  • 19. Pseudo-Class – CSS a:hover{ color: blue; font-weight: bold; } Value Pseudo-class Property Declaration
  • 21. CSS Comment /* This is a comment */
  • 22. 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
  • 23. 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
  • 24. Very important: Don't wait for the professor to tell you the day of the exam—get a head start
  • 25. 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
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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
  • 30. 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
  • 31. 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
  • 32. 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)
  • 33. 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
  • 34. 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
  • 35. 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...
  • 36.
  • 37.
  • 38. 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
  • 39.
  • 40.
  • 41. 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
  • 44. Help & Support Icons Avatar Icons
  • 45. Creative Process Icons Performing Arts Icons