Introduction to css ppt presentation

Click to edit Master title style

WHAT IS CSS

PSK TECHNOLOGIES PVT.LTD. IT COMPANY h t t p s : / / w w w. p s k i t s e r v i c e s . c o m Contact: 9975288300

1

Click to edit Master title style

WHAT IS CSS  CSS stands for Cascading Style Sheets.  CSS describes how HTML elements are to be d i s p l a y e d o n s c r e e n , p a p e r, o r i n o t h e r m e d i a .  CSS saves a lot of work. It can control the layout of multiple web pages all at once.  External style sheets are stored in CSS files.

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

2 2

Click to edit Master title style

WHY USE CSS?

CSS is used to define styles for your web pages, including the design, layout and v a r i a t i o n s i n d i s p l a y f o r d i ff e r e n t d e v i c e s a n d screen sizes.

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

3 3

Click to edit Master title style

CSS SOLVED A BIG PROBLEM

 CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.  HTML was NEVER intended to contain tags for formatting a web page!  HTML was created to describe the content of a web page, like: <h1>This is a heading</h1> <p>This is a paragraph</p> https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

4 4

Click to edit Master title style

 When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers.  Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.  To solve this problem, the World Wide Web Consortium (W3C) created CSS  CSS removedhttps://www.pskitservices.com the style formattingcontact: from 9975288300 the HTML page! https://www.pskitservices.com contact: 9975288300

5 5

Click to edit Master title style CSS SYNTAX

 A CSS rule-set consists declaration block:

of

a

selector

and

a

 Selector points to the HTML element you want to style. https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

6 6

Click to edit Master title style  The declaration block contains one or more declarations separated by semicolon.  Each declaration includes a CSS property name and a value, separated by a colon.  A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

7 7

Click to edit Master title style

THE ID SELECTOR  The id selector uses the id attribute of an HTML element to select a specific element.  The id of an element should be unique within a page, so the id selector is used to select one unique element!  To select an element with a specific id, write a hash (#) character, followed by the id of the element.

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

8

Click to edit Master title style

THE CLASS SELECTOR  The class selects elements with a specific class attribute.  To select elements with a specific class, write a period (.) character, followed by the name of the class.  In the example below, all HTML elements with class="center" will be red and center-aligned:

https://www.pskitservices.com contact: 9975288300

9 9

Click to edit Master title style

THREE WAYS TO INSERT There are three ways of inserting CSS a style sheet:  External style sheet  Internal style sheet  Inline style https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

10 10

Click to edit Master title style

EXTERNAL STYLE SHEETS  With an external style sheet, you can change the look of an entire website by changing just one file!  Each page must include a reference to the external style sheet file inside the <link> element.  The <link> element goes inside the <head> section: https://www.pskitservices.com contact: 9975288300

11 11

Click to edit Master title style

BORDER STYLE

The border style property specifies what kind of border to display.

The following values are allowed:  Dotted - Defines dotted border  dashed - Defines a dashed border  solid - Defines a solid border  double - Defines a double border  groove - Defines a 3D grooved border. The effect depends on the border-color value https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

12 12

Click to edit Master title style ridge - Defines a 3D ridged border. The effect depends on the border-color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset border. The effect depends on the border-color value none - Defines no border hidden - Defines a hidden border The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border) https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

13 13

Click to edit Master title style

EXAMPLE – p. dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

14 14

RESULT: Click to edit Master title style A Dotted border A Dashed border A Solid border A Double border A Groove border. The effect depend on the border color value.

A Ridge border. The effect depend on the border color value.

An inset border. The effect depend on the border color value.

An outset border. The effect depend on the border color value.

No border Hidden border Mix border https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

15 15

Click to edit Master title style

MARGIN - INDIVIDUAL CSS has properties for specifying the margin SIDES

for each side of an element:  margin-top  margin-right  margin-bottom  margin-left

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

16 16

Click to edit Master title style All the margin properties can have the following values:  auto - the browser calculates the margin  length - specifies a margin in px, pt, cm, etc.  % - specifies a margin in % of the width of  inherit - specifies that the margin should be inherited from the parent element

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

17 17

Click to edit Master title style

MARGIN - SHORTHAND To shorten the code, it is possible to specify all the PROPERTY margin properties in one property The margin property is a shorthand property for the following individual margin properties:  Margin-top  Margin-right  Margin-bottom  Margin-left https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

18 18

Click to edit Master title style So, here is how it works: If the margin property has four values: Margin: 25px 50px 75px 100px; Top margin is 25px Right margin is 50px Bottom margin is 75px Left margin is 100px

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

19 19

Click to edit Master title style

If the margin property has three values: Margin: 25px 50px 75px;  Top margin is 25px  Right and left margins are 50px  Bottom margin is 75px

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

20 20

Click to edit Master title style

PADDING - SHORTHAND To shorten the code, it is possible to specify all the PROPERTY padding properties in one property.

The padding property is a shorthand property for the following individual padding properties: Padding-top Padding-right Padding-bottom Padding-left So, here is how it works: https://www.pskitservices.com /contact: 9975288300

21 21

Click to edit Master title style

If the padding property has four values:  padding: 25px 50px 75px 100px;  Top padding is 25px  Right padding is 50px  Bottom padding is 75px  Left padding is 100px

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

22 22

Click to edit Master title style

STYLING Links can be styled with any CSS property (e.g. color, LINKS font-family,background, etc.)

In addition, links can be styled differently depending on what state they are in.

The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

23 23

Click to edit Master title style

OUR SOFTWARE COURCES

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

24 24

Click to edit Master title style

OUR HARDWARE COURCES MCITP

NETWORKING

HARDWARE

CCNA

CCNP

LINUX

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

25 25

Click to edit Master title style

OUR SERVICES WEBSITE DESIGNING & DEVELOPMENT

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

26 26

Click to edit Master title style IT TRAINING

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

27 27

Click to edit Master title style DIGITAL MARKETING

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

28 28

Click to edit Master title style LAPTOP SALES AND SERVICES

https://www.pskitservices.com contact: 9975288300 https://www.pskitservices.com contact: 9975288300

29 29

Click to edit Master title style

PSK TECHNOLOGIES PVT. LTD. IT COMPANY

FOLLOW US ON: Address: Plot no-780, Near Durga Temple, Katol Road Chhaoni, Nagpur-13 https:/www.pskitservices.com Contact: 9975288300

30