Sunday 13 June 2021
Wednesday 9 June 2021
Types of CSS
TYPES OF CSS
- Inline CSS
- Multi Line CSS
- Internal CSS
- External CSS
________________________________________
INLINE CSS :
An inline CSS is used to apply a unique style to a single HTML tag or element.
Syntax: <tag style="attribute:value">-----</tag>
Example:
<p style="color:red;">welcome 123</p>
<h2 style="background-color:yellow;">hello this is a INline Style</h2>
_______________________________________________
MULTI-LINE CSS :
An Multi Line CSS is used to apply a unique style to a single HTML tag or element with Multiple CSS Attributes or Properties.
Syntax: <tag style="attribute:value; attribute:value;">------</tag>
Example :
<p style="color:white; background-color:black;">Welcome 111</p>
<a href="" style="color:orange; background-color:maroon; padding:10px; text- decoration:none;">Home</a>
_________________________________________________
INTERNAL CSS:
internal CSS is used to define a style for a single HTML page. within a <style> element
Syntax:
<style>
----- css coding ----
</style>
Example:
<style>
p
{
color:red;
}
h1{ color:yellow; background-color:black;}
b
{
color:green;
background-color:pink;
font-size:30px;
padding:12px;
}
a{color:white; background-color:black; padding:10px; font-family:'Bauhaus 93'; text-decoration:none;}
</style>
<a href="">Home</a> <a href="">Contact Us</a><br><br><br><br>
<b>youtube.com/avadhtutor</b>
<h3>Learn All Programming</h3>
<p>AVADH TUTOR</p>
<h4>Internal</h4>
<h1> CSS</h1>
________________________________________
External CSS:
this style sheet you can change the look of an entire website by changing just one file, External CSS hash two files one is create with extension .css and another file with extension .html
Example:
Create File : external.css
body{ background-color:orange; }
p{ color:blue; font-size:21px; font-family:'Britannic'; }
h1{ background-color:yellow; }
Create File : simple.html
<link href="external.css" type="text/css" rel="stylesheet">
youtube.com/avadhtutor
<h1>External StyleSheet</h1>
<p>This is Simple Example</p>
_________________________
Learn All Programming and Scripting Languages with youtube.com/avadhtutor
Learn HTML For beginners : https://www.youtube.com/watch?v=oxIsm512PdM&list=PLkx9f4H3tJMKHviDIr-BsBd_h2dVtWWf5
Learn CSS For Beginners: https://www.youtube.com/watch?v=tJWtvmRanOc&list=PLkx9f4H3tJMKDiznW8Zus-4-N0mWlfkiB
Learn CSS3 For Beginners: https://www.youtube.com/watch?v=EHczBXp-cmc&list=PLkx9f4H3tJMJ2xk5lOUsfpexF0IH3_sOA
Simple Border Attribute Example Using CSS
Simple Border Attribute Example Using CSS
(Just Copy and past This Code to Your Editor like NotePad, SubLime, Atom, VS etc...)
Example 1: Using Border Style and Width Properties
<a href="" style="border-style:dotted; border-width:2px; ">Home</a>
<a href="" style="border-style:solid; border-width:3px; border-color:red;">Contact Us</a>
Example 2: Using Border Color and Style Properties
<p style="border-color:blue; border-style:inset; ">welcome 123</p>
<span style="border-color:blue; border-style:inset;">welcome 111</span>
Example 3: General Example
<p style="border-top-color:red; border-top-style:dotted; border-top-width:3px;
border-bottom-color:green; border-bottom-style:groove; border-bottom-width:4px;
border-right-color:orange; border-right-style:solid;
border-left-color:tomato; border-left-style:outset; ">welcome to Border Attribute</p>
How to create Background image and color using CSS Step by step Example
How to Create Background Image and Color Using CSS Step By Step
Example 1: Using HTML
<body background="nature.jpg">
Example 2: Using CSS with No-Repeat Attribute
<body style="background-image:url('nature.jpg'); background-repeat:no-repeat;">
Example 3: Using CSS Repeat Image Width Wise
<body style="background-image:url('nature.jpg'); background-repeat:repeat-x;"> -->
Example 4: Using CSS Repeat Image as Height Wise
<body style="background-image:url('nature.jpg'); background-repeat:repeat-y;">
_________________________________
Example 5: Using HTML Apply Background Color
<p bgcolor=red>welcome 123</p>
Example 6: Using CSS Apply Background Color
<p style="background-color:red;">welcome 123</p>
<p style="color:blue; background-color:yellow;">Hello this is a Color Attribute</p>
Example 7: General Example
<p style="background-image: url('1.png');">welcome <br>
Hello this is<br> welcome 123<br> aksjdk sdkj kasjklkl asljaskljkl askl </p>
<span style="background-image:url('1.png');">welcome to css<br> hello this is a test<br> cascading style sheet</span>
__________________________
Learn All Programming and Scripting Languages with youtube.com/avadhtutor
Learn HTML: https://www.youtube.com/watch?v=oxIsm512PdM&list=PLkx9f4H3tJMKHviDIr-BsBd_h2dVtWWf5
Learn CSS: https://www.youtube.com/watch?v=tJWtvmRanOc&list=PLkx9f4H3tJMKDiznW8Zus-4-N0mWlfkiB
learn CSS 3: https://www.youtube.com/watch?v=EHczBXp-cmc&list=PLkx9f4H3tJMJ2xk5lOUsfpexF0IH3_sOA
___________________________