×
Essential CSS 3
 
Name:
Company:
Email:
Telephone:
Training type:
Delegates:


Additional Information
 

Download our latest
Android and iPhone apps ...
Click on whichever one of our Apps you are interested in
List of Public Courses
Select the location for this training course

Essential CSS 3 course at a glance ...

Pages
800
No of slides in the Manual
Exercises
15
Total No of Exercises
Sections
30
No of main topics, see index below
Public
Yes
Public course in the UK and Ireland
On-Site
Yes
We can come to your venue
Level
1
1 - Beginners
2 - Intermediate
3 - Advanced
Days
4
Week days but we can put on weekend courses

Course Name: Essential CSS 3

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 7.1 and MySQL 5.7 Essential JavaScript
Contact us for the latest pricing
PDF - Course IndexClick to view the PDF index for the course

PDF - Exercise ExampleClick to view the PDF sample exercise

PDF - Sample PagesClick to view the PDF sample course pages

Request for details
Click for the contact form for the Essential CSS 3 training course

Synopsis for Essential CSS 3 training course

This course is offered as a public course or we can come to your venue, it provides four days learning CSS 3 and its intricate techniques

The purpose of this course is to help you build flexible and stunning websites using CSS 3, some HTML knowledge will be useful but the course concentrates on using CSS to make presentable and eye catching websites. The course covers good development techniques and all of the major aspects of this exciting rendering language.

Request for details
Click for the contact form for the Essential CSS 3 training course

Essential CSS 3 training
Exercise highlights
(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


Request for details
Click for the contact form for the Essential CSS 3 training course


Essential CSS 3 training course

Download our latest
Android and iOS apps ...

Papers and Periodicals App
Download A-Z Yoga app
Download SQL app
Download PHP app
Download MySQL app
Download MariaDB app
Click on whichever one of our Apps you are interested in
List of Public Courses
Select the location for this training course
×
Essential CSS 3
 
Name:
Company:
Email:
Telephone:
Training type:
Delegates:


Additional Information
 

Essential CSS 3 course at a glance ...

Duration: 4 days
Minimum skill level required: 1
(1 - Beginner, 2 - Experienced
3 - Advanced)
On-Site course:
Yes

Public course: Yes
No of pages in the manual: 800
Sections: 30
No of exercises: 15
Pre-Requisite course(s):
None
Suggested further course(s):
PHP 7.1 and MySQL 5.7 Essential JavaScript

Price guide: Contact us for the latest pricing

enquiries@seercomputing.com
or call us on +44 (0) 800 157 7519.

PDF - Course Index

PDF - Exercise Example

PDF - Sample Pages

Request for details
Click for the contact form for the Essential CSS 3 training course
This course is offered as a public course or we can come to your venue, it provides four days learning CSS 3 and its intricate techniques

The purpose of this course is to help you build flexible and stunning websites using CSS 3, some HTML knowledge will be useful but the course concentrates on using CSS to make presentable and eye catching websites. The course covers good development techniques and all of the major aspects of this exciting rendering language.
Scroll through these locations and find the one nearest to you.

Click on the location of your choice and that will take you to the dates for each course

Select the location and then click on the image to view the dates
Request for details
Click for the contact form for the Essential CSS 3 training course
×
Essential CSS 3
 
Name:
Company:
Email:
Telephone:
Training type:
Delegates:


Additional Information
 

Essential CSS 3 course at a glance ...

Duration: 4 days
Minimum skill level required: 1
(1 - Beginner, 2 - Experienced
3 - Advanced)
On-Site course:
Yes

Public course: Yes
No of pages in the manual: 800
Sections: 30
No of exercises: 15
Pre-Requisite course(s):
None
Suggested further course(s):
PHP 7.1 and MySQL 5.7 Essential JavaScript

Price guide: Contact us for the latest pricing

enquiries@seercomputing.com
or call us on +44 (0) 800 157 7519.

PDF - Course Index

PDF - Exercise Example

PDF - Sample Pages

Request for details
Click for the contact form for the Essential CSS 3 training course

Scroll left/right and then click on the course to view the details