Scribd
Upload
1 views

CSS Document

The document provides an overview of CSS (Cascading Style Sheets), detailing three methods to apply styles: inline, internal, and external stylesheets. It explains various selectors, including simple, combination, pseudo-class, pseudo-element, and attribute selectors, along with their syntax and examples. Additionally, it describes how to target specific HTML elements based on their attributes and states to enhance web page design.

Uploaded by

chaithanyareddysalagari
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
1 views

CSS Document

The document provides an overview of CSS (Cascading Style Sheets), detailing three methods to apply styles: inline, internal, and external stylesheets. It explains various selectors, including simple, combination, pseudo-class, pseudo-element, and attribute selectors, along with their syntax and examples. Additionally, it describes how to target specific HTML elements based on their attributes and states to enhance web page design.

Uploaded by

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

CSS(Cascading Style

Sheets)
-----------------------------------------------------------------------------------
--------------------------------------------------------------------------

CSS:
====
* In Html we can upload the content in web page but using CSS we can make styles or
looks to that Html file.
* Three ways to apply styles to the file.

1. Inline Style Sheet:


======================
* In this we can apply styles in tag level. If we want to apply a style to
particular line or tag we use inline style.
Syntax:
=======
* style="property1:value1;property2:value2...."
Ex:
===
<p style="color:white;background:pink">This is paragraph</p>

2. Internal Style Sheet:


========================
* If we ant to apply style to whole web page we use internal style. This should
write in head.
Syntax:
=======
<head>
<style>
selector{
property1:value1;
property2:value2;
}
</style>
</head>

* Here selector can be anything like tag, list, id...


Ex:
===
<style>
p{
color: red;
background: green;
}
h1{
color: yellow;
}
</style>

3. External Style Sheet:


========================
* If we want to styles to multiple web pages we use.
* These styles should write in separate file and save with extension .css and link
this file to multiple web pages using <link> tag.
Syntax:
=======
<link rel="stylesheet" href="path of css file"> --> rel: Relation, href: Hyper
reference
Ex:
===
<link rel="stylesheet" href="styles.css">

* In file we write directly as internal style sheet.

<body>
<style>
p{
color: red;
background: green;
}
h1{
color: yellow;
}
</style>
</body>

Selectors:
==========
* These selectors are used in internal and external style sheets.
* These are referred to which elements in file should be styled.

1. Simple Selector:
==================
* If we want to apply to tags, id's, lists this simple selector will be used.
i. Tag Based:
=============
tagname(p or h1){
property: value;
property: value;
.
.
.
property: value;

ii. id Based:
=============
* If we want to apply styles to only some paragraphs
we use this.
To those particular paragraphs use id attribute and give value to them and use
those values while applying styles to that particular paragraphs only.
Syntax:
=======
#id{
property: value;
property: value;
.
.
.
property: value;

}
Ex:
===
<head>
#second{
color: white;
backgriundcolor: pink;
}
</head>
<body>
<p>this is paragraph</p>
<p>this is paragraph</p>
<p id="second">this is paragraph</p>
<p id="second">this is paragraph</p>
<p>this is paragraph</p>
<p>this is paragraph</p>
</body>
iii. Class Based:
===============
* If we want to apply some different tags we use this tag.
* If we want to apply styles to only some h tags and some p tags we use this class
based.
Syntax:
=======
.class{
property: value;
property: value;
.
.
.
property: value;

}
Ex:
===
<head>
<h2> This is heading</h2>
<h2 class="special"> This is heading</h2>
<h2 class="special"> This is heading</h2>
<h2> This is heading</h2>

.special{
color: white;
backgroundcolor: pink;
}
</head>
<body>
<p>this is paragraph</p>
<p>this is paragraph</p>
<p class="special">this is paragraph</p>
<p class="special">this is paragraph</p>
<p>this is paragraph</p>
<p>this is paragraph</p>
</body>

2. Combination Selector:
========================
* If we want apply styles to combination of tag & id or class & tag or list & tag
we use this selector.
i. Child Selector(>):
=====================
* If we want to apply styles to the direct children of that tag we use this.
<body>
<p>this is paragraph</p> --> Direct Child tag
<p>this is paragraph</p> --> Direct Child tag
<div>
<p>this is paragraph</p> --> This is direct child tag to div and Indirect
Child Tag to body.
<p>this is paragraph</p> --> This is direct child tag to div and Indirect
Child Tag to body.
</div>
</body>
Ex:
===
<head>
<style>
div > p{
colour: white;
}
</style>
</head>

ii. Descendent Selector(Space):


===============================
* It is also same as child selector but the only difference is in child selector
the style will be applied to only direct children but in descendent selector the
style will be applied to all the direct and indirect children of the tag.
Ex:
===
<head>
<style>
div p{
colour: white;
}
</style>
</head>

iii. Adjacent Sibling Selector(+):


==================================
* If we want to apply a style after the tag means if their is p tag and now i want
to apply style for h2 tag just after p tag.
Ex:
===
<head>
<style>
p+h2{
colour: white;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<h2>This is heading2</h2>
<h2>This is heading2</h2>
<p>This is paragraph</p>
<h3>This is heading2</h3>
</body>
* For the above html file the style will be applied to only first h2 tag. Because
it is the sibling of p tag.
iv. General Sibling Selector(~):
================================
* It is also same as adjacent sibling but in this the style will be applied to all
the tags after p tag.
Ex:
===
<head>
<style>
p~h2{
colour: white;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<h2>This is heading2</h2>
<h2>This is heading2</h2>
<p>This is paragraph</p>
<h3>This is heading2</h3>
</body>
* For the above html file the style will be applied to all first h2 tags after p
tag.

3. Pseudo-class Selectors:
==========================
* In the tags we have many states if we want to apply styles to that state means we
use this selector.
Syntax:
=======
selector:pseudo-classname
{
property= "value";
}

4. Pseudo-element Selectors:
============================
* In the Html file if we want to apply style to only the part of the content or
style to a particular letter in a word or a particular word in a paragraph we use
this selector.
Syntax:
=======
selector::pseudo-element{
property: value;
}
Ex:
===
* Common used pseudo elements are:
i. ::first-letter(:first-letter) --> If we want to apply style to first letter in
paragraph like making it big size and bold.
Ex:
===
<head>
<style>
h2::first-letter{
text-transform:uppercase
colour: white;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<h2>This is heading2</h2>
<h2>This is heading2</h2>
<p>This is paragraph</p>
<h3>This is heading2</h3>
</body>

ii. ::first-line(:first-line) --> If we want to apply style to first line in


paragraph like making it big size and bold.
Ex:
===
<head>
<style>
h2::first-line{
font-size:25px
colour: blue;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<h2>This is heading2</h2>
<h2>This is heading2</h2>
<p>This is paragraph</p>
<h3>This is heading2</h3>
</body>

iii. ::before(:before) -->If we already define the content and now we want to add
content before to that content we use this before.
Ex:
===
<head>
<style>
h2::before{
content:"before element is used
colour: blue;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<h2>This is heading2</h2>
<h2>This is heading2</h2>
<p>This is paragraph</p>
<h3>This is heading2</h3>
</body>

* In that before all h2 tags the content will be added.

iv. ::after(:after) -->If we already define the content and now we want to add
content after to that content we use this after.
Ex:
===
<head>
<style>
h2::after{
content:"after element is used
colour: blue;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<h2>This is heading2</h2>
<h2>This is heading2</h2>
<p>This is paragraph</p>
<h3>This is heading2</h3>
</body>

* In that after all h2 tags the content will be added.

v. selection --> If we want to apply style to selected content. It means generally


when we select the content the web page the background will be blue and the content
color will be white if we want to change that background and color of that content
we use this selection.
Ex:
===
<head>
<style>
p:: selection{
background:balck
colour: white;
}
</style>
</head>
<body>
<p>This is paragraph</p>
<h2>This is heading2</h2>
<h2>This is heading2</h2>
<p>This is paragraph</p>
<h3>This is heading2</h3>
</body>

5. Attribute Selectors:
=======================
* If we want to apply only if that is the case only means we should apply styles.
* Attribute selectors are useful when you want to style elements based on specific
attributes they possess or when you want to target elements that have certain
characteristics in common across your HTML document.

i. [attribute] --> the style will be applied only if the attribute is matched does
not depend on value.
Syntax:
=======
selector[attribute name]
{
property: value;
}

Ex:
===
<head>
<style>
p[title]{
background:balck
colour: white;
}
</style>
</head>
<body>
<p title="paragraph">This is paragraph</p>
<p title="para">This is paragraph</p>
</body>
* The style will be applied to both p tags.

ii. [attribute="value"] --> the style will be applied only if the attribute and
value is matched.
Syntax:
=======
selector[attribute=value]
{
property: value;
}

Ex:
===
<head>
<style>
p[title ="para"]{
background:balck
colour: white;
}
</style>
</head>
<body>
<p title="paragraph">This is paragraph</p>
<p title="para">This is paragraph</p>
</body>
* The style will be applied to only "para" p tag.

iii. [attribute~="value"] --> the style will be applied the attribute and value
is matched but the value don't need to be exact.
Syntax:
=======
selector[attribute~=value]
{
property: value;
}

Ex:
===
<head>
<style>
p[title~="para"]{
background:balck
colour: white;
}
</style>
</head>
<body>
<p title="paragraph">This is paragraph</p>
<p title="para">This is paragraph</p>
</body>
* The style will be applied to both "para" p tags because para is their in both p
tags.

iv. [attribute|="value"] --> the style will be applied the attribute and value is
matched or after that value their can be hyphen(-).
Syntax:
=======
selector[attribute|=value]
{
property: value;
}

Ex:
===
<head>
<style>
p[title|="para"]{
background:balck
colour: white;
}
</style>
</head>
<body>
<p title="paragraph">This is paragraph</p>
<p title="para">This is paragraph</p>
<p title="para-">This is paragraph</p>

</body>
* The style will be applied to last two "para" p tags because the last one is
having hyphen(-).

v. [attribute^="value"] --> the style will be applied the attribute should


matched and in the beginning of the value should be matched.
Syntax:
=======
selector[attribute^=value]
{
property: value;
}

Ex:
===
<head>
<style>
p[title^="para"]{
background: black;
colour: white;
}
</style>
</head>
<body>
<p title="paragraph">This is paragraph</p>
<p title="para">This is paragraph</p>
<p title="para-">This is paragraph</p>
</body>
* The style will be applied to all "para" p tags because the all the three p tags
are started with para.

vi. [attribute$="value"] --> the style will be applied the attribute should
matched and the value's last should me matched.
Syntax:
=======
selector[attribute$=value]
{
property: value;
}

Ex:
===
<head>
<style>
p[title$="para"]{
background: black;
colour: white;
}
</style>
</head>
<body>
<p title="paragraph">This is paragraph</p>
<p title="demo">This is paragraph</p>
<p title="graphpara">This is paragraph</p>

</body>
* The style will be applied to the last because only the last one is ending with
para.

vii. [attribute*="value"] --> the style will be applied the attribute should
matched and the value can be any where in the word.
Syntax:
=======
selector[attribute*=value]
{
property: value;
}

Ex:
===
<head>
<style>
p[title*="para"]{
background: black;
colour: white;
}
</style>
</head>
<body>
<p title="paragraph">This is paragraph</p>
<p title="demo">This is paragraph</p>
<p title="graphpara">This is paragraph</p>

</body>
* The style will be applied to the first and last para p tags.

You might also like