CSS is a language. The full form of CSS is Cascading Style Sheet.Through this language you can change the style of the web page.That is, you can make the web page colourful and have the elements displayed in the structure form properly.The only work of CSS is to make this web page and website attractive.We have used the style tag in HTML and these are the properties of CSS.With CSS you can save a lot of your time.
This means that whenever you design a web page, you will not have to write CSS code again and again.Inline, internal and external CSS are used to design the web page. These three types of CSS can also be used simultaneously.
CSS BASICh1 {font-family: Georgia, sans-serif;}
p {font-family: Tahoma, serif;}
CSS: For Body Tag
body {margin: 20px;}
CSS: For Combine Elements
h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}
color: #009900;
font-family: Georgia, sans-serif;
}
CSS: FOR Comments
/* This is a comment */
CSS: FOR Create Class
.container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
HTML: FOR Call CSS Class
<div class="container">
Dot is used to create a css class
</div>
CSS: FOR Create ID
#container{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
HTML: FOR Call CSS ID
<div ID="container">
Hash is used to create a css ID
</div>
CSS SELECTOR
There are many different types of CSS selector that allow you to target rules to specific elements in an HTML document. CSS selectors are case sensitive, so they must match
element names and attribute values exactly.
Universal Selector
Applies to all elements in the document
*{ } , Targets all elements on the page
Type Selector
Matches element names
h1, h2, h3 { } , Targets the <h1>, <h2> and <h3> elements
Class Selector
Matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol
.mark { } Targets any element whose class attribute has a value of mark.
p.mark { } Targets only <p> elements whose class attribute has a value of mark.
ID Selector
Matches an element whose id attribute has a value that matches the one specified after the pound or hash symbol.
#remark { }Targets the element whose id attribute has a value of remark.
Child Selector
Matches an element that is a direct child of another
li > a { } , Targets any <a> elements that are children of an <li> element (but not other <a> elements in the page)
Descendant Selector
Matches an element that is a descendent of another specified element (not just a direct child of that element)
p a { } , Targets any <a> elements that sit inside a <p> element, even if there are other elements nested between them.
Adjacent Sibling Selector
Matches an element that is the next sibling of another.
h1+p { } , Targets the first <p> element after any <h1> element (but not other <p> elements)
General Sibling Selector
Matches an element that is a sibling of another, although it does not have to be the directly preceding element.
h1~p { } , If you had two <p> elements that are siblings of an <h1> element, this rule would apply to both
MIN-WIDTH AND MAX-WIDTH , MIN-HEIGHT AND MAX-HEIGHT
By using max-width and min-width , size of website can be easily adjust according to browser width size.
CSS:
td.text {
min-width: 400px;
max-width: 600px;
margin:0px;
padding:2px;
text-align:right; }
Call in HTML Code:
<td class="text">Call text css in td of table to manage text in td according to screen size.</ td>
By using max-height and min-height, size of website can be easily adjust according to browser height.
CSS:
p {
min-height: 50px;
max-height: 50px; }
Call in HTML Code:
<p>Call this css implicitly when using p tag and adjust their height.</ p>
INHERITANCE
If you specify the font-family or color properties on the <body> element, they will apply to most child elements. This is because the value of the font-family property is inherited by child elements.
CSS:
body {
font-family: Arial, Verdana, sans-serif;
color: #552211;
padding: 12px;}
.page {
border: 1px solid #552211;
background-color: #dfdede;
padding: inherit;}
Call in HTML Code:
<div class="page">
<h1>MCA</h1>
<p>Master of Application.</p>
<p>MCA students are developers.</p>
</div>
CSS FOR FOREGROUND COLOR
The color property allows you to specify the color of text inside an element.
/* color name */
h1 {color: Blue;}
/* hex code */
h2 {color: #CF3F80;}
/* rgb value */
p {color: rgb(150,120,60);}
CSS FOR BACKGROUND COLOR
CSS treats each HTML element as if it appears in a box, and the background-color property sets the color of the background for that box.
body {
background-color: rgb(200,200,200);}
h1 {background-color: DarkCyan;}
h2 {background-color: #ee3e80;}
p {background-color: white;}
CSS FOR OPECITY
CSS3 introduces the opacity property which allows you to specify the opacity of an element and any of its child elements. The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50% opacity and 0.15 is 15% opacity).
p.OPY1 {
background-color: rgb(0,0,0);
opacity: 0.5;}
p.OPY2 {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);}
CSS FOR MARGIN
CSS: BASIC FORMAT
There are Three choices of values for the margin property.
⇒length
⇒percentage
⇒auto
margin-top: length percentage or auto;
margin-left: length percentage or auto;
margin-right: length percentage or auto;
margin-bottom: length percentage or auto;
We can write margin for 4 side in single line
margin: top right bottom left;
margin: 10px 10px 10px 10px;
We can sets the margin on all sides
margin: 10px; → All 4 side have margin 10px
You can set the margin property to negative values.If you do not declare the margin value of an element, the margin is 0.
margin: -10px;
Example:
body{
margin: 10px;
background: #fcfcfc;
font-size: large;
text-align: right;
font-family: Georgia, sans-serif;
}
CSS FOR PADDING
Padding is the Space between the border of an HTML element and the content within it. It is just like Margin but there is no "auto" value, and negative values cannot be declared for padding.
CSS: BASIC FORMAT
There are Two choices of values for the Padding property.
⇒length
⇒percentage
padding-top: length percentage;
padding-left: length percentage;
padding-right: length percentage;
padding-bottom: length percentage;
We can write Padding for 4 side in single line
margin: top right bottom left;
margin: 10px 10px 10px 10px;
We can sets the Padding on all sides
padding: 10px; → All 4 side have padding 10px
Example:
#container{
width: 80%;
border: 2px solid #896;
background: #fcfcfc;
margin: auto;
padding: 20px;
}
CSS FOR TEXT PROPERTIES
Text is important part of website so we must manage text using css. Text contain following properties:
∗ Color
∗ Letter Spacing
∗ Text Align
∗ Text Decoration
∗ Text Indent
∗ Text Transform
∗ White Space
∗ Word Spacing
∗ Letter Spacing
∗ Text Align
∗ Text Decoration
∗ Text Indent
∗ Text Transform
∗ White Space
∗ Word Spacing
CSS: Color
color: value;
Values are of:
∗ color name - example:(blue,black,red...)
∗ hexadecimal number - example:(#ff0000, #000000)
∗ RGB color code - example:(rgb(255, 0, 0), rgb(0, 0, 0))
Example:
color:red;
color:"#ff0000";
color:"#fff";
Values are of:
∗ color name - example:(blue,black,red...)
∗ hexadecimal number - example:(#ff0000, #000000)
∗ RGB color code - example:(rgb(255, 0, 0), rgb(0, 0, 0))
Example:
color:red;
color:"#ff0000";
color:"#fff";
CSS: Letter Spacing
letter-spacing: value;
Values are of:
∗ normal
∗ length
Example:
letter-spacing:normal;
letter-spacing:5px;
Values are of:
∗ normal
∗ length
Example:
letter-spacing:normal;
letter-spacing:5px;
CSS: Text Align
text-align: value;
Values are of:
∗ left
∗ right
∗ center
∗ justify
Example:
text-align:left;
text-align:right;
text-align:center;
text-align:justify;
Values are of:
∗ left
∗ right
∗ center
∗ justify
Example:
text-align:left;
text-align:right;
text-align:center;
text-align:justify;
CSS: Text Decoration
text-decoration: value;
Values are of:
∗ none
∗ underline
∗ overline
∗ line through
∗ blink
Example:
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:through;
text-decoration:blink;
Values are of:
∗ none
∗ underline
∗ overline
∗ line through
∗ blink
Example:
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:through;
text-decoration:blink;
CSS: Text Indent
text-indent: value;
Values are of:
∗ length
∗ percentage
Example:
text-indent:2px;
text-indent:10%;
Values are of:
∗ length
∗ percentage
Example:
text-indent:2px;
text-indent:10%;
CSS: Text Transform
text-transform: value;
Values are of:
∗ none
∗ capitalize
∗ lowercase
Example:
text-transform:none;
text-transform:capitalize;
text-transform:lowercase;
Values are of:
∗ none
∗ capitalize
∗ lowercase
Example:
text-transform:none;
text-transform:capitalize;
text-transform:lowercase;
CSS: White Space
white-space: value;
Values are of:
∗ normal
∗ pre
∗ nowrap
Example:
white-space:normal;
white-space:pre;
white-space:nowrap;
Values are of:
∗ normal
∗ pre
∗ nowrap
Example:
white-space:normal;
white-space:pre;
white-space:nowrap;
CSS: Word Spacing
word-spacing: value;
Values are of:
∗ normal
∗ length
Example:
word-spacing:normal;
word-spacing:10px;
Values are of:
∗ normal
∗ length
Example:
word-spacing:normal;
word-spacing:10px;
CSS FOR FONT PROPERTIES
Font is important part of website so we must manage Font of text using css. Font contain following properties:
∗ Font
∗ Font-Family
∗ Font Size
∗ Font Style
∗ Font Variant
∗ Font Weight
∗ Font-Family
∗ Font Size
∗ Font Style
∗ Font Variant
∗ Font Weight
CSS: Font
General formate of font:
font:style weight variantrelative Sizeline height Fonttypeface
Example:
font: italic bold normal small/1.2em Arial, sans-serif;
font:style weight variantrelative Sizeline height Fonttypeface
Example:
font: italic bold normal small/1.2em Arial, sans-serif;
CSS: Font-Family
Font-Family: value;
Values are of two choices:
∗ family-name
∗ generic family
Example:
font-family: Verdana, sans-serif;
Values are of two choices:
∗ family-name
∗ generic family
Example:
font-family: Verdana, sans-serif;
CSS: Font Size
Font Size: value;
Values are of:
∗ xx-large
∗ x-large
∗ larger
∗ large
∗ medium
∗ small
∗ smaller
∗ x-small
∗ xx-small
∗ length
∗ % (percent)
Example:
Font Size:x-large;
Font Size:10px;
Font Size:5%;
Values are of:
∗ xx-large
∗ x-large
∗ larger
∗ large
∗ medium
∗ small
∗ smaller
∗ x-small
∗ xx-small
∗ length
∗ % (percent)
Example:
Font Size:x-large;
Font Size:10px;
Font Size:5%;
CSS: Font Style
font style: value;
Values are of:
∗ normal
∗ itailc
∗ oblique
Example:
Font Style:normal;
Font Style:itailc;
Font Style:oblique;
Values are of:
∗ normal
∗ itailc
∗ oblique
Example:
Font Style:normal;
Font Style:itailc;
Font Style:oblique;
CSS: Font Variant
font variant: value;
Values are of:
∗ normal
∗ small-caps
Example:
font variant:normal;
font variant:small-caps;
Values are of:
∗ normal
∗ small-caps
Example:
font variant:normal;
font variant:small-caps;
CSS: Font Weight
font weight: value;
Values are of:
∗ lighter
∗ normal
∗ 100
∗ 200
∗ 300
∗ 400
∗ 500
∗ 600
∗ 700
∗ 800
∗ 900
∗ bold
∗ bolder
Example:
font weight:normal;
font weight:bold;
font weight:100;
Values are of:
∗ lighter
∗ normal
∗ 100
∗ 200
∗ 300
∗ 400
∗ 500
∗ 600
∗ 700
∗ 800
∗ 900
∗ bold
∗ bolder
Example:
font weight:normal;
font weight:bold;
font weight:100;
ReplyDeleteBest Engineering College in Dehradun
Best B.Sc. Agriculture College in Dehradun
Best Private Polytechnic College in Dehradun
Best BBA College in Dehradun
Best MBA College in Dehradun
Top 10 BBA Colleges in Dehradun
Top 5 B.Tech Colleges In Dehradun
Top 10 Engineering Colleges in Uttarakhand
This comment has been removed by the author.
ReplyDelete