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