Scribd
Upload
19 views

CSS (Cascading Style Sheet)

Uploaded by

kamnachoudhary0512
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views

CSS (Cascading Style Sheet)

Uploaded by

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

CSS(cascading style sheet)

By : Parul Madan(CSE)
GEU
What is CSS?

• CSS stands for Cascading Style Sheets


• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once
• External stylesheets are stored in CSS files
Why to Learn CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify
the process of making web pages presentable.
some of the key advantages of learning CSS:
• Create Stunning Web site - CSS handles the look and feel part of a web page. Using CSS, you
can control the color of the text, the style of fonts, the spacing between paragraphs, how columns
are sized and laid out, what background images or colors are used, layout designs,variations in
display for different devices and screen sizes as well as a variety of other effects.
• Become a web designer - If you want to start a carrer as a professional web designer, HTML and
CSS designing is a must skill.
• Control web - CSS is easy to learn and understand but it provides powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the markup
languages HTML or XHTML.
• Learn other languages - Once you understands the basic of HTML and CSS then other related
technologies like javascript, php, or angular are become easier to understand.
Applications of CSS
• CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can
define a style for each HTML element and apply it to as many Web pages as you want.
• Pages load faster - 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 - To make a global change, simply change the style, and all elements in all the web
pages will be updated automatically.
• Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a
far better look to your HTML page in comparison to HTML attributes.
• Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of
device. By using the same HTML document, different versions of a website can be presented for
handheld devices such as PDAs and cell phones or for printing.
• Global web standards - Now HTML attributes are being deprecated and it is being recommended to
use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to
future browsers.
Prerequisites

• Basic word processing using any text editor.


• How to create directories and files.
• How to navigate through different directories.
• Internet browsing using popular browsers like Internet Explorer or Firefox.
• Developing simple Web Pages using HTML or XHTML.
Types of CSS (Cascading Style Sheet)

Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML
elements. It sets the background color, font-size, font-family, color etc., property of
elements on a web page.
There are three types of CSS which are given below:
• Inline CSS
• Internal or Embedded CSS
• External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.

E.g., <!DOCTYPE html>


<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GRAPHIC ERA
</p>
</body>
</html>
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The
CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the HTML
file.
.GEU {
E.g. font-style: bold;
<!DOCTYPE html> font-size:20px;
<html> }
</style>
<head>
</head>
<title>Internal CSS</title>
</head>
<style> <body>
.main { <div class = "main">
text-align: center; <div class ="GFG">GEU</div>
}
.GFG { <div class =“GEU">
color:#009900; A computer science portal for geeks
</div>
font-size:50px;
</div>
font-weight: bold;
</body>
} </html>
External CSS: External CSS contains separate CSS file which contains only style property with the
help of tag attributes (For example class, id, heading etc.). CSS property written in a separate file
with .css extension and should be linked to the HTML document using link tag. This means that for
each element, style can be set only once and that will be applied across web pages.
body { <!DOCTYPE html>
background- <html>
color:powderblue; <head>
} <link rel="stylesheet" href=“GEU.css"/>
.main { </head>

text-align:center;
<body>
} <div class = "main">
.GFG { <div class ="GFG">GeeksForGeeks</div>
color:#009900; <div id ="geeks">
font-size:50px; A computer science portal for geeks
font-weight:bold; </div>
} </div>
</body>
#geeks {
</html>
font-style:bold;
font-size:20px; • link tag is used to link the external style sheet with the html webpage.
} • href attribute is used to specify the location of the external style
Save this file with GEU.css sheet file.
Properties of CSS

Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded
followed by External CSS which has the least priority. Multiple style sheets can be defined
on one page. If for an HTML tag, styles are defined in multiple style sheets then the below
order will be followed.
• As Inline has the highest priority, any styles that are defined in the internal and external
style sheets are overridden by Inline styles.
• Internal or Embedded stands second in the priority list and overrides the styles in the
external style sheet.
• External style sheets have the least priority. If there are no styles defined either in inline
or internal style sheet then external style sheet rules are applied for the HTML tags.
CSS Selectors

We can divide CSS selectors into five categories:


• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between
them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)
Simple Selectors
• 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.
Syntax:
selector { property: value }

table{ border :1px solid #C00; }


Types of Simple Selectors
• The ID Selectors
• The Class Selectors
• The Descendant Selectors
• The Universal Selectors
• The Child Selectors
• The Attribute Selectors
• Grouping Selectors
1. Id selector:You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.
<html>
<head> • All the elements having that id will be formatted
according to the defined rule.
<style>
#black {
#intro {
color: #000000;
color: blue;
}
}
</style> • This rule renders the content in black for only <h1>
</head> elements with id attribute set to black.
<body>
h1#black {
<h1 id="intro">Header 1</h1> color: #000000;
}
<p>A paragraph.</p>
• all level 2 headings will be displayed in black color when
<p class="important">Note that this is an important those headings will lie with in tags having id attribute
paragraph. </p> set to black.
#black h2 {
</body> color: #000000;
</html> }
2.Class selector: You can define style rules based on the class attribute of the elements. All the elements having that class will
be formatted according to the defined rule.

<html> • This rule renders the content in black for


<head> every element with class attribute set
<style>
to black in our document. You can make it a
.intro {
bit more particular. For example −
color: blue;
} .black {
p.important {
font-style:bold;
color: #000000;
} }
</style>
</head>
<body> • This rule renders the content in black for only
<h1> elements with class attribute set
<h1 class="intro">Header 1</h1>
to black.
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p> h1.black {
</body>
color: #000000;
</html> }
3. Element Selector
<html>
<head>
<style>
p{
color: blue;
}
</style>
</head>
<body>

<h1 id="intro">Header 1</h1>


<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. </p>

</body>
</html>
4. Universal Selectors

<html>
<head>
<style>
*{
color: blue;
}
</style>
</head>
<body>

<h1 id="intro">Header 1</h1>


<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. </p>

</body>
</html>
5.Group selectors
<html>
<head>
h1, h2, h3 {
<style>
h1, h2, h3 {
color: #36C;
color: #36C;
font-weight: normal;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em; letter-spacing: .4em;
text-transform: lowercase;
} margin-bottom: 1em;
</style>
</head> text-transform: lowercase;
<body>
<h1 id="intro">Header 1</h1> }
<h2 id="intro">Header 1</h2>
<h3 id="intro">Header 1</h3>

<p>A paragraph.</p>

</body>
</html>
6.The Attribute Selectors
You can also apply styles to HTML elements with particular attributes. The style rule below will
match all the input elements having a type attribute with a value of text −
input[type = "text"] {
color: #000000;
}
The advantage to this method is that the <input type = "submit" /> element is unaffected, and the
color applied only to the desired text fields.
There are following rules applied to attribute selector.
• p[lang] − Selects all paragraph elements with a lang attribute.
• p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly "fr".
• p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word "fr".
• p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that are
exactly "en", or begin with "en-".
7. Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies
inside a particular element. As given in the following example, style rule will apply
to <em> element only when it lies inside <ul> tag.
ul em {
color: #000000;
}
8. Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is
very similar to descendants but have different functionality. Consider the following
example −
body > p {
color: #000000;
}
CSS Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
• CSS Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
• CSS Color Values
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
CSS Backgrounds

The CSS background properties are used to define the background


effects for elements.
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Background color
• h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p{
background-color: yellow;
}
Opacity / Transparency: It can take a value from 0.0 - 1.0
div {
background-color: green;
opacity: 0.3;
Background image
The background-image property specifies an image to use as the background of an element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>
CSS background-repeat

By default, the background-image property repeats an image both


horizontally and vertically.
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
repeat-y;
repeat;
no-repeat;
CSS background-position

The background-position property is used to specify the position of the


background image.
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
CSS background-attachment

The background-attachment property specifies whether the


background image should scroll or be fixed (will not scroll with the rest
of the page):
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Or background-attachment: scroll;
CSS background - Shorthand property

Use the shorthand property to set the background properties in one


declaration:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:

•background-color
•background-image
•background-repeat
•background-attachment
•background-position
CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element's border.
CSS Border Style:

•dotted - Defines a 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
•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
Ex.

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;}
CSS Border Width
• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values:
thin, medium, or thick : e.g.
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}
CSS Border Color
The border-color property is used to set the color of the four borders.
The color can be set by:
• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• Transparent
<style>
p.one
{
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
</style>
CSS Border - Shorthand Property

The border property is a shorthand property for the following individual


border properties:
• border-width
• border-style (required)
• border-color
e.g.
p{
border: 5px solid red;
}
CSS Margins

The CSS margin properties are used to create space around elements,
outside of any defined borders.
CSS has properties for specifying the margin for each side of an
element:
• margin-top
• margin-right
• margin-bottom
• margin-left
Margin - Shorthand Property
The margin property is a shorthand property for the following individual margin properties:
margin: 25px 50px 75px 100px;
• Top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px
margin: 25px 50px 75px;
• top margin is 25px
• right and left margins are 50px
• bottom margin is 75px
margin: 25px 50px;top and bottom margins are 25px
• right and left margins are 50px
margin: 25px;
• all four margins are 25px
CSS Margin Collapse

• Top and bottom margins of elements are sometimes collapsed into a single margin
that is equal to the largest of the two margins.
• This does not happen on left and right margins. Only top and bottom margins.
h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}
common sense would seem to suggest that the vertical margin between the <h1> and
the <h2> would be a total of 70px (50px + 20px). But due to margin collapse, the actual
margin ends up being 50px.
CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.
CSS has properties for specifying the padding for each side of an element:
• padding-top
• padding-right
• padding-bottom
• padding-left
e.g.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS height and width Values
The height and width properties are used to set the height and width of an element.
The height and width properties do not include padding, borders, or margins. It sets the height/width
of the area inside the padding, border, and margin of the element.
The height and width properties may have the following values:
• auto - This is default. The browser calculates the height and width
• length - Defines the height/width in px, cm etc.
• % - Defines the height/width in percent of the containing block
• initial - Sets the height/width to its default value
• inherit - The height/width will be inherited from its parent value
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about
design and layout. The CSS box model is essentially a box that wraps around every HTML element. It
consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:
• Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the
borders, to make the element "stand out".
CSS has the following outline properties:
• outline-style
• outline-color
• outline-width
• outline-offset
• outline
CSS Outline Shorthand
The outline property is a shorthand property for setting the following individual
outline properties:
• outline-width
• outline-style (required)
• outline-color
CSS Outline Offset

The outline-offset property adds space between an outline and the


edge/border of an element. The space between an element and its
outline is transparent.
p{
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
CSS Layout - float and clear

The CSS float property specifies how an element should float.


The CSS clear property specifies what elements can float beside the cleared element and on which side.
The float property can have one of the following values:
• left - The element floats to the left of its container
• right - The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in the text). This is default
• inherit - The element inherits the float value of its parent
img {
float: right;
}
CSS Layout - Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to
fit in the specified area.
The overflow property has the following values:
• visible - Default. The overflow is not clipped. The content renders outside the element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible
• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
• auto - Similar to scroll, but it adds scrollbars only when necessary
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;//default is visible.
}

You might also like