Scribd
Upload
13 views

CSS-1

Uploaded by

ManmathNath Das
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views

CSS-1

Uploaded by

ManmathNath Das
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

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

Inline CSS
 We can apply CSS 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;"> </


htmltag>

Example:-

<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this


heading.</h2>
<p>This paragraph is not affected.</p>

Internal CSS
The internal style sheet is used to add a unique style for a single
document. It is defined in <head> section of the HTML page inside the
<style> tag.
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>

External CSS

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.
What are Comments in CSS?

Comments are used in CSS (Cascading Style Sheets) to add clarifications or


reminders to the code that the browser ignores when rendering the webpage.
Comments can be used to explain your CSS code, give other developers or
yourself context, and temporarily turn off specific pieces of code without
completely removing them.

CSS comments are written between /* and */.

CSS Selector

CSS selectors are used to select the content you want to style. Selectors are the
part of CSS rule set. CSS selectors select HTML elements according to its id,
class, type, attribute etc.

There are several different types of selectors in CSS.

1. CSS Element Selector


2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector

1) CSS Element Selector

The element selector selects the HTML element by name.

<!DOCTYPE html>

<html>

<head>

<style>

p{

text-align: center;

color: blue;

</style>
</head>

<body>

<p>This style will be applied on every paragraph.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Output:

This style will be applied on every paragraph.

Me too!

And me!

2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific


element. An id is always unique within the page so it is chosen to select a single,
unique element.

It is written with the hash character (#), followed by the id of the element.

Let?s take an example with the id "para1".

<!DOCTYPE html>

<html>

<head>

<style>

#para1 {

text-align: center;

color: blue;
}

</style>

</head>

<body>

<p id="para1">Hello Javatpoint.com</p>

<p>This paragraph will not be affected.</p>

</body>

</html>

Output:

Hello Javatpoint.com

This paragraph will not be affected.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is
used with a period character . (full stop symbol) followed by the class name.

Note: A class name should not be started with a number.

Let's take an example with a class "center".

<!DOCTYPE html>

<html>

<head>

<style>

.center {

text-align: center;

color: blue;
}

</style>

</head>

<body>

<h1 class="center">This heading is blue and center-aligned.</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

</body>

</html>

Output:

This heading is blue and center-aligned.

This paragraph is blue and center-aligned.

CSS Class Selector for specific element

If you want to specify that only one specific HTML element should be affected
then you should use the element name with class selector.

Let's see an example.

<!DOCTYPE html>

<html>

<head>

<style>

p.center {

text-align: center;

color: blue;

}
</style>

</head>

<body>

<h1 class="center">This heading is not affected</h1>

<p class="center">This paragraph is blue and center-aligned.</p>

</body>

</html>

Output:

This heading is not affected

This paragraph is blue and center-aligned.

4) CSS Universal Selector

The universal selector is used as a wildcard character. It selects all the elements
on the pages.

<!DOCTYPE html>

<html>

<head>

<style>

*{

color: green;

font-size: 20px;

</style>

</head>
<body>

<h2>This is heading</h2>

<p>This style will be applied on every paragraph.</p>

<p id="para1">Me too!</p>

<p>And me!</p>

</body>

</html>

Output:

This is heading

This style will be applied on every paragraph.

Me too!

And me!

5) CSS Group Selector

The grouping selector is used to select all the elements with the same style
definitions.

Grouping selector is used to minimize the code. Commas are used to separate
each selector in grouping.

Let's see the CSS code without group selector.

h1 {

text-align: center;

color: blue;

h2 {

text-align: center;
color: blue;

p{

text-align: center;

color: blue;

As you can see, you need to define CSS properties for all the elements. It can be
grouped in following ways:

h1,h2,p {

text-align: center;

color: blue;

Let's see the full example of CSS group selector.

<!DOCTYPE html>

<html>

<head>

<style>

h1, h2, p {

text-align: center;

color: blue;

</style>

</head>

<body>
<h1>Hello Javatpoint.com</h1>

<h2>Hello Javatpoint.com (In smaller font)</h2>

<p>This is a paragraph.</p>

</body>

</html>

Output:

Hello Javatpoint.com

Hello Javatpoint.com (In smaller font)

This is a paragraph.

You might also like