Scribd
Upload
14 views

Introduction To CSS

The document introduces CSS (Cascading Style Sheets), its advantages, syntax, different types of stylesheets including inline, internal, external and multiple stylesheets. It also discusses CSS selectors including class and ID selectors. The document further explains CSS padding and margin properties.

Uploaded by

motaabhai8140
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Introduction To CSS

The document introduces CSS (Cascading Style Sheets), its advantages, syntax, different types of stylesheets including inline, internal, external and multiple stylesheets. It also discusses CSS selectors including class and ID selectors. The document further explains CSS padding and margin properties.

Uploaded by

motaabhai8140
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

*****************INTRODUCTION TO CSS**********************

What is CSS?
 CSS stands for Cascading Style Sheets.
 CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.

Advantages of CSS:
 CSS saves time:
o You can write CSS once and then reuse same sheet in multiple HTML pages.
 Pages load faster:
o If you are using CSS, you do not need to write HTML tag attributes every time.
Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So
less code means faster download times.
 Easy maintenance:
o To make a global change, simply change the style, and all elements in all the web
pages will be updated automatically.
 Platform Independence:
o The Script offer consistent platform independence and can support latest
browsers as well.
CSS - Syntax:
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts –

 Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

 You can put CSS Style Rule Syntax as follows –


o selector { property: value }

Types Of CSS / Stylesheet:


 CSS can be added to HTML documents in 3 ways:
1. Inline - by using the style attribute inside HTML elements
2. Internal - by using a <style> element in the <head> section
3. External - by using a <link> element to link to an external CSS file
4. Multiple CSS
 The most common way to add CSS is to keep the styles in external CSS files.
1. Inline CSS:
o Inline styles are CSS declarations that affect a single HTML element, contained
within a style attribute.
o If you want to use inline CSS, you should use the style attribute to the relevant
tag.
o Example:
<h1 style="color:blue;"> A Blue Heading</h1>
2. Internal CSS:
o An internal CSS is used to define a style for a single HTML page.
o An internal CSS is defined in the <head> section of an HTML page, within a
<style> element.
o Example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
background-color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 > This is Heading.</h1>
</body>
</html>

3. External CSS:
o An external style sheet is used to define the style for many HTML pages.
o To use an external style sheet, add a link to it in the <head> section of each HTML
page:
o Example:
Index.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 > This is Heading.</h1>
<p > This is Paragraph.</p>
</body>
</html>
style.css

body {

background-color: red;
}
h1 {
color: blue;
}
p{
color: white; }

4. External CSS:
o Actually Multiple Style Sheet is not a type of Style Sheets but it is a combination
of
 External Style Sheet,
 Internal Style Sheet and
 Inline Style Sheet
 as per designers requirement.
o We can use more then one style sheet in a HTML document file.
o This method of working with more then one style sheet that’s why it is known as
Multiple Style Sheet.
o Example:

Index.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body {
background-color: red;
}
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 > This is Heading.</h1>
<p style="font-size:20px;"> A red paragraph.</p>
</body>
</html>

style.css

body {
background-color: red;
}
p{
background-color: yellow;
}

CSS Selectors:
 There are two types of selector:
1. Class
2. ID
 CSS selectors select HTML elements according to its id, class, type, attribute etc.
1. Class:
 The .class selector 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.
 HTML elements can also refer to more than one class (look at Example 2
below).
 Syntax:
.class {
css declarations;
}

 Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
color: red;
text-align: center;
}
p.large {
font-size: 30px;
}
</style>
</head>
<body>
<p class="center large"> Skywin IT Academy</p>
</body>
</html>

2. ID:
 The #id selector styles the element with the specified id.
 Syntax:
#id {
css declarations;
}

 Example:
<!DOCTYPE html>
<html>
<head>
<style>
#firstname {
font-size: 25px;
color: blue;
}
</style>
</head>
<body>
<p id="firstname"> Skywin IT Academy</p>
</body>
</html>

CSS Padding Properties:


 An element's padding is the space between its content and its border.
 This property can have from one to four values.
 If the padding property has four values:
 padding: 10px 5px 15px 20px;
 top padding is 10px
 right padding is 5px
 bottom padding is 15px
 left padding is 20px
 If the padding property has three values:
 padding: 10px 5px 15px;
 top padding is 10px
 right and left padding are 5px
 bottom padding is 15px
 If the padding property has two values:
 padding: 10px 5px;
 top and bottom padding are 10px
 right and left padding are 5px
 If the padding property has one value:
 padding: 10px;
 all four paddings are 10px
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 10px;
 padding-right: 10px;
 Note: Negative values are not allowed
 Syntax:
Padding: length;
 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element.
 Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p{
padding: 70px;
}
</style>
</head>
<body>
<p> This element has a padding of 70px.</p>
</body>
</html>

CSS Margin Properties:


 The CSS margin properties are used to create space around elements, outside of
any defined borders.
 This property can have from one to four values.
o If the margin property has four values:
 margin :10px 5px 15px 20px;
 top margin is 10px
 right margin is 5px
 bottom margin is 15px
 left margin is 20px
o If the margin property has three values:
 margin :10px 5px 15px;
 top margin is 10px
 right and left margin are 5px
 bottom margin is 15px
o If the margin property has two values:
 margin :10px 5px;
 top and bottom margin are 10px
 right and left margin are 5px
o If the margin property has one value:
 margin :10px;
 all four margin are 10px
 margin-top: 10px;
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
 Note: Negative values are allowed.
 Syntax:
margin: length | auto;

 length - specifies a padding in px, pt, cm, etc.


 % - specifies a padding in % of the width of the containing element.
 Auto - The browser calculates a margin

 Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
p{
margin: 30px;
}
</style>
</head>
<body>
<p>
This element has a margin of 30px.
</p>
<p>
This element has a margin of 30px.
</p>
</body>
</html>

CSS Comments:
 Comments are used to explain the code, and may help when you edit the source code
at a later date.
 Comments are ignored by browsers.
 A CSS comment is placed inside the <style> element, and starts with /* and ends with
*/

 Syntax:
/* This is CSS Comment Text */

CSS Background Properties:


 The CSS Background properties allow you to control the background color of an
element.
 Set an image as the background, repeat a background image, vertically or
horizontally and position an image on a page.
[1] Background-color Property
[2] Background-image Property
[3] Background-repeat Property
[4] Background-attachment Property
[5] Background-position Property

1. Background-color:

 The background-color property sets the background color of an element.


 Syntax :
background-color: color | transparent;

 Example :
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: Orange; } OR
body { background-color: #ff9900; } OR
body { background-color: rgb(255,130,255; } OR
</style>
</head>
<body>
<h1> The background-color Property. </h1>
<p> The background color can be specified with a color name. </p>
</body>
</html>
 Output:

2. Background-image Property:
 The background-image property sets one or more background images for an
element.
 By default, a background-image is placed at the top-left corner of an element,
and repeated both vertically and horizontally.
 Syntax:
background-image: URL | none;

 Example:
<!DOCTYPE html>
<html>
<head>
<style>
body { background-image: url(“nature.jpg”); }
</style>
</head>
<body>
<h1> The background-image Property </h1>
<p> Hello World! </p>
</body>
</html>

 Output:

3. Background-repeat Property:
 The background-repeat property sets if/how a background image will be
repeated.
 By default, a background-image is repeated both vertically and horizontally.
 Syntax:
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
Value Description
repeat The background image is repeated both vertically and
horizontally
repeat-x The background image is repeated only horizontally

repeat-y The background image is repeated only vertically


no-repeat The background-image is not repeated. The image will
only be shown once

4. Background-attachment:
 The background-attachment property sets whether a background image scrolls
with the rest of the page, or is fixed.
 Syntax:
background-attachment: scroll | fixed;
Value Description
scroll The background image will scroll with the page. This is default.

fixed The background image will not scroll with the page.

5. Background-position:
 The background-position property sets the starting position of a background
image.
 Syntax:
background-position: value;

Value Description
left top
left center
left bottom
right top
right center If you only specify one keyword, the other value will be "center"
right bottom
center top
center center
center
bottom
x% y% The first value is the horizontal position and the second value is the
vertical. The top left corner is 0% 0%.
xpos ypos The first value xpos is the horizontal position and the second value
ypos is the vertical. The top left corner is 0 0.

CSS Font Properties:


 The CSS font properties allow you to change the font family, boldness, size & the style of a
text.
[1] Font-family Property
[2] Font-style Property
[3] Font-weight Property
[4] Font-size Property
[5] Font-variant Property
1. Font-family:
 The font-family property specifies the font for an element.
 There are 2 types of font families which you can use
o Specific Font-Family – This is a specific type of font like Arial, Verdana,
Tahoma, and Calibri.
o Generic Font-Family – This is a General Font and almost all browsers
support this generic font family. Example: serif, Sans-serif etc.
 Syntax :
o font-family: family-name|generic-family;

2. Font-style:
 The font-style property specifies the font style for a text.
 This property has three values:
o normal - The text is shown normally.
o italic - The text is shown in italics.
o oblique - The text is "leaning" (oblique is very similar to italic, but less
supported).
 Syntax:
o font-style: normal | italic | oblique;
 Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1> The Font-Style Property. </h1>
<p class="normal"> This is a normal Style. </p>
<p class="italic"> This is a italic Style. </p>
<p class="oblique"> This is a oblique Style. </p>
</body>
</html>

 Output:

3. Font-weight:
 The font-weight property sets how thick or thin characters in text should be
displayed.
 Syntax:
font-weight: normal | bold | bolder | lighter | number;
Value Description
normal Defines normal characters. This is
default, It is equal to the number value
400.
bold Defines thick characters, it is equal to
the number value 700.
bolder Defines thicker characters.
lighter Defines lighter characters.
100 Thin
200 Extra Light
300 Light
400 Normal
500 Medium
600 Semi Bold
700 Bold
800 Extra Bold
900 Ultra Bold
initial This sets the font-weight to the initial
(default) value.
inherit This sets the font-weight equal to the
value inherited from its parent element.

4. Font-size:
 The font-size property sets the size of the text.
 To allow users to resize the text (in the browser menu), many developers use em
instead of pixels.
 1em = 16px;
 Syntax:
font-size: (value)px;
5. Font-variant:
 The font-variant property is used to converted all lowercase letters into
uppercase letters. But the converted upper letters appear too small font-size
than the original uppercase letters.
 Syntax:
font-variant: normal|small-caps;

 Example:
 Output:

CSS Text Properties


 The CSS text properties allow you to change the appearance of text.
 It is possible to change the color of text, increase or decrease the space between
characters in a text, align a text, decorate a text, indent the first line in a text and
more.
[1] Color Property

[2] Text-align Property

[3] Text-decoration Property

[4] Text-transform Property

[5] Word-spacing Property

[6] Letter-spacing Property

1. Color:

 The color property specifies the color of text.


 Syntax:
Color: colorname;
 Example:
<!DOCTYPE html>

<html>

<head>

<style>

body {

color: red;

}
h1 {

color: #555555;

</style>

</head>

<body>

<h1>Skywin IT Academy</h1>

<p> IT training institute in surat</p>

</body>

</html>

 Output:

2. Text-align:
 The text-align property specifies the horizontal alignment of text in an
element.
 Syntax:
text-align: left | center |right | justify ;
Value Description Example
none It will not give any decoration to the
text. It is just like a normal text.
overline It will give a line on top of the text with
a 1px size.
line-through It will give the line from the middle of
the text with 1px size.
underline It will give a line at the bottom of the
text with a 1px size.

3. Text-decoration:
 Text-decoration property takes underline, overline, line-through, underline
overline values to decorate the text in different ways.
 Syntax:

text-decoration: none | overline | line-through |underline;

4. Text-transform:
 The text-transform property controls the capitalization of text.
 Syntax:
transform: uppercase | lowercase | capitalize | none;
t
Value Description Example
e Transforms all characters to uppercase.
uppercase SKYWIN IT ACADEMY
x
lowercase Transforms all characters to lowercase. skywin it academy
t
capitalize Transforms the first character in each word to Skywin It Academy
uppercase.
- Produces no capitalization effect at all.
none Normal Text

5. Word-spacing:
 The word-spacing property increases or decreases the white space
between words.
 Syntax:
Word-spacing: normal | length;
 Example:
<!DOCTYPE html>

<html>

<head>

<style>

.normal {

word-spacing: normal;

.length {

word-spacing: 5px;

</style>

</head>

<body>

<p class="normal"> Skywin IT Academy (normal) </p>

<p class="length"> Skywin IT Academy </p>

</body>

</html>

 Output:

6. letter-spacing :
 The letter-spacing property increases or decreases the space between
characters
in a text.
 Syntax:
Letter-spacing: normal | length;

 Example:
<!DOCTYPE html>

<html>

<head>

<style>

.normal {

letter-spacing: normal;

.length {

letter-spacing: 5px;

</style>

</head>

<body>

<p class="normal"> Skywin IT Academy (normal) </p>

<p class="length"> Skywin IT Academy </p>

</body>

</html>

 Output:
CSS Display Properties
 The display property specifies if/how an element is displayed.
 Every HTML element has a default display value depending on what type of element it
is. The default display value for most elements is block or inline.

No. Property value Description


1 inline Displays an element as an inline element.
2 block Displays an element as a block element.
3 contents Makes the container disappear, making the child elements
children of the element the next level up in the DOM

4 flex Displays an element as a block-level flex container


5 grid Displays an element as a block-level grid container
6 inline-block Displays an element as an inline-level block container.
7 inline-flex Displays an element as an inline-level flex container
8 inline-grid Displays an element as an inline-level grid container
9 inline-table The element is displayed as an inline-level table

1. Inline:
 This property is the default property of anchor tags. This is used to place the div inline
i.e. in a horizontal manner. The inline display property ignores the height and the
width set by the user.

Example:
2. Block:
 An element that has the display property set to block starts on a new line and takes
up the available screen width.
 It is used to display the elements like block elements. They are placed one below the
other. It is the default value of the <div> element. Here, the height and width can be
changed but if unspecified, it will take the width of the container.

Example :

3. Contents:
 The content property is used with the ::before and ::after pseudo-elements, to
insert generated content.

Example:

Before:

After:

1. Flex:
 A display of flex gives you access to the Flex layout system, which simplifies how we
design and layout our web pages.
 It is used to display the element as a block-level flex container. The items start from
the start edge of the main axis. The default flex-direction is row.
Example:

2. Grid:
 It is used display an element as a block-level grid container. An HTML element
becomes a grid container when this property used.

Example:

3. Inline-block:

 An element set to inline-block is very similar to inline in that it will set inline with the
natural flow of text. The difference is that you are able to set a width and height which
will be respected.

Example:

4. Inline-flex:
 The element behaves like an inline element and lays out its content according to the
flexbox model.
 It is equivalent to inline flex.
Example:

5. Inline-grid:
 The element behaves like an inline element and lays out its content according to the
grid model.
 It is equivalent to inline grid.

Example:

6. Inline-table:
 The inline-table value does not have a direct mapping in HTML. It behaves like an
HTML <table> element, but as an inline box, rather than a block-level box. Inside the
table box is a block-level context.

Example:
CSS Float

 The float property is used to change the normal flow of an element.


 It defines how an element should float and place an element on its container’s right or
left side.
 Note:
o The default value of the float property is none and it won’t work with the
absolutely positioned element.
 Syntax:

float: none | left | right | inherit | initial;

Value Description
none It is the default value of a float property. The element must no float.
left The element floats to the left of its container.
right The element floats to the right of its container.
Inherit Property must be inherited from its parent element.
initial Property is set to its default value.

 Example:
CSS Position
 The CSS position property is used to set position for an element.
 It is also used to place an element behind another and also useful for scripted
animation effect.
 There are five different types of position property available in CSS:
o Relative
o Absolute
o Static
o Fixed
o Sticky

 Syntax:
o Position: relative | absolute | static | fixed | sticky;
1. Relative:
 The relative positioning property is used to set the element relative to its normal
position.
 Also, it will react to the following properties:
o Top
o Bottom
o Left
o Right
2. Absolute:
 An element with position: absolute will be positioned with respect to its parent.
 The positioning of this element does not depend upon its siblings or the
elements which are at the same level.
 Also, it will react to the following properties:
o Top
o Bottom
o Left
o Right
3. Static:
 This method of positioning is set by default.
 If we don’t mention the method of positioning for any element, the element has
the position: static method by default.
 By defining Static, the top, right, bottom and left will not have any control over
the element.
4. Fixed:
 An element with fixed positioning allows it to remain at the same position even
we scroll the page.
 We can set the position of the element using the top, right, bottom, left.

5. Sticky:
 An element with position: sticky played a role between fixed & relative based on
the position where it is placed.
CSS Z-index

 The z-index property is used to displace elements on the z-axis i.e in or out of the
screen. It is used to define the order of elements if they overlap on each other.
 Note: z-index only works on positioned elements (position: absolute, position: relative,
position: fixed, or position: sticky) and flex items (elements that are direct children of
display:flex elements).
 Syntax:
z-index: auto|number|initial|inherit;

o z-index: 1;
 The z-index value is relative to the other ones. The target element is move in front of its
siblings.
o z-index: -1;
 You can use negative values. The target element is move in behind its siblings.

Value Description
auto The stack order is equal to that of the parent(default).

number The stack order depends in the number.

initial Sets the property to its default value.

inherit Inherits the property from the parent element.


CSS Opacity

 The CSS opacity property is used to specify the transparency of an element.


 The opacity property can take a value from 0.0 - 1.0. The lower value, the more
transparent:
 To change the opacity of a background only, use the background property with a color
value that allows for an alpha channel.
 For example:

background: rgba(0, 0, 0, 0.4);

 Example:

CSS Box - Shadow


 The CSS box-shadow property is used to apply one or more shadows to an element.
 The box-shadow can be described using X and Y offsets relative to the element, blur
and spread radius, and color.
 Syntax:

box-shadow: x y blur color;

 Example:
o box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
o box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
o box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
o box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
o box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px
2px 6px 2px;
 Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
box-shadow: 10px 10px 5px gray;
}
</style>
</head>
<body>
<div>Skywin IT Academy</div>
</body>
</html>

 Output:

CSS Important Property


 This rule overrides all previous styling rules -- the !important property increases its
priority.
 Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
h1 {
color: white !important;
}
body {
background-color: green !important;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Skywin IT Academy</h1>
<h2>Best IT Academy</h2>
</body>
</html>

 Output:

CSS Pseudo Elements


 A CSS pseudo-element is used to style specified parts of an element.
 As an example, a pseudo-element can be used to style the first letter or the first line of
an element. The pseudo-elements can also be used to insert the content after or before
an element.
 We have used the double colon notation (::pseudo-element) in the syntax.
 Syntax:
 selector:pseudo-element {property: value}
 selector.class:pseudo-element {property: value}

Pseudo-elements Description
::first-letter It selects the first letter of the text.

::first-line It styles the first line of the text.

::selection It is used to select the area of an element that is selected by


the user.
::marker It is used to selects the marker of a list item. (Use only the
color and font-properties )
::placeholder It is used to selects form elements with placeholder text, and
let you style the placeholder text
::before It is used to add something before the element's content.

::after It is used to add something after the element's content.


CSS 2D Transforms
 A transformation in CSS is used to modify an element by its shape, size and position.
 It transforms the elements along the X-axis and Y-axis.
 There are 6 main types of transformation which are listed below:

 translate()
 rotate()
 scale()
 scaleX()
 scaleY()
 skewX()
 skewY()
 skew()
 matrix()

CSS 3D Transforms
 It allows to change elements using 3D transformations.
 In 3D transformation, the elements are rotated along X-axis, Y-axis and Z-axis.
 There are three main types of transformation which are listed below:
 rotateX()
 rotateY()
 rotateZ()

rotateX() This rotation is used to rotate an elements around X-axis at a


given degree.
rotateY() This method is used to rotate an element around Y-axis at
given degrees.

rotateZ() This method is used to rotate an element around Z-axis at a


given degree.

You might also like