Scribd
Upload
13 views

CSS Basics

The document discusses CSS (Cascading Style Sheets), which is used to style and lay out elements on web pages. CSS allows you to control text styles, spacing, and layout across multiple pages from a single stylesheet file. There are three ways to add CSS - external, internal, and inline stylesheets. When multiple stylesheets affect the same element property, the last rule defined takes precedence unless it is overridden with !important.

Uploaded by

Sameer Sohail
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

CSS Basics

The document discusses CSS (Cascading Style Sheets), which is used to style and lay out elements on web pages. CSS allows you to control text styles, spacing, and layout across multiple pages from a single stylesheet file. There are three ways to add CSS - external, internal, and inline stylesheets. When multiple stylesheets affect the same element property, the last rule defined takes precedence unless it is overridden with !important.

Uploaded by

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

CSS( Cascading Style Sheet)

1
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

2
CSS Syntax

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations separated
by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.

3
How to add CSS

• There are three ways of inserting CSS


– External CSS
– Internal CSS
– Inline CSS
• External CSS
– With an external style sheet, we can change the look of an
entire website by changing just one file!
– Each HTML page must include a reference to the external style
sheet file inside the <link> element, inside the head section.

4
Example of External CSS
• External styles are defined
<!DOCTYPE html> within the <link> element,
<html> inside the <head> section of
<head> an HTML page
<link rel="stylesheet" href="my
• An external style sheet can
style.css">
be written in any text editor,
</head>
and must be saved with
<body>
a .css extension.
<h1>heading</h1> • With an external style
<p>paragraph.</p> sheet, you can change the
look of an entire website by
</body> changing just one file
</html>
5
Example of External CSS

• Here is how the body {


"mystyle.css" file looks: background-
color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

6
Example of Internal CSS
<!DOCTYPE html>
<html>
<head> • An internal style sheet
<style>
body { may be used if one
}
background-color: pink;
single HTML page has a
h1 { unique style.
color: blue;
margin-left: 40px; • Internal styles are
}
</style> defined within the
</head>
<body>
<style> element, inside
<h1>heading</h1> the <head> section of
<p>paragraph.</p>
</body> an HTML page
</html>

7
Example of Inline CSS

<!DOCTYPE html> • An inline style may be


<html> used to apply a unique
<body>
style for a single
<h1 style="color:blue;text- element.
align:center;">heading</h1> • To use inline styles, add
<p style="color:red;">paragraph the style attribute to
.</p> the relevant element.
The style attribute can
</body>
</html> contain any CSS
property.
8
Multiple Style Sheets

• If some properties have been defined for the


same selector (element) in different style sheets,
the value from the last read style sheet will be
used.
• Assume that an external style sheet has the
following style for the <h1> element:
• h1 {
color: red;
}
9
Multiple Style Sheets

• Then, assume that an internal style sheet also has


the following style for the <h1> element:
• h1 {
color: blue;
}
• Now, if the internal style is defined after the link
to the external style sheet, the <h1> elements will
be “blue“:

10
Multiple Style Sheets

<head>
<link rel="stylesheet“ href="mystyle.css">
<style>
h1 {
color: blue;
}
</style>
</head>

11
Multiple Style Sheets

• If the internal style is <head>


defined before the link <style>
to the external style h1 {
sheet, the <h1> color: blue;
elements will be “red": }
</style>
<link rel="stylesheet“
href="mystyle.css">
</head>

12
Multiple Style Sheets

• If the internal style is defined before the link to the


external style sheet, but still we want blue color for <h1>
elements. Then we have to use !important rule.
• The !important rule in CSS is used to add more
importance to a property/value than normal.
• In fact, if we use the !important rule, it will override ALL
previous styling rules for that specific property on that
element.

13
Multiple Style Sheets

<head> • Now, the <h1> elements


<style> will be “blue”.
h1 {
color: blue !important;
}
</style>
<link rel="stylesheet“
href="mystyle.css">
</head>

14
15

You might also like