Lesson 1 Introduction To Cascading Style Sheet

 CSS stands for Cascading Style Sheet.
 CSS is used to design HTML tags.

 CSS is a widely used language on the web.
 HTML, CSS and JavaScript are used for web
designing. It helps the web designers to apply
style on HTML tags.
<!DOCTYPE> p{
<html> color:blue;
<head> }
<style> </style>
h1{ </head>
color:white; <body>
background-color:red; <h1>Write Your First CSS Example</h1>
padding:5px;
} <p>This is Paragraph.</p>
</body>
</html>
Output
• CSS stands for Cascading Style Sheets
• It is a style sheet language which is used to describe the look
and formatting of a document written in markup language.
• It provides an additional feature to HTML.
• It is generally used with HTML to change the style of web pages
and user interfaces.
• It can also be used with any kind of XML documents including
plain XML, SVG and XUL.
• You can add new looks to your old HTML documents.
• You can completely change the look of your website with only a
few changes in CSS code.
1. Solves big problem

• It was W3C recommendation to solve tags problems like
font, color, background style, element alignments, border
and size and avoid repetitive use of tags in every page
2. Saves a lot of time
• CSS style definitions are saved in external CSS files so it is
possible to change the entire website by changing just one
file.
3. Provides more attribute
• CSS provides more detailed attributes than plain HTML to
define the look and feel of the website.
Selector: Selector indicates the HTML element you want to style.
It could be any tag like <h1>, <title> etc.
Declaration Block: The declaration block can contain one or
more declarations separated by a semicolon. For the above
example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;
Each declaration contains a property name and value, separated

by a colon.
Property: A Property is a type of attribute of HTML element. It
could be color, border etc.
Value: Values are assigned to CSS properties. In the above
example, value "yellow" is assigned to color property.
Selector{Property1: value1; Property2: value2; ..........;}

CSS is added to HTML pages to format the document according to
information in the style sheet.
There are three ways to insert CSS in HTML documents.

1. Inline CSS
2. Internal CSS
3. External CSS
Inline CSS is used to apply CSS on a single line or element.
For example:
<p style="color:blue">Hello CSS</p>
CSS is apply in a single element by inline CSS technique.
• The inline CSS is also a method to insert style sheets in HTML

document.
• This method mitigates some advantages of style sheets so it is
advised to use this method sparingly.
If you want to use inline CSS, you should use the style attribute to
the relevant tag.
Syntax:
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmlt

ag>
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red;margin-left:40px;">Inline CSS is applied on this
heading.</h1>
<p>This paragraph is not affected.</p>
</body>
</html>
 You cannot use quotations within inline CSS. If you use
quotations the browser will interpret this as an end of your
style value. https://www.javatpoint.com/inline-css
 These styles cannot be reused anywhere else.
 These styles are tough to be edited because they are not
stored at a single place.
 It is not possible to style pseudo-codes and pseudo-classes
with inline CSS.
 Inline CSS does not provide browser cache advantages.
Internal CSS is used to apply CSS on a single document or
page. It can affect all the elements of the page. It is written
inside the style tag within head section of html.
For example:
<style>
p{color:blue}
</style>
For example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: Red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output:
External CSS is used to apply CSS on multiple pages or all pages.
Here, we write all the CSS code in a css file. Its extension must be
.css for example style.css.
For example:
p{color:blue}
You need to link this style.css file to your html pages like this:
<link rel="stylesheet" type="text/css" href="style.css">
The link tag must be used inside head section of html.

The external style sheet is generally used when you want to make
changes on multiple pages. It is ideal for this condition because it
facilitates you to change the look of the entire web site by changing
just one file.
It uses the <link> tag on every pages and the <link> tag should be
put inside the head section.
Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The external style sheet may be written in any text editor but must
be saved with a .css extension. This file should not contain HTML
elements.
Let's take an example of a style sheet file named "mystyle.css".
File: mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
The external style sheet may be written in any text editor but must
be saved with a .css extension. This file should not contain HTML
elements.
Let's take an example of a style sheet file named "mystyle.css".
File: mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Note: You should not use a space between the property value and the unit. For
example: It should be margin-left:20px not margin-left:20 px.
CSS comments are generally written to explain your code. It is very
helpful for the users who reads your code so that they can easily
understand the code.
Comments are ignored by browsers.
Comments are single or multiple lines statement and written within

/*............*/ .
Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
</style>
</head>
<body>
<p>Hello Javatpoint.com</p>
<p>This statement is styled with CSS.</p>
<p>CSS comments are ignored by the browsers and not shown in
the output.</p>
</body>
</html>
Output

Lesson 1 Introduction To Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Lesson 1 Introduction To Cascading Style Sheet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 1 Introduction To Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

 CSS stands for Cascading Style Sheet.

 CSS is used to design HTML tags.

1. Solves big problem

Each declaration contains a property name and value, separated

Selector{Property1: value1; Property2: value2; ..........;}

There are three ways to insert CSS in HTML documents.

• The inline CSS is also a method to insert style sheets in HTML

<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmlt

<link rel="stylesheet" type="text/css" href="style.css">

The link tag must be used inside head section of html.

Let's take an example of a style sheet file named "mystyle.css".

Let's take an example of a style sheet file named "mystyle.css".

Comments are ignored by browsers.

Comments are single or multiple lines statement and written within

You might also like