Cascading Style Sheets, what is Cascading Style Sheets, Cascading Style Sheets in HTML ,why we use Cascading Style Sheets,types of Cascading Style Sheets, Define CSS , Cascading Style Sheets PDF notes Download, Cascading Style Sheets Notes Download, Cascading Style Sheets with example
What is Cascading Style Sheets ? what is CSS ? which is a current version of Cascading Style Sheets you are using? define different types of Cascading Style Sheets?
CSS long form is Cascading Style Sheets,
Cascading Style Sheets (CSS) mainly used for styling purpose or to beautify HTML Pages.
There are different version and type of CSS are thir
Most of the people were using Cascading Style Sheets2 Or CSS2 version but right now in 2015 2016 new version of CSS is CSS3 which gives us lots of new features to beautify HTML Pages.
As per the CSS used in HTML Pages CSS has Three Types
1. inline CSS or Inline Cascading Style Sheets
Inline is define using tag level CSS. it is limited to that tag only to which it is define but is is very powerful and having high Priority .lets take example how to define Inline Cascading Style to a paragraph.
< P style=" text-align:justify; Color: red">
hello Dear with you very happy and Healthy Life
here in above example i have defined tag where inline style is define using style tag where using double quote i am going to define look of my Paragraph .
Problem with inline css is if you want to define same style to multiple paragraph you have to write style for each and every paragraph it will increase your work which is not feasible and next time if you want to change something it will be headache for you.
to overcome from above problem new style type was defined as
2. Internal CSS or Internal Cascading Style Sheets
Internal CSS Define PAGE Level CSS. It is define in head section of your page using style (
< p>
hello Dear with you very happy and Healthy Life
If you Define Number of tag every paragraph on single page will take same style.
you can also define selector using Class Name or Using id as show following Example Define css using Class Name.
in Following example i have used class name main_txt which is define using DOT(.) before name of the class
to apply define class to particular tag i have use < p class="main_txt"> Class attribute of that tag as shown in example.
< style>
.main_txt{ text-align:justify;
Color: red;}
< p class="main_txt">
hello Dear with you very happy and Healthy Life
you can also define selector using ID as show following Example Define css using Class Name.
in Following example i have used class name main_txt which is define using Hash (#) before name of the class
to apply define class to particular tag i have use < p id="main_txt"> id attribute of that tag as shown in example.
< style>
#main_txt{ text-align:justify;
Color: red;}
< p id="main_txt">
hello Dear with you very happy and Healthy Life
Problem with the internal CSS is again same if your Project contain 10 pages then you have to use 10 internal css for each page separately that is again not maintainable if there are any change then headache.
So to Overcome form this Problem we use External CSS
3. External CSS or External Cascading Style Sheets
External CSS Define Project Level CSS. Define One CSS Page and use Multiple times in number of pages in your as shown in following example .
1. Style.css file (save saparte file using .css extension)
#main_txt{ text-align:justify;
Color: red;}
2. index. html page (add link tag in head section)
< p id="main_txt">
hello Dear with you very happy and Healthy Life
Priority OF Cascading Style Sheets High to Low
Inline Style Sheet > Internal Style sheet > External Style sheet
What is HTML? Define HTML
HTML long form is Hypertext Markup Language.
it is known as language of Browser.
Mainly HTML is used to Define Structure of webpages or Called as Structural Layer .
CSS used to Beautify HTML webpage or Also called Presentation Layer .
CSS2 Was Old Version Currently 2015-2016 CSS3 is Popular one
CSS2 Was Old Version Currently 2015-2016 CSS3 is Popular one
