Top
Email
Bottom
Essential CSS 3
 
Name:
Company:
Email:
Telephone:
Training type:
Delegates:


Additional Information
 

List of Public Courses
Select the location for this training course

Essential CSS 3 course at a glance

Pages
800No of slides in the Manual
Exercises
15Total No of Exercises
Sections
30No of main topics, see index below
Public
YesPublic course in the UK and Ireland
On-Site
YesWe can come to your venue
Level
11 - Beginners
2 - Intermediate
3 - Advanced
Days
4Week days but we can put on weekend courses
Duration:
Minimum skill level required:
On-Site course:
Public course:
Sections:
No of exercises:
No of pages in the manual:
Pre-Requisite course(s):
Suggested further course(s):
Price guide:
4 days
1 (1 - Beginner, 2 - Experienced 3 - Advanced)
Yes
Yes
30
15
800
None
PHP 8 and MySQL 8 Essential JavaScript
Contact us for the latest pricing

Essential CSS 3 training exercises

(You get to practice what we preach! ...)
Input forms using CSS
Creating dynamic sizing webpages
Overlaying images and containers
Using Counters in CSS
Using :hover to change website appearance

Index of Essential CSS 3 training course

Section
Section Name
Page

One
Essential CSS3
1

 
- Introduction to CSS
2

Two
CSS Syntax
5

 
- CSS Syntax
6

Three
Defining CSS
13

 
- Introduction
14

 
- Inline
15

 
- In-Page
19

 
- External File
24

 
- @import
31

 
- Precedence
32

 
- Errors
36

 
- Commenting
39

Four
Identifying CSS sets
43

 
- Introduction
44

 
- IDs
45

 
- Class
47

 
- Commonality
48

 
- Multiple Classes
50

 
- Exercise One
51

Five
Colours
53

 
- Introduction
54

 
- Named Colours
56

 
- Hex Colours
58

 
- RGB Colours
60

 
- RGBA Colours
62

 
- HSL Colours
63

 
- Using percentages with RGB
65

 
- Using Gradients
66

 
- linear-gradient
67

 
- linear-gradient, changing direction
68

 
- linear-gradient, multiple colours
71

 
- linear-gradient, using stops
72

 
- repeating-linear-gradient
73

 
- radial-gradient
74

 
- radial-gradient shapes
75

Six
Backgrounds in CSS
76

 
- Introduction
77

 
- Using an image
78

 
- background-repeat
80

 
- background-clip
82

 
- background-size
86

 
- background-position
92

 
- background-origin
97

 
- background-blend-mode
101

 
- background-attachment
107

 
- background
110

Seven
Changing Cursors in CSS
111

 
- CSS Cursor
112

 
- Syntax
113

 
- Styles
114

 
- Custom Images
120

 
- caret-color
122

 
- Exercise Two
123

Eight
Width and Height in CSS
125

 
- Introduction
126

 
- Width
127

 
- Using Div
131

 
- Height
134

 
- resize
137

 
- all
144

 
- all (inherit)
145

 
- all (initial)
147

 
- all (unset)
148

 
- Exercise Three
149

Nine
Positioning
155

 
- Introduction
156

 
- Position
157

 
- absolute
160

 
- z-index
165

 
- fixed
168

 
- relative
170

 
- static
172

 
- sticky
174

 
- float
177

 
- display
186

 
- display (inline)
187

 
- display (inline-block)
190

 
- display (inline-block) with lists
191

 
- display (block)
192

 
- display (none)
193

 
- visibility
195

 
- visibility (hidden)
196

 
- visibility (collapse)
197

 
- vertical-align
198

 
- vertical-align (top)
201

 
- vertical-align (bottom)
203

 
- vertical-align (middle)
204

 
- vertical-align (size unit)
205

 
- vertical-align (text-top / text-bottom)
207

 
- vertical-align (super / sub)
208

 
- vertical-align (percentage)
209

 
- Exercise Four
211

Ten
Margins, Padding, Borders and Outline
216

 
- CSS Margins
217

 
- Inherit
219

 
- Percentage
220

 
- Margin Shortcut
221

 
- Collapsed Margin
223

 
- Centreing
224

 
- Introduction to Padding
225

 
- text-align
226

 
- Settings
228

 
- Introduction to Borders
231

 
- border-width
232

 
- border-style
235

 
- border-color
241

 
- border-left, border-right, border-bottom, border-top
243

 
- border-radius
244

 
- border-image
246

 
- border-image-source
248

 
- border-image-slice
249

 
- border-image-width
251

 
- border-image-outset
254

 
- border-image using images
255

 
- border-collapse
256

 
- border-spacing
257

 
- outline
258

 
- outline with border
259

 
- outline-width
260

 
- outline-color
261

 
- outline-style
262

 
- outline-offset
266

 
- box-shadow
267

 
- box-shadow (color)
270

 
- box-shadow (blur)
271

 
- box-shadow (multiple shadows)
272

 
- box-shadow (inset)
273

 
- box-sizing
275

 
- Exercise Five
278

Eleven
Text in CSS
284

 
- Introduction
285

 
- font-family
286

 
- @font-face
288

 
- Font Types
291

 
- Using Google Fonts
293

 
- Color
295

 
- font-size
296

 
- font-style
297

 
- font-weight
298

 
- font-variant
300

 
- line-height
301

 
- font
302

 
- text-decoration
304

 
- text-decoration-line
306

 
- text-decoration-color
308

 
- text-decoration-style
309

 
- white-space
311

 
- user-select
316

 
- word-spacing
317

 
- word-wrap
319

 
- word-break
320

 
- hyphens
322

 
- text-transform
323

 
- Heading
325

 
- text-shadow
326

 
- text-indent
331

 
- quotes
332

 
- quotes
333

 
- overflow
334

 
- overflow-x / overflow-y
337

 
- overflow-wrap
339

 
- text-overflow
340

 
- direction
342

 
- letter-spacing
343

 
- tab-size
344

 
- @charset
346

 
- Exercise Six
347

Twelve
Columns
352

 
- Columns
353

 
- column-count
354

 
- column-width
356

 
- column-rule
357

 
- column-rule-width
358

 
- column-rule-style
359

 
- column-rule-color
362

 
- column-gap
363

 
- column-span
364

Thirteen
Size Units
367

 
- Introduction
368

 
- Absolute size units
369

 
- Relative size units
373

 
- Relative size units (em)
374

 
- Relative size units (ch)
377

 
- Relative size units (rem)
378

 
- Relative size units (ex)
379

 
- Relative size units (fr)
380

 
- Viewport
381

 
- Relative size units (vw)
383

 
- Relative size units (vh)
387

 
- Relative size units (vh)
388

 
- Relative size units (vmin / vmax)
389

 
- Relative size units (percentage)
390

Fourteen
Lists
392

 
- Introduction
393

 
- list-style-type
395

 
- list-style-position
406

 
- list-style-image
408

 
- Multiple list styles
409

 
- list-style
411

 
- Exercise Seven
412

Fifteen
CSS Selectors
414

 
- Type Selector
415

 
- Class Selector
416

 
- ID Selector
417

 
- Commonality
418

 
- Multiple Classes
419

 
- Sharing attributes
420

 
- Compound effects
423

 
- Universal Selector
429

 
- Attribute Selector
430

 
- Does the Attribute exist ?
431

 
- Does the Attribute have a particular value ?
432

 
- Does the Attribute contain a particular value ?
435

 
- Does the Attribute start with a particular value ?
436

 
- Does the Attribute end with a particular value ?
437

 
- Does the Attribute have a particular value in a list ?
438

 
- Combining Attribute Selectors
440

 
- Combinators
441

 
- General sibling combinator
442

 
- Adjacent sibling combinator
447

 
- Descendant combinator
449

 
- Child combinator
452

Sixteen
HTML tables
454

 
- Introduction
455

 
- table-layout
456

 
- caption-side
458

 
- empty-cells
459

 
- Exercise Eight
460

Seventeen
Flexboxes
468

 
- Flexboxes
469

 
- flex-basis
473

 
- flex-grow
474

 
- flex-shrink
475

 
- flex
476

 
- flex-wrap
477

 
- flex-direction
479

 
- flex-flow
483

 
- order
484

 
- flexboxes within flexboxes
485

 
- align-items
488

 
- align-items (stretch)
489

 
- align-items (center)
490

 
- align-items (flex-start)
491

 
- align-items (flex-end)
492

 
- align-items (baseline)
493

 
- justify-content
494

 
- justify-content (center)
495

 
- justify-content (flex-start)
496

 
- justify-content (flex-end)
497

 
- justify-content (space-between)
498

 
- justify-content (space-around)
499

 
- align-self
500

 
- align-self (auto)
501

 
- align-self (center)
502

 
- align-self (flex-end)
503

 
- align-self (stretch)
504

 
- Exercise Nine
505

Eighteen
Grid
509

 
- Introduction
510

 
- grid-template-rows / grid-template-columns
512

 
- grid-template-rows / grid-template-columns repeat
519

 
- grid-auto-flow
520

 
- grid-row-gap / grid-column-gap
522

 
- grid-gap
523

 
- grid-auto-rows / grid-auto-columns
524

 
- grid-row-start / grid-column-start
525

 
- grid-row-end / grid-column-end
527

 
- grid-row / grid-column
530

 
- grid-template-areas
532

 
- grid-template
537

 
- grid-template with grid-template-areas
538

 
- grid-area
540

 
- grid
541

Nineteen
Vendor prefixes
543

 
- Introduction
544

 
- pseudo classes
547

 
- flexbox
548

 
- Exercise Ten
549

Twenty
Pseudo-Classes
557

 
- Introduction
558

 
- Using :hover
559

 
- Using :hover with display (Tooltips)
561

 
- Pointer Events
565

 
- Using :checked
566

 
- Using :not
570

 
- Using :not
571

 
- Using :default
572

 
- Using :required / :optional
573

 
- Using :disabled / :enabled
575

 
- Using :valid / :invalid
577

 
- Using :in-range / :out-of-range
580

 
- Using :focus / :not(:focus)
581

 
- Using :focus-within
582

 
- Using :read-only / :read-write
584

 
- Using :indeterminate
586

 
- Using child pseudo-classes
588

 
- Using :first-child / :last-child
589

 
- Using :nth-child / :nth-last-child
593

 
- Using :first-of-type / :last-of-type
595

 
- Using :nth-of-type / :nth-last-of-type
596

 
- Using :only-child
597

 
- Using :only-of-type
598

 
- Using :empty
599

 
- Using :lang
601

 
- Using :root
602

 
- Using :target
603

Twenty-One
Pseudo-Elements
606

 
- Introduction
607

 
- Using ::first-letter
609

 
- Using ::first-line
611

 
- Using ::selection
612

 
- Using ::before / ::after
614

 
- Combining Pseudo Classes and Elements
615

 
- Exercise Eleven
618

Twenty-Two
CSS Counters
624

 
- Introduction
625

 
- Counters
626

 
- Different counter output
629

 
- counter-reset
632

 
- Exercise Twelve
636

Twenty-Three
CSS Opacity
638

 
- Introduction
639

 
- Images
640

 
- Opacity and Overlays
642

Twenty-Four
CSS Images
646

 
- Introduction
647

 
- filter
648

 
- filter (blur)
649

 
- filter (brightness)
650

 
- filter (contrast)
651

 
- filter (drop-shadow)
652

 
- filter (grayscale)
656

 
- filter (hue-rotate)
657

 
- filter (invert)
658

 
- filter (opacity)
659

 
- filter (saturate)
660

 
- filter (sepia)
661

 
- Combining filters
662

 
- mix-blend-mode
663

 
- object-fit
671

 
- object-fit (fill)
672

 
- object-fit (contain / scale-down)
673

 
- object-fit (cover)
674

 
- object-position
675

 
- clip-path
676

 
- clip-path (inset)
677

 
- clip-path (polygon)
678

 
- clip-path (circle / ellipse)
681

 
- clip-path without images
682

Twenty-Five
CSS Transform
683

 
- Introduction
684

 
- Rotate
685

 
- Rotating images
689

 
- 3d Rotate
690

 
- rotateX / rotateY
691

 
- rotate3d
693

 
- scale
694

 
- scaleX / scaleY / scaleZ / scale3d
696

 
- skew / skewX / skewY
697

 
- translate / translateX / translateY / translateZ
698

 
- backface-visibility
699

 
- transform-origin
700

Twenty-Six
CSS Transitions
702

 
- Introduction
703

 
- transition
704

 
- transition-timing-function
707

 
- transition with transform
710

 
- Exercise Thirteen
712

Twenty-Seven
CSS Animation
717

 
- Introduction
718

 
- @keyframes
719

 
- animation
722

 
- animation-timing-function
723

 
- animation-delay
726

 
- animation-direction
727

 
- animation-fill-mode
730

 
- animation-play-state
731

 
- sliding images
732

 
- Exercise Fourteen
736

Twenty-Eight
CSS Overlays
749

 
- Introduction
744

 
- CSS Overlay
746

 
- CSS Overlay with Menu
750

Twenty-Nine
CSS Sprites
756

 
- Introduction
757

 
- Sprite Example
758

 
- Using the Sprite file in CSS
759

 
- Using the Sprite file in HTML
760

Thirty
CSS for multi-platforms
762

 
- Introduction
763

 
- Mobile Websites
764

 
- Testing Dynamic Websites
766

 
- Responsive Design Mode
767

 
- Changes to the HTML
773

 
- Dynamic CSS
774

 
- Dynamic CSS with @media
775

 
- @media in CSS files
779

 
- CSS techniques for Responsive Design
781

 
- Exercise Fifteen
790

Sections of CSS 3 course

1
Introduction to Java

2
Using Java in Dos

3
First Steps to Programming in Java

4
Java Strings

5
Numbers in Java

6
Creating Variables in Java

7
Wrapper Classes in Java

8
Conditional Tests

9
Conditional Tests with Wrappers

10
Arrays

11
Object

12
Looping

13
Passing Arguments

14
Multiple Methods

15
Multiple Classes

16
Packages in Java

17
Regular Expressions in Java

18
Vectors

19
Hashtables

20
Enumeration

21
Concepts of OOPS

22
Interfaces

23
Access Methods in Java

24
Using OOPS in Java

25
Exception Handling in Java

26
Using Java Swing

27
Enums

28
HashMaps

29
Arraylist

30
Iterator

31
Dates in Java

32
Calendars in Java

33
System Properties

34
File Handling in Java

35
Reading XML Files

36
Reading and Writing Zip Files in Java

37
Accessing MySQL Databases in Java

38
Accessing Oracle Databases in Java

39
Developer Defined Exceptions

40
Creating JAR files

41
Using Javadoc


Synopsis for Essential CSS 3 training course

It's not just a pretty face, few people get below the surface of CSS and use its incredible depth of functionality.

Cascading Style Sheets are used when web developers need to design interesting and exciting web pages. So it's just used to make text a different colour? It’s a four day course, that can be taught in a few minutes !

CSS is one of the four main skills needs by web developers; HTML, JavaScript, PHP and of course CSS. We teach three of these, HTML we feel although the renderer of everything created and used by the other three, can be picked up without our training services.

Ideally Delegates should attend all three of our courses in no particular order although we recommend PHP, JavaScript then CSS.

What is CSS? Amongst other things CSS is a way of standardising the look and feel of web pages across the entire site, imagine for example, that a big website is created and maintained by a team of 12 people, each of the, responsible for an area of the site; One is a hipster who likes brown colours and a Victorian text font, another is a Goth who likes everything to be black and greys, you get the idea ? all in all a team with different taste and styles … and here is where CSS comes in, each individual can create the content they need for their various pages, but CSS can be used as the standard for colour, fonts, sizes and feel, in other words, presenting a professional and uniform looking website.

You are probably reading this synopsis of the CSS course on a handheld device, maybe your phone or a tablet, as a web developer we don’t know what you'll be using to view this, therefore CSS has to be used to give different renderings of the page according to the size of the device being used, this page, to use an example varies its text size according to the size of the screen being used, it’s the same page but if you view it in landscape, images will change size compared to their portrait version. This happens because we have CSS sets in the background reacting to your device and browser. If you are viewing on a desktop, the page will have the same content but will be rendered differently because we have a lot more real estate to fill.

So we have covered a few basic uses of CSS, reacting to device, varying and standardising look and feel but there is still a lot more to CSS. Did you know for example, CSS is now used for formatting the output of data, in the old days, web developers used the <table>, <tr> and <td> tags to create lines and columns of records? Nowadays CSS is used to control the 'stripes and rows' as we refer to it.

We're not going to tell you much more about what's in the course, below the synopsis we have reproduced the course index for you to review, all in all this amounts to 800 slides presented and discussed over a four day course.

Standard courses commence at 9am and finish each day at 4pm, this of course is flexible, if the Delegates need more time to work on the exercises or absorb some points, our Consultants will stay until everyone is happy.

When we are presenting our courses at your venue we can also offer you not only the choice of start date (weekends are not unheard of) but also the start and end times, this will allow your Delegates to fit the course in with their normal routine, recently on of our clients requested a 10am start so that the Delegates could attend various staff meetings each morning … happy to oblige !

Just before we finish, we forget … did we mention that you can change the colours of a font using CSS ?? ;-)

Request for detailsClick for the contact form for the Essential CSS 3 training course
Public Courses
Oracle Essential SQL 21c
Days
2
Pages
340
Exercises
8
Sections
15
Public
Yes
On-Site
Yes
Public Courses
Oracle Essential PLSQL 21c
Days
3
Pages
384
Exercises
13
Sections
25
Public
Yes
On-Site
Yes
Public Courses
Using SQL with Oracle SQL Developer 19.2
Days
4
Pages
884
Exercises
18
Sections
37
Public
Yes
On-Site
Yes
Public Courses
Essential JavaScript
Days
4
Pages
660
Exercises
16
Sections
31
Public
Yes
On-Site
Yes
Public Courses
Essential CSS 3
Days
4
Pages
800
Exercises
15
Sections
30
Public
Yes
On-Site
Yes
Public Courses
Essential SQLite 3
Days
3
Pages
550
Exercises
12
Sections
24
Public
Yes
On-Site
Yes
Public Courses
Essential MySQL 8
Days
4
Pages
533
Exercises
16
Sections
24
Public
Yes
On-Site
Yes
Public Courses
Essential Python 3
Days
5
Pages
955
Exercises
17
Sections
41
Public
Yes
On-Site
Yes
Public Courses
Oracle Application Express 20
Days
0
Pages
0
Exercises
0
Sections
0
Public
Yes
On-Site
Yes
Public Courses
PHP 8 and MySQL 8
Days
5
Pages
870
Exercises
23
Sections
38
Public
Yes
On-Site
Yes
Public Courses
Java 17 Programming with Eclipse 2021-12
Days
5
Pages
788
Exercises
23
Sections
44
Public
Yes
On-Site
Yes
Public Courses
Java 17 Swing with Eclipse 2021-12
Days
5
Pages
756
Exercises
19
Sections
35
Public
Yes
On-Site
Yes
Click on the course name to see full details, left and right to view other courses