FSD CSS Part 2

CSS Selectors
CSS selectors are used to select any element and then apply CSS on it.
CSS Selectors are used in internal and external CSS. Although inline css is also an
option but it is never recommended to use.
A CSS Selector can select an element by its id, class, type, attribute, tag, etc.
Some popular CSS Selectors are:

• CSS Tag Selector
• CSS Id Selector
• CSS Class Selector
• CSS Group Selector
• CSS Universal Selector
This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
CSS Tag Selector
The Tag selector is used to select a element based on its tag name.
Any tag name in HTML can be used as a Tag Selector.
When you use a simple tag selector and give it some style, then all over the webpage
that tag's content will use the same CSS style.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Element Selector </title>
<meta charset="UTF-8">
<style>
p{
color: gray;
text-align: center;
}
</style>
</head>
<body>
<p> This style will be applied on every paragraph.. </p>
<p> paragraph 1 </p>
<p> paragraph 2 </p>
</body>
</html>
CSS ID Selector
CSS ID selector is used to select a particular element with a specific ID associated with it.
An ID of an element is unique in itself, no two elements can have same ID.
Defining an ID in CSS:
To define an ID of an element just use the id attribute. You can write anything as an ID
but it should start with an alphabet or an underscore(_).
Syntax:
<p id=“sample-id">The ID of this paragraph is ‘sample_id'.</p>
Note: When using ID Selectors, the hash(#) symbol is used in front of

ID name.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Id Selector </title>
<style>
#abc{
color: green;
text-align: center;
}
</style>
</head>
<body>
<p id=“abc"> Hello World! Welcome to FSD. </p>
<p> This paragraph is not affected by the style. </p>
</body>
</html>
CSS Class Selector
An ID is unique to the element whereas a class can be common to multiple elements. It

gives freedom from writing the same CSS multiple times for different elements. If the CSS
Style definition is same then just add a common class to the elements and only define CSS
for that particular class. It will be applied to all the elements with that class.
Defining a class in CSS:
To define a class for an element, just use the class attribute. You can write anything as an
class name but it should start with an alphabet or an underscore(_).
Syntax
<p> class=“sample-class">The class of this paragraph is ‘sample-class'.</p>
<p> class=“sample-class">This is 2nd paragraph with same class.</p>
Note: When using Class Selector, the dot(.) symbol is used in front of class
name.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Class Selector </title>
<style>
.sample {
color: orange;
text-align: center;
}
</style>
</head>
<body>
<h1 class=“sample"> This heading is orange and center-aligned. </h1>
<p class=“sample"> This paragraph is orange and center-aligned. </p>
</body>
</html>
CSS Dot(.) Selector
If you want to style only one specific HTML element with a common class name then
you can use the dot(.) selector.
Suppose there is one paragraph and one heading tag of same class, but you want to
stylize only the paragraph, then you should combine the tag name with class name by
using dot(.) selector. In this way, only the paragraph will get affected by the CSS and not
the Heading.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Class Selector </title>
<style>
p.abc {
color: seagreen;
text-align: center;
}
</style>
</head>
<body>
<h1 class=“abc"> This heading will not be affected. </h1>
<p class=“abc"> This paragraph will be seagreen and center-aligned. </p>
</body>
</html>
CSS Grouping(,) Selector
The grouping selector is a very handy selector in case of same CSS Styling for different
elements. It minimizes the code.
Suppose, there is a div, a heading and a paragraph and in all of these we want the font
color to be red. Instead of declaring same color property 3 times for all 3 elements we
can just declare it once using a comma(,).
It is not limited to tags only, multiple tags, IDs, or Classes can be given similar CSS by
using the comma(,).
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Grouping Selector </title>
<style>
h1, h2, p {
color: seagreen;
text-align: left;
}
</style>
</head>
<body>
<h1> Welcome to Talent Battle </h1>
<h2> Full Stack Development </h2>
<p> Cascading Style Sheet </p>
</body>
</html>
CSS Universal Selector
The universal selector is used to select and style all the elements in the webpage.
It is generally used to override default padding and margins on a webpage.
Universal Selector is represented by the asterisk(*) symbol.
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Universal Selector </title>
<style>
*{
color: green;
text-align: left;
font-size:20px;
}
</style>
</head>
<body>
<h1> This is heading 1. </h1>
<h2> This is heading 2 </h2>
<p> This style will be applied on every paragraph. </p>
</body>
</html>
CSS Background
CSS background property provide styling to the background of the HTML elements.
Background color <!DOCTYPE html>
<html lang="en">
<head>
The background-color <title> CSS Background </title>
property specifies the <meta charset="UTF-8">
background color of an <style>
element. body {
background-color: pink;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a pink background color!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Background Color </title>
<style>
h1 {
background-color: seagreen;
padding:10px;
}
p{
background-color: lightblue;
padding:10px;
}
</style>
</head>
<body>
<h1> CSS background-color example!</h1>
<p> This paragraph has its own background lightblue color.</p>
</body>
</html>
<!DOCTYPE html>
Background Image <html lang="en">
<head>
The background-image <title> CSS Background Image </title>
property sets an image in <meta charset="UTF-8">
the background of an <style>
element. body {
background-image: url(“sampleimagefsd.jpg”);
}
</style>
</head>
<body>
<h1> CSS background-image example! </h1>
<p> This is an example of Background Image. </p>
</body>
</html>
CSS Display
CSS display property is used to specify how an element should be displayed.
By this property, we can change the display behavior of an element like to set the inline
or block property manually, overriding the default style.
Syntax:
display : value;
CSS Display Values

Display: Inline
Display: Inline-Block
Display: Block
Display: None
<!DOCTYPE html>
<html lang="en">
CSS Display Inline <head>
<title> CSS Display Inline </title>
The inline value gives an <style>
li {
element the inline property, display: inline;
even if it's a block element. }
a{
text-decoration: none;
An inline element doesn't }
</style>
force line breaks and allows </head>
any other element to be <body>
<p>Display a list of links as a horizontal menu:</p>
added in the same line. <ul>
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
CSS Display Inline-Block <head>
<title> CSS Display Inline Block </title>
The inline-block value <style type="text/css">
div {
causes an element to display: inline-block;
generate a block box that background: seagreen;
padding: 10px;
will be flowed with }
surrounding content i.e. in span {
display: inline-block;
the same line as adjacent background: #efe7e7;
content. padding: 10px;
}
</style>
</head>
<body>
<div>
<span>This span element and its parent div element generate an inline-block box.</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
CSS Display Block <title> CSS Display Block </title>
It forces an element to <style type="text/css">
behave like block-level #span {
display: block;
element, i.e. the background: #F0E68C;
element added next to a padding: 10px;
}
block element will be #a {
displayed in the next display: block;
background: #90EE90;
line, like <div> or <p> text-decoration: none;
element. padding: 10px;
}
</style>
</head>
<body>
<p>
<a id="a" href="https://www.talentbattle.in"
target="_blank">Welcome to Talent Battle</a> <br>
<span id="span">This span element generates a block box.</span>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
CSS Display None <head>
This value hides the <title> CSS Display None </title>
element on the webpage. <meta charset="UTF-8">
The element doesn't even <style>
occupies space and gets #hidden {
hidden completely. display: none;
}
</style>
</head>
<body>
<h1">This line is a Visible.</h1>
<h1 id="hidden">This line is a hidden.</h1>
<p>This line is again visible.</p>
</body>
</html>

FSD CSS Part 2

Uploaded by

Document Information

Original Description:

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

FSD CSS Part 2

Uploaded by

Copyright:

Available Formats

CSS Selectors

Some popular CSS Selectors are:

Any tag name in HTML can be used as a Tag Selector.

An ID of an element is unique in itself, no two elements can have same ID.

<p id=“sample-id">The ID of this paragraph is ‘sample_id'.</p>

Note: When using ID Selectors, the hash(#) symbol is used in front of

An ID is unique to the element whereas a class can be common to multiple elements. It

Defining a class in CSS:

It is generally used to override default padding and margins on a webpage.

Universal Selector is represented by the asterisk(*) symbol.

CSS display property is used to specify how an element should be displayed.

CSS Display Values

You might also like