REGISTER NOW FOR FREE CAREER GUIDANCE, CALL US AT +91-9878-100-815, +91-9878-200-815

CSS

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web and almost all web pages use CSS style sheets to describe their presentation. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed.

Who will get benefit from the Course?

Web professionals who are seeking to provide a more accessible design structure using Cascading Style Sheets and a more advanced & modern design visualization using Cascading Style Sheets.

Course Objectives

This CSS3 course will expose students to new features in CSS3. Students will learn to leverage the power and efficiency of this most recent version of CSS, learning how to use new selectors and pseudo elements; new font, color, and layout techniques; transforms, transitions, and animations; media queries for presenting on mobile devices; and more.

Requirements

A basic knowledge of HTML is required in order to make the most out of this CSS training session. If you are not familiar with HTML, we recommend you register for an HTML5 & CSS training session instead to learn the fundamentals of both HTML and CSS during a training program.

Technical Overview Training Course

Course Contents

Course Introduction

Why we are using CSS?

CSS  contains of what?

What all you need for learning CSS?

Skills Gained

The delegates will be introduced to:

Introduction of CSS

CSS Selectors

Applying CSS styles

CSS background effects

Working with text

Working with font

Working with CSS link & list

Working with tables

CSS border & outline

CSS margin

CSS Padding

CSS Dimension

CSS Display and Visibility

CSS Positioning

CSS Floating

CSS Alignment

CSS Combinators

CSS Pseudo-classes & Pseudo-elements

CSS Navigation Bar

Image Gallery


 

CASCADING STYLE SHEETS, Course Contents

Session 1

INTRODUCTION OF CSS

What is CSS?

Benefits of CSS

CSS Rules

CSS Types

CSS Comment

Session 2

CSS SELECTORS

Element Type Selector

Contextual Selector

Class Selector

Identifiers (ID)

Compound Selectors

Session 3

APPLYING CSS STYLES

Inline Styles

Embedded CSS

External Style Sheets

Session 4

CSS BACKGROUND EFFECTS

Background-color

Background-image

Background-repeat

Background-attachment

Background-position

Session 5

WORKING WITH TEXT

Text Alignment

Text Decoration

Text Transformation

Text Indentation

Text Color

Text Direction

Text Shadow

Session 6

WORKING WITH FONT

CSS Font Families

Font Style

Font Size

Set Font Size With Pixels

Set Font Size With Em

Use a Combination of Percent and Em

Session 7

WORKING WITH CSS LINK & LIST

Add different styles to hyperlinks

List-style

List-style-image

List-style-postion

List-style-type

Session 8

WORKING WITH TABLES

Table Borders

Collapse Borders

Table Width and Height

Table Text Alignment

Table Padding

Table Color

Make a fancy table

Set the position of the table caption

Session 9

CSS BORDER & OUTLINE

Border Style

Border Width

Border Color

Border - Individual sides

Border - Shorthand property

All the top border properties in one declaration

Sets all the left border properties in one declaration

Sets the width of the bottom border

Set the style of an outline

Set the color of an outline

Set the width of an outline

Session 10

CSS MARGIN

 Margin - Individual sides

Margin - Shorthand property

Set the top margin of a text using a cm value

Set the bottom margin of a text using a percent value

Session 11

CSS PADDING

Padding - Individual sides

Padding - Shorthand property

All the padding properties in one declaration

Set the left padding

Set the right padding

Set the top padding

Set the bottom padding

Session 12

CSS DIMENSION

Set the height of elements

Set the height of an image using percent

Set the width of an element using a pixel value

Set the maximum height of an element

Set the maximum width of an element using percent

Set the minimum height of an element

Set the minimum width of an element using a pixel value

Session 13

CSS DISPLAY AND VISIBILITY

Hiding an Element - display:none or visibility:hidden

CSS Display - Block and Inline Elements

Changing How an Element is Displayed

How to display an element as an inline element.

How to make a table element collapse

Session 14

CSS POSITIONING

Static Positioning

Fixed Positioning

Relative Positioning

Absolute Positioning

Overlapping Elements

Session 15

CSS FLOATING

What is CSS Float?

How Elements Float

Floating Elements Next to Each Other

Turning off Float - Using Clear

An image with border and margins that floats to the right in a paragraph

An image with a caption that floats to the right

Let the first letter of a paragraph float to the left

Creating a horizontal menu

Creating a homepage without tables

Session 16

CSS ALIGNMENT

CSS Horizontal Align

Aligning Block Elements

Center Aligning Using the margin Property

Left and Right Aligning Using the position Property

Crossbrowser Compatibility Issues

Left and Right Aligning Using the float Property

Session 17

CSS COMBINATORS

What is CSS Combinators?

Descendant Selector

Child Selector

Adjacent Sibling Selector

General Sibling Selector

Session 18

CSS PSEUDO-CLASSES & PSEUDO-ELEMENTS

The  first-line Pseudo-element

The  first-letter Pseudo-element

Pseudo-elements and CSS Classes

Multiple Pseudo-elements

CSS - The before Pseudo-element

CSS - The after Pseudo-element

Session 19

CSS NAVIGATION BAR

Vertical Navigation Bar

Horizontal Navigation Bar

Inline List Items

Floating List Items

Session 20

CSS IMAGE GALLERY, IMAGE OPACITY / TRANSPARENCY & IMAGE SPRITES

What is Image Gallery?

Creating a Transparent Image

Image Transparency - Hover Effect

Text in Transparent Box

Image Sprites - Create a Navigation List

Image Sprites - Hover Effect

 


CSS Course Contents

TESTIMONIALS

Go to top