Table of Contents<\/p>\nToggle<\/span>
CSS stands for Cascading Style Sheets<\/li>\n\n\n\n
CSS describes how HTML elements are to be displayed<\/li>\n\n\n\n
CSS saves a lot of work<\/li>\n\n\n\n
It can control the layout of multiple web pages all at once<\/li>\n\n\n\n
External style sheets are stored in CSS files<\/li>\n<\/ul>\n\n\n\n
CSS Syntax<\/strong> : A CSS file consists of a selector and a declaration block as follows<\/p>\n\n\n\n
H1 {\n    color:red;\n    font-size:15px;\n   }<\/code><\/pre>\n\n\n\n\nHere color & font-size are property of h1<\/strong> where red & 15px are their values respectively. Here h1 is selector that you want to style.<\/li>\n\n\n\n
The declaration block contains one or more declarations separated by semicolons.<\/li>\n\n\n\n
Each declaration includes a CSS property name and a value, separated by a colon.<\/li>\n\n\n\n
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.<\/li>\n<\/ul>\n\n\n\nExample: In this example all <p> elements will be center-aligned, with a blue text color<\/p>\n\n\n\n
<html>\n<head>\n<style>\n      p {\n          color: blue;\n          text-align: center;\n        }  \n<\/style>\n<\/head>\n<body>\n      <p>Hello BCA semester 1 Students!!!<\/p>\n      <p>We are using css to style p tag<\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\np<\/em><\/strong> is a selector in CSS. It is nothing but HTML element you want to style: <p><\/li>\n\n\n\n
color<\/em><\/strong> is a property, and blue is the property value.<\/li>\n\n\n\n
text-align<\/em><\/strong> is a property, and center is the property value.<\/li>\n<\/ul>\n\n\n\n<\/span>Types of Style Sheets<\/span><\/h2>\n\n\n\n\nThere are 3 types of style sheets :<\/li>\n<\/ul>\n\n\n\n\nInternal CSS<\/li>\n\n\n\n
Inline CSS<\/li>\n\n\n\n
External CSS<\/li>\n<\/ol>\n\n\n\n<\/span>Internal CSS<\/strong><\/span><\/h3>\n\n\n\n\nIf you want to style only single HTML web page with unique style, an internal style sheet may be used.<\/li>\n\n\n\n
The internal style is defined inside the <style> element, inside the <head>.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n              body {\n                    background-color: cyan;\n                    }\n              h1 {\n                     color: purple;\n                     margin-left: 40px;\n                 } \n      <\/style>\n      <\/head>\n      <body>\n\t\t<h1>This is Bhavan\u2019s H J Doshi I T Institute Jamnagar<\/h1>\n                <p>This is a paragraph demo.<\/p>\n      <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<\/span>Inline CSS<\/strong><\/span><\/h3>\n\n\n\n\nIf you want a unique style for a single element, an inline style may be used to apply .<\/li>\n\n\n\n
To use inline styles, add the style attribute to the relevant element.<\/li>\n\n\n\n
The style attribute can contain any CSS property.<\/li>\n\n\n\n
Inline styles are defined within the \u201cstyle\u201d attribute of the relevant element.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n<body>\n       <h1 style=\"color:blue;text-align:center;\">This is a heading<\/h1>\n       <p style=\"color:red;\">This is a paragraph.<\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<\/span>External CSS<\/strong><\/span><\/h3>\n\n\n\n\nUse an external style sheet, if you want to change the look of an entire website by changing just one file<\/li>\n\n\n\n
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n   <head>\n       <link rel=\"stylesheet\" href=\"style.css\">\n   <\/head> \n   <body>\n\t<h1>This is HJDOSHI Jamnagar<\/h1>\n        <p>We are BCA sem 1 students<\/p>\n    <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\nAn external style sheet can be written in any text editor, and must be saved with a .css extension.<\/li>\n\n\n\n
The external .css file should not contain any HTML tags.<\/li>\n<\/ul>\n\n\n\nHere is how the \u201cstyle.css<\/em><\/strong>\u201d file looks:<\/p>\n\n\n\n
body {\n  background-color: lightblue;\n}\nh1 {\n  color: navy;\n  margin-left: 20px;\n}<\/code><\/pre>\n\n\n\n<\/span>CSS Selectors<\/strong><\/span><\/h2>\n\n\n\n\nCSS selectors are used to select the HTML elements you want to style. <\/li>\n\n\n\n
There are mainly three types of selectors:  Simple Element selector, Id selectors & Class selectors<\/li>\n<\/ul>\n\n\n\n<\/span>The CSS element Selector<\/strong><\/span><\/h3>\n\n\n\n\nThe element selector selects HTML elements based on the element name.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n      h1{\n \t \ttext-align:center;\n                color:blue;\n      }\n      <\/style>\n      <\/head>\n      <body>\n                <h1>This is heading<\/h1>\n\t\t<h1>I am also affected by heading style<h1>\n     <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>The CSS id Selector<\/strong><\/span><\/h3>\n\n\n\n\nThe id selector uses the id attribute of an HTML element to select a specific element.<\/li>\n\n\n\n
The id of an element is unique within a page, so the id selector is used to select one unique element.<\/li>\n\n\n\n
To select an element with a specific id, write a hash (#) character, followed by the id of the element.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n      #p1 {\n \t \ttext-align: center;\n                color: purple;\n      }\n      <\/style>\n      <\/head>\n      <body>\n\t\t<p id=\"p1\">Hello BCA semester 1 students!!!<\/p>\n                <p>This paragraph is not affected by the style.<\/p>\n     <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<\/span>The CSS class Selector<\/strong><\/span><\/h3>\n\n\n\n\nThe class selector selects HTML elements with a specific class attribute.<\/li>\n\n\n\n
To select elements with a specific class, write a period (.) character, followed by the class name.<\/li>\n\n\n\n
A class name cannot start with a number.<\/li>\n<\/ul>\n\n\n\nExample:<\/strong> In this example all HTML elements with class=\u201dcenter\u201d will be purple and center-aligned<\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n      .center {\n                 text-align: center;\n                 color: purple;\n      }\n      <\/style>\n      <\/head>\n      <body>\n\t<h1 class=\"center\">This is purple and center-aligned heading 1<\/h1>\n        <p class=\"center\">This is purple and center-aligned paragraph.<\/p> \n      <\/body>\n<\/html><\/code><\/pre>\n\n\n\nExample<\/strong>: You can also specify that only specific HTML elements should be affected by a class<\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n\t      p.center {\n\t\t        text-align: center;\n   \t\t        color: purple;\n\t\t\t}\n     <\/style>\n     <\/head>\n     <body>\n\t <h1 class=\"center\">This heading1 will not be affected<\/h1>\n         <p class=\"center\">This paragraph will be purple and center-aligned.<\/p> \n     <\/body>\n<\/html><\/code><\/pre>\n\n\n\nExample<\/strong>: HTML elements can also refer to more than one class.<\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n\t     p.c {\n\t\t       text-align: center;\n\t\t       color: red;\n\t     }\n\t     p.l {  \n                      font-size: 20px; \n             }\n      <\/style>\n      <\/head>\n      <body>\n  \t   <h1 class=\"c\">This heading will not be affected<\/h1>\n\t   <p class=\"c\">This paragraph will be red and center-aligned.<\/p>\n\t   <p class=\"l\">This paragraph has 20px font size<\/p>\n\t   <p class=\"c l\">This paragraph will be red, center-aligned,     and in a large font-size.<\/p> \n      <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>CSS Font Property<\/strong><\/span><\/h1>\n\n\n\n\nCSS Font property is used to control the look of texts. By the use of CSS font property you can change the text size, color, style and more. The font property is a shorthand property for:<\/li>\n<\/ul>\n\n\n\n\nfont-style<\/li>\n\n\n\n
font-variant<\/li>\n\n\n\n
font-weight<\/li>\n\n\n\n
font-size\/line-height<\/li>\n\n\n\n
font-family<\/li>\n<\/ol>\n\n\n\n\nFont-style property:<\/strong> The font-style property specifies the font style for a text. Values are normal, italic or oblique<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n     <head>\n     <style>\n            p.a {  font-style: normal; }\n            p.b {   font-style: italic; }\n            p.c {   font-style: oblique; }\n     <\/style>\n     <\/head>\n     <body>\n            <h1>The font-style Property<\/h1>\n\t    <p class=\"a\">This is a paragraph, normal.<\/p>\n            <p class=\"b\">This is a paragraph, italic.<\/p>\n            <p class=\"c\">This is a paragraph, oblique.<\/p>\n     <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\nFont-variant property:<\/strong><\/li>\n\n\n\n
CSS font variant property specifies how to set font variant of an element. It may be normal and small-caps.<\/li>\n\n\n\n
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.<\/li>\n\n\n\n
The font-variant property specifies whether or not a text should be displayed in a small-caps font.<\/li>\n<\/ul>\n\n\n\n\nSyntax:<\/strong>\u00a0 font-variant: small-caps|normal<\/li>\n<\/ul>\n\n\n\n\nFont-weight property: <\/strong><\/li>\n\n\n\n
The font-weight property sets how thick or thin characters in text should be displayed. <\/li>\n\n\n\n
It defines the weight of the font and specify that how bold a font is. <\/li>\n\n\n\n
The possible values of font weight may be normal, bold, bolder, lighter or number (100, 200\u2026.. upto 900).<\/li>\n<\/ul>\n\n\n\n\nSyntax:<\/strong>\u00a0 font-weight: bold |bolder | lighter | 100 |..| 900<\/li>\n<\/ul>\n\n\n\n\nFont-size property: <\/strong>The font-size property sets the size of a font.<\/li>\n<\/ul>\n\n\n\n\nSyntax:<\/strong> font-size : xx-small | x-small | small | medium | large | x-large | xx-large | px | %<\/li>\n<\/ul>\n\n\n\n\nFont-family property:<\/strong><\/li>\n\n\n\n
The font-family property specifies the font for an element. <\/li>\n\n\n\n
The font-family property can hold several font names as a \u201cfallback\u201d system. <\/li>\n\n\n\n
If the browser does not support the first font, it tries the next font.<\/li>\n<\/ul>\n\n\n\n\nSyntax:<\/strong> font-family : \u201carial\u201d, \u201dbook antique\u201d<\/li>\n<\/ul>\n\n\n\n<\/span>CSS Text Property<\/strong><\/span><\/h1>\n\n\n\n\nColor<\/strong> property<\/strong>:<\/li>\n\n\n\n
It is used to change the color of the text. Values are given by color name, hexadecimal code or an RGB value.<\/li>\n<\/ul>\n\n\n\n\nSyntax<\/strong>: Color: red | #ff00ff | rgb(255,0,0)<\/li>\n<\/ul>\n\n\n\n\nText Alignment Property<\/strong>:<\/li>\n\n\n\n
It is used to set the horizontal alignment of a text. <\/li>\n\n\n\n
A text can be left or right aligned, centered, or justified. <\/li>\n\n\n\n
The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left)<\/li>\n<\/ul>\n\n\n\nExample:<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n             p.c{ text-align: center; }\n             p.l{ text-align: left;   }\n             p.r{ text-align: right;  }\n     <\/style>\n     <\/head>\n     <body>\n\t     <p class=\"l\">H J Doshi Jamnagar<\/p>\n             <p class=\"r\">H J Doshi Jamnagar<\/p>\n             <p class=\"c\">H J Doshi Jamnagar<\/p>\n\t     <p>The three paragraphs above are aligned left, right & center.<\/p>\n     <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\nWhen the text-align property is set to justify<\/strong>, each line is stretched so that every line has equal width, and the left and right margins are straight.<\/li>\n<\/ul>\n\n\n\n\nText Direction Property<\/strong><\/li>\n\n\n\n
The direction property can be used to change the text direction of an element.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\t\n              p.d{\t\n                  direction: rtl; \n              }\n      <\/style>\n      <\/head>\n      <body>\n         <p>This is the default text direction means left to right.<\/p>\n         <p class=\"d\">This is right-to-left text direction.<\/p>\n      <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n\nVertical Alignment Property<\/strong><\/li>\n\n\n\n
The vertical-align property sets the vertical alignment of an element.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n             img.a {   vertical-align: baseline;   }\n             img.b {   vertical-align: text-top;   }\n             img.c {   vertical-align: text-bottom;}\n\t     img.d {   vertical-align: sub;        }\n\t     img.e {   vertical-align: super;      }\n     <\/style>\n     <\/head>\n     <body>\n           <h2>vertical-align: baseline - default:<\/h2>\n           <p>An <img class=\"a\" src=\"a.jpg\" width=\"9\" height=\"9\"> Image default    alignment.<\/p> \n           <h2>vertical-align: text-top:<\/h2>\n           <p>An <img class=\"b\" src=\"a.jpg\" width=\"9\" height=\"9\"> Image text-top alignment.<\/p> \n\t   <h2>vertical-align: text-bottom:<\/h2>\n           <p>An <img class=\"c\" src=\"a.jpg\" width=\"9\" height=\"9\"> Image Text-bottom alignment<\/p>\n           <h2>vertical-align: sub:<\/h2>\n           <p>An <img class=\"d\" src=\"a.jpg\" width=\"9\" height=\"9\"> image sub alignment.<\/p> \n\t   <h2>vertical-align: sup:<\/h2>\n           <p>An <img class=\"e\" src=\"a.jpg\" width=\"9\" height=\"9\"> image super alignment.<\/p>\n     <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nText Decoration Property <\/strong><\/li>\n\n\n\n
The text-decoration property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n            a {  text-decoration: none;}\n      <\/style>\n      <\/head>\n      <body>\n\t\t<h1>Using text-decoration: none<\/h1>\n\t\t<p>A link with no underline:                                                        <a href=\"https:\/\/swatilathia.wordpress.com\/\">swatilathia.wordpress.com<\/a><\/p>\n      <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nOther Text decoration properties<\/strong><\/li>\n<\/ul>\n\n\n\n<html>\n      <head>\n      <style>\n             h2 {  text-decoration: overline;    }\n             h3 {  text-decoration: line-through;}\n             h4 {  text-decoration: underline;   }\n      <\/style>\n      <\/head>\n      <body>\n            <h1>The followings are different types of text decorations<\/h1>\n            <h2>Overline text decoration<\/h2>\n            <h3>Line-through text decoration<\/h3>\n            <h4>Underline text decoration<\/h4>\n      <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nText Transformation Property<\/strong><\/li>\n\n\n\n
The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n             p.uppercase {  text-transform: uppercase;}\n             p.lowercase {   text-transform: lowercase;}\n             p.capitalize{   text-transform: capitalize;}\n      <\/style>\n      <\/head>\n      <body>\n            <p class=\"uppercase\">This text is transformed to uppercase.<\/p>\n            <p class=\"lowercase\">THIS TEXT IS TRANSFORMED TO LOWERCASE.<\/p>\n            <p class=\"capitalize\">This text is capitalized.<\/p>\n      <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nText Indentation<\/strong><\/li>\n\n\n\n
The text-indent property is used to specify the indentation of the first line of a text.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n             p{   \n                text-indent: 50px;\n                font-size:30px; \n              }\n      <\/style>\n      <\/head>\n      <body>\n            <p>Hi.. This is Swati Lathia. I work as a professor in Bhavan's H J     Doshi Information Technology Institute, Jamnagar. Currently I teach HTML, PHP & SEO in BCA students.I like to explore the world and love to do every adventurious activities.<\/p>\n      <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nLetter Spacing<\/strong><\/li>\n\n\n\n
The letter-spacing property is used to specify the space between the characters in a text. <\/li>\n<\/ul>\n\n\n\n\nWord Spacing<\/strong><\/li>\n\n\n\n
The word-spacing property is used to specify the space between the words in a text. <\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n             p{    \n\t\tword-spacing:10px;                \n\t\tfont-size:30px;               \n\t\t}\n\t     h1\n   \t     {\n\t\tletter-spacing:10px;\n             }\n      <\/style>\n      <\/head>\n      <body>\n            <p>This is Word Spacing<\/p>\n\t    <h1>This is letter spacing<\/h1>\n      <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>CSS Background Property<\/span><\/h1>\n\n\n\n\nBackground property has different types of properties to set colors, images, position, size & many more as follows<\/li>\n<\/ul>\n\n\n\n\nbackground-color property<\/strong><\/li>\n\n\n\n
It sets the background color of an element.<\/li>\n\n\n\n
The background of an element is the total size of the element, including padding and border (but not the margin).<\/li>\n\n\n\n
Use a background color and a text color that makes the text easy to read.<\/li>\n<\/ul>\n\n\n\n\nSyntax: <\/strong>Background-color: colorname | hexcode | rgb() | transparent<\/li>\n<\/ul>\n\n\n\n\nOpacity \/ Transparency<\/strong> Property<\/strong><\/li>\n\n\n\n
It specifies the opacity\/transparency of an element. <\/li>\n\n\n\n
Value ranges from 0.0 \u2013 1.0. <\/li>\n\n\n\n
The lower value means the more transparent & the higher value means the less transparent or opaque.<\/li>\n<\/ul>\n\n\n\nExample <\/strong><\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#p1{\n\t\t\t\tbackground-color:cyan;\n\t\t\t}\n\t\t\t#p2{\n\t\t\t\tbackground-color:cyan;\n\t\t\t\topacity:0.1;\n\t\t\t}\n\t\t\t#p3{\n\t\t\t\tbackground-color:cyan;\n\t\t\t\topacity:0.4;\n\t\t\t}\n\t\t\t#p4{\n\t\t\t\tbackground-color:cyan;\n\t\t\t\topacity:0.6;\n\t\t\t}\n\t\t\t#p5{\n\t\t\t\tbackground-color:cyan;\n\t\t\t\topacity:0.7;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id=p1>Hello World<\/p><br><br>\n\t\t<p id=p2>Hello World<\/p><br><br>\n\t\t<p id=p3>Hello World<\/p><br><br>\n\t\t<p id=p4>Hello World<\/p><br><br>\n\t\t<p id=p5>Hello World<\/p><br><br>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\nYou can also set the transparency using RGB value. Let us take an example<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#p1{\n\t\t\t\tbackground-color:rgb(255,0,0,0.1);\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id=p1>Hello World<\/p><br><br>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nbackground-image Property<\/strong><\/li>\n\n\n\n
It sets one or more background images for an element.<\/li>\n\n\n\n
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.<\/li>\n\n\n\n
The background of an element is the total size of the element, including padding and border (but not the margin).<\/li>\n\n\n\n
Always set a background-color to be used if the image is unavailable.<\/li>\n<\/ul>\n\n\n\n\nSyntax: <\/strong>background-image: url(\u201cimagename.extension\u201d) | None;<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
body {\n \tbackground-image: url(\"flower.png\");\n        background-color: cyan;\n}\n<\/code><\/pre>\n\n\n\nYou can also set two background images.<\/p>\n\n\n\n
body {\n  background-image: url(\"img1.jpg\"), url(\"img2.jpg\");\n  background-color: #f1f1f1;\n}\n<\/code><\/pre>\n\n\n\nWe can set two background images for the <body> element in which the first image appear only once (with no-repeat), and let the second image be repeated:<\/p>\n\n\n\n
body {\n  background-image: url(\"img1.gif\"), url(\"img2.gif\");\n  background-repeat: no-repeat, repeat;\n  background-color: rgb(200,100,0);\n}<\/code><\/pre>\n\n\n\n\nbackground-position Property:<\/strong><\/li>\n\n\n\n
It sets the starting position of a background image.<\/li>\n\n\n\n
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.<\/li>\n<\/ul>\n\n\n\n\nSyntax: <\/strong>background-position: left top | left center | left bottom | center top | center center | center bottom | right top | right center | right bottom | x% y% | px px<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
body {\n    background-image:url('img1.gif');\n    background-repeat:no-repeat;\n    background-position:left top;\n}<\/code><\/pre>\n\n\n\n\nbackground-repeat Property:<\/strong><\/li>\n\n\n\n
It sets if\/how a background image will be repeated.<\/li>\n\n\n\n
By default, a background-image is repeated both vertically and horizontally.<\/li>\n\n\n\n
The background image is placed according to the background-position property.<\/li>\n\n\n\n
If no background-position is specified, the image is always placed at the element\u2019s top left corner.<\/li>\n<\/ul>\n\n\n\n\nSyntax: <\/strong>Background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round<\/li>\n<\/ul>\n\n\n\n\nbackground-attachment Property:<\/strong><\/li>\n\n\n\n
It sets whether a background image scrolls with the rest of the page, or is fixed.<\/li>\n\n\n\n
Scroll<\/strong>:\u00a0 The background image will scroll with the page. This is default<\/li>\n\n\n\n
Fixed:<\/strong>\u00a0 The background image will not scroll with the page<\/li>\n<\/ul>\n\n\n\n\nSyntax:<\/strong> background-attachment: scroll|fixed;<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
body {\n  background-image: url(\"img2.jpg\");\n  background-repeat: no-repeat;\n  background-attachment: scroll;\n}<\/code><\/pre>\n\n\n\n\nbackground \u2013 Shorthand Property<\/strong> : <\/li>\n\n\n\n
It specifies all the background properties in one single property. Order must be :<\/li>\n<\/ul>\n\n\n\n\nbackground-color<\/strong><\/li>\n\n\n\n
background-image<\/strong><\/li>\n\n\n\n
background-repeat<\/strong><\/li>\n\n\n\n
background-attachment<\/strong><\/li>\n\n\n\n
background-position<\/strong><\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\tbody{\n\t\t\t\tbackground:#ffffff url(\"aol.png\") no-repeat right top;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p>Hello World<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>CSS Border Property<\/strong><\/span><\/h1>\n\n\n\n\nThe\u00a0border\u00a0property in CSS is used to style the border of a given element. This property is a combination of three other properties\u00a0border-width,\u00a0border-style, and\u00a0border-color. It is used as shorthand property for all these properties.<\/li>\n<\/ul>\n\n\n\n\nBorder-width<\/strong> can have following values : thin, medium, thick, 10px (in pixels). <\/li>\n<\/ul>\n\n\n\n\nBorder-style<\/strong> can have following values : none, solid, dotted, dashed, inset, outset, ridge, groove, double, hidden. <\/li>\n<\/ul>\n\n\n\n\nborder-color<\/strong> can have following values: color name, transparent, rgb(red value,green value,blue value)<\/li>\n<\/ul>\n\n\n\nExample<\/strong> : We have used all three property individually here<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#e1{\n\t\t\t\tborder-color:purple;\n\t\t\t\tborder-style:double;\n\t\t\t\tborder-width:20px;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id='e1'>Border Property Example<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\nWe have used all three property individually here. You can use all these three property in one property: border. Look at following example.<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#e2{\n                                \/* style width color *\/\n\t\t\t\tborder:double 10px red;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id='e2'>Border short hand property Example<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nborder-bottom\u00a0Property :<\/strong> It is a shorthand property for bottom border. It sets the style of the bottom border for a given element.<\/li>\n\n\n\n
border-top\u00a0Property : <\/strong>It is a shorthand property for top border. It sets the style of the top border for a given element.<\/li>\n\n\n\n
border-left\u00a0Property : <\/strong>It is a shorthand property for left border. It sets the style of the left border for a given element.<\/li>\n\n\n\n
border-right\u00a0Property : <\/strong>It is a shorthand property for right border. It sets the style of the right border for a given element.<\/li>\n<\/ul>\n\n\n\nExample:<\/strong><\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#e3{\n\t\t\t\tborder-bottom:solid 5px red;\n\t\t\t\tborder-top:dashed 5px red;\n\t\t\t\tborder-left:double 5px red;\n\t\t\t\tborder-right:dotted 5px red;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id='e3'>Border for each side short hand property Example<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nBorder-bottom-color Property :<\/strong> It set a color for the bottom border.<\/li>\n\n\n\n
Border-top-color Property :<\/strong> It set a color for the top border.<\/li>\n\n\n\n
Border-left-color Property :<\/strong> It set a color for the left border.<\/li>\n\n\n\n
Border-right-color Property :<\/strong> It set a color for the right border.<\/li>\n<\/ul>\n\n\n\nExample<\/strong> : Without border-width & border-style , border-color does not work.<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#e4{\n\t\t\t\tborder-bottom-color:red;\n\t\t\t\tborder-top-color:green;\n\t\t\t\tborder-left-color:orange;\n\t\t\t\tborder-right-color:blue;\n\t\t\t\tborder-style:solid;\n\t\t\t\tborder-width:5px;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id='e4'>Border Color for each side<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nBorder-bottom-width Property:<\/strong> It sets a width for the bottom border.<\/li>\n\n\n\n
Border-top-width Property<\/strong>:<\/strong> It sets a width for the top border.<\/li>\n\n\n\n
Border-left-width Property<\/strong>:<\/strong> It sets a width for the left border.<\/li>\n\n\n\n
Border-right-width Property<\/strong>:<\/strong> It sets a width for the right border.<\/li>\n<\/ul>\n\n\n\nExample<\/strong>:<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#e5{\n\t\t\t\tborder-bottom-width:15px;\n\t\t\t\tborder-top-width:10px;\n\t\t\t\tborder-left-width:20px;\n\t\t\t\tborder-right-width:5px;\n\t\t\t\tborder-style:solid;\n\t\t\t\tborder-color:purple;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id='e5'>Border width for each side<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nborder-bottom-style Property<\/strong>:<\/strong> It sets a style for the bottom border.<\/li>\n\n\n\n
border-top-style Property<\/strong>:<\/strong> It sets a style for the top border.<\/li>\n\n\n\n
border-left-style Property<\/strong>:<\/strong> It sets a style for the left border.<\/li>\n\n\n\n
border-right-style Property<\/strong>:<\/strong> It sets a style for the right border.<\/li>\n<\/ul>\n\n\n\nExample<\/strong>:<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\t#e6{\n\t\t\t\tborder-bottom-style:double;\n\t\t\t\tborder-top-style:dashed;\n\t\t\t\tborder-left-style:dotted;\n\t\t\t\tborder-right-style:solid;\n\t\t\t\tborder-width:10px;\n\t\t\t\tborder-color:darkblue;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<p id='e6'>Border Style for each side<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nborder-spacing\u00a0Property<\/strong>:<\/strong> It sets the distance between the borders of adjacent cells of a table.<\/li>\n<\/ul>\n\n\n\nExample<\/strong>:<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\ttable,td,th {\n\t\t\t\t\t\tborder: 1px solid black;\n\t\t\t}\n\t\t\t#t1{\n\t\t\t\t\t\tborder-spacing: 15px;\n\t\t\t}\n\t\t\t#t2 {\n\t\t\t\t\t\tborder-spacing: 5px 30px;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<table id=\"t1\">\n\t\t\t<tr>\n\t\t\t\t<th>Firstname<\/th>\n\t\t\t\t<th>Lastname<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Lata<\/td>\n\t\t\t\t<td>Mageshkar<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Asha<\/td>\n\t\t\t\t<td>Bholse<\/td>\n\t\t\t<\/tr>\n\t\t<\/table>\n\t\t<br>\n\t\t<br>\n\t\t<table id=\"t2\">\n\t\t\t<tr>\n\t\t\t\t<th>Firstname<\/th>\n\t\t\t\t<th>Lastname<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Lata<\/td>\n\t\t\t\t<td>Mageshkar<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Asha<\/td>\n\t\t\t\t<td>Bholse<\/td>\n\t\t\t<\/tr>\n\t\t<\/table>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nborder-collapse Property<\/strong> : It sets whether table borders should collapse into a single border or be separated as in standard HTML.<\/li>\n<\/ul>\n\n\n\nExample<\/strong> : We have used border-spacing to check the spacing between cells when border is separate.<\/p>\n\n\n\n
<html>\n\t<head>\n\t\t<style>\n\t\t\ttable,td,th {\n\t\t\t\t\t\tborder: 1px solid black;\n\t\t\t}\n\t\t\t#t3{\n\t\t\t\t\t\tborder-collapse:separate;\n\t\t\t\t\t\tborder-spacing:10px 40px;\n\t\t\t}\n\t\t\t#t4 {\n\t\t\t\t\t\tborder-collapse:collapse;\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<table id=\"t3\">\n\t\t\t<tr>\n\t\t\t\t<th>Firstname<\/th>\n\t\t\t\t<th>Lastname<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Lata<\/td>\n\t\t\t\t<td>Mageshkar<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Asha<\/td>\n\t\t\t\t<td>Bholse<\/td>\n\t\t\t<\/tr>\n\t\t<\/table>\n\t\t<br>\n\t\t<br>\n\t\t<table id=\"t4\">\n\t\t\t<tr>\n\t\t\t\t<th>Firstname<\/th>\n\t\t\t\t<th>Lastname<\/th>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Lata<\/td>\n\t\t\t\t<td>Mageshkar<\/td>\n\t\t\t<\/tr>\n\t\t\t<tr>\n\t\t\t\t<td>Asha<\/td>\n\t\t\t\t<td>Bholse<\/td>\n\t\t\t<\/tr>\n\t\t<\/table>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>CSS List Property<\/span><\/h1>\n\n\n\n\nThere are two main list types in HTML:<\/li>\n<\/ul>\n\n\n\n\n<UL> \u2013 unordered lists \u2013 bullets are used to mark the list items<\/li>\n\n\n\n
<OL> \u2013 ordered lists- numbers or letters are used to mark the list items<\/li>\n<\/ol>\n\n\n\n\nCSS list properties allow to do followings:<\/li>\n<\/ul>\n\n\n\n\nWe can set different list item markers for ordered lists<\/li>\n\n\n\n
We can set different list item markers for unordered lists<\/li>\n\n\n\n
We can set an image as the list item marker<\/li>\n\n\n\n
We can add background colors to lists and list items<\/li>\n<\/ol>\n\n\n\n\nlist-style-type Property: <\/strong>It specifies the type of list item marker.<\/li>\n\n\n\n
Values are disc, circle, square, decimal, decimal-leading-zero, lower-alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-greek, upper-latin, upper-roman, none and so on.<\/li>\n\n\n\n
list-style-image Property: <\/strong>It specifies an image as the list item marker.<\/li>\n<\/ul>\n\n\n\n<html>\n       <head>\n       <style>\n       ul.a {  list-style-type: disc;         }\n       ul.b {  list-style-type: square;       }\n       ol.c {  list-style-type: upper-roman;  }\n       ol.d {  list-style-type: upper-alpha;  }\n          .i{  list-style-image: url('a.jpg'); }\n         .fs{  font-size:30px;                }\n      <\/style>\n      <\/head>\n      <body>\n\t\t<p class=\"fs\">Unordered List<\/p>\n                <ul class=\"a fs\">\n                <li>Babu Rao <\/li>\n                    <li>Raju<\/li>\n                    <li>Shyam<\/li>\n                <\/ul>\n\t\t<ul class=\"b fs\">\n                    <li>Kaliya<\/li>\n                    <li>Gabbar Singh<\/li>\n                    <li>Jay<\/li>\n                    <li>Veeru<\/li>\n                <\/ul>\n\t\t<p class=\"fs\">Example of ordered lists:<\/p>\n                <ol class=\"c fs\">\n                    <li>Gujrati<\/li>\n                    <li>Hindi<\/li>\n                    <li>Rajasthani<\/li>\n                <\/ol>\n\t\t<ol class=\"d fs\">\n                    <li>HTML<\/li>\n                    <li>C language<\/li>\n                    <li>Computer Fundamentals<\/li>\n                <\/ol>\n\t\t<ul class=\"i fs\">\n                    <li>BCA<\/li>\n                    <li>MCA<\/li>\n                    <li>PGDCA<\/li>\n                <\/ul>\n       <\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nlist-style-position Property:<\/strong> It specifies the position of the list-item markers (bullet points).<\/li>\n\n\n\n
Values are inside and outside.<\/li>\n\n\n\n
list-style-position:<\/strong> outside; \u2013 the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.<\/li>\n\n\n\n
list-style-position:<\/strong> inside; \u2013 that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start<\/li>\n<\/ul>\n\n\n\n<html>\n      <head>\n      <style>\n             ul.a {  list-style-position: outside;}\n             ul.b {  list-style-position: inside; }\n      <\/style>\n      <\/head>\n      <body>\n\t    This is an outside List Example<br>\n            <ul class=\"a\">\n                 <li>BCA : Bechalor of Computer Application, A three year course   with a number of subjects like C, C++, Data structure, PHP, HTML & networking, Oracle, Computer Fundamentals, Computer Organization Architeture, JAVA, Asp.net, Search Engine Optimization, Android, Python, Data warehousing & Sql server<\/li>\n                 <li>MCA<\/li>\n      <\/ul>\n\t   This is an Inside List Example<br>\n           <ul class=\"b\">\n                 <li>BCA : Bechalor of Computer Application, A three year course with a number of subjects like C, C++, Data structure, PHP, HTML & networking, Oracle, Computer Fundamentals, COmputer Organization Architeture, JAVA, Asp.net, Search Engine Optimization, Android, Python, Data warehousing & Sql server<\/li>\n                <li>MCA<\/li>\n           <\/ul>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nlist-style:<\/strong> This property is a shorthand property. It is used to set all the list properties in one declaration. list-style-type, list-style-position, list-style-image are in one go.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n      <head>\n      <style>\n             ul {   list-style: square inside url(\"a.jpg\"); }\n      <\/style>\n      <\/head>\n      <body>  \n             <ul>\n                  <li>BCA : Bechalor of Computer Application, A three year course with a number of subjects like C, C++, Data structure, PHP, HTML & networking, Oracle, Computer Fundamentals, Computer Organization Architecture, JAVA, Asp.net, Search Engine Optimization, Android, Python, Data warehousing & SQL server<\/li>\n                 <li>MCA<\/li>\n             <\/ul>\t\n     <\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>CSS Margin Properties<\/strong><\/span><\/h1>\n\n\n\n\nThe CSS margin properties are used to create space around elements, outside of any defined borders.<\/li>\n\n\n\n
There are properties for setting the margin for each side of an element (top, right, bottom, and left).<\/li>\n\n\n\n
These properties are margin-top, margin-right, margin-bottom, margin-left.<\/li>\n<\/ul>\n\n\n\n\nAll the margin properties can have the following values:  <\/li>\n<\/ul>\n\n\n\n\nauto \u2013 the browser calculates the margin<\/li>\n\n\n\n
length \u2013 specifies a margin in px, pt, cm, etc.<\/li>\n\n\n\n
% \u2013 specifies a margin in % of the width of the containing element<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<head>\n<style>\np{\n  margin-top: 50px;\n  margin-bottom: 100px;\n  margin-right: 50px;\n  margin-left: 50px;\n  background-color:lightblue;\n}\n<\/style>\n<\/head>\n<body>\n     <p>This paragraph has a top margin of 50px, a right margin of 50px, a bottom  margin of 100px, and a left margin of 50px.<\/p>\n<\/body><\/code><\/pre>\n\n\n\n\nMargin Shorthand Property:<\/strong> In this property, all the margin properties are included in one go. <\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<html>\n<head>\n<style>\np\n{\n  margin: 50px 50px 100px 100px;\n  background-color: lightblue;\n}\n<\/style>\n<\/head>\n<body>\n<p>This paragraph element has a top margin of 50px, a right margin of 50px, a bottom margin of 100px, and a left margin of 100px.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nMargin Property with three values: margin: 25px 50px 75px;<\/strong><\/li>\n<\/ul>\n\n\n\n\n\u00a0Top margin 25px , Right margin 50px , bottom margin 75px & Left margin 50 px<\/li>\n<\/ul>\n\n\n\n\nMargin Property with two values: margin: 25px 50px;<\/strong><\/li>\n<\/ul>\n\n\n\n\ntop and bottom margins are 25px , right and left margins are 50px<\/li>\n<\/ul>\n\n\n\n\nMargin Property with one value: margin: 25px;<\/strong><\/li>\n<\/ul>\n\n\n\n\nAll four margins are 25px<\/li>\n<\/ul>\n\n\n\n<\/span>CSS comments<\/strong><\/span><\/h1>\n\n\n\n\nComments in CSS are not displayed in the browser, but they can help document your source code.<\/li>\n\n\n\n
Comments are used to explain the code, and may help when you edit the source code at a later date.<\/li>\n\n\n\n
Comments are ignored by browsers.<\/li>\n\n\n\n
A CSS comment is placed inside the <style> element, and starts with \/* and ends with *\/:<\/li>\n<\/ul>\n\n\n\n\/* This is a single-line comment *\/\np {\n  color: red;\n}\n\n\/* This is\n multi-line \ncomment *\/\n\np {\n  color: red;\n}<\/code><\/pre>\n\n\n\n<\/span>CSS Pseudo Class<\/span><\/h1>\n\n\n\n\nCSS pseudo class is a keyword added to a selector that specifies a special state of the selected elements. For example, :hover<\/strong> can be used to change a paragraph\u2019s background color when user hovers over paragraph.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong> <\/p>\n\n\n\n
selector:pseudo-class {\n                 property:value;\n}<\/code><\/pre>\n\n\n\nExample<\/strong> : In this example, i have put an hover pseudo class for element selector P.<\/p>\n\n\n\n
<head>\n<style>\n\tp:hover{\n\t\tpadding:40px;\n\t\tbackground-color:yellow;\n\t}\n<\/style>\n<\/head>\n<body>\n\t<p>This paragraph changes its color when you point a mouse over it<\/p>\n<\/body><\/code><\/pre>\n\n\n\n<\/span>Anchor Pseudo Classes<\/strong><\/span><\/h2>\n\n\n\n\nAnchor tag <a> have following pseudo classes : link , visited, hover & active. Link will show you the color of the link , if you have not yet visited (clicked) the link, It will show you the color red (as per below example). If you have clicked the link, it will show you a link in yellow color. If you hover a mouse pointer over a link, it will show you a link in green color. If you click a link, for a fraction of a second it will show a link in cyan color.<\/li>\n<\/ul>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<style>\n\na:link {\n  color:red;\/\/unvisited link color\n}\na:visited {\n  color: yellow;\/\/visited link color\n}\na:hover {\n  color: green;\/\/hover effect \n}\na:active {\n  color: cyan;\/\/active link color\n}\n<\/style>\n<\/head>\n<body>\n\t<a href=\"https:\/\/swatilathia.com\/\" target=\"_blank\">Click Me and Check the colors<\/a><\/b><\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>CSS Pseudo-elements<\/span><\/h2>\n\n\n\n\nA CSS pseudo-element is used to style specified parts of an element. It is used to style the first letter, or first line of an element. It is also used to insert the content before, or after, the content of an element or to give style when you select some element.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong><\/p>\n\n\n\n
selector::pseudo-element {\n                         property: value;\n}<\/code><\/pre>\n\n\n\n\nThe ::first-letter Pseudo-element : <\/strong> It is is used to add a special style to the first letter of a text.<\/li>\n<\/ul>\n\n\n\nExample <\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\np::first-letter{\n  color:red;\n  font-size:30px;\n}\n<\/style>\n<\/head>\n<body>\n<p>The ::first-letter pseudo-element shows a special effect to the first character of a text<\/p>\n<p>The ::first-letter pseudo-element shows a special effect to the first character of a text<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\nYou can apply other properties to this pseudo element : font properties , color properties\u00a0, background properties, margin properties, padding properties, border properties, text-decoration, text-transform<\/strong><\/li>\n<\/ul>\n\n\n\n\nMultiple Pseudo-elements<\/strong> : You can combine more than one pseudo elements. Look at the following example.<\/li>\n<\/ul>\n\n\n\n<!DOCTYPE html>\n<html>\n<head>\n<style>\np::first-letter {\n  color: blue;\n  font-size: 40px;\n}\np::first-line {\n  color: red;\n  font-variant: small-caps;\n}\n<\/style>\n<\/head>\n<body>\n<p>Bhavan's Shri H J Doshi Jamnagar<\/p>\n<p>Bhavan's Shri H J Doshi Jamnagar<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n::before Pseudo-element<\/strong> : It is used to insert some content before the content of an element.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<style>\n\t\t\t\/* ::before pseudo element *\/\n\t\t\tp::before\n\t\t\t{\n\t\t\t\tcontent:\" Hello Everyone!! \";\n\t\t\t}\n\t\t\t\n\t\t\t\/* ::after pseudo element *\/\n\t\t\th1::after\n\t\t\t{\n\t\t\t\tcontent:\" Welcome here! \";\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<h1>Bhavan's H J Doshi Jamnagar<\/h1>\n\t\t<p>This is Swati Lathia<\/p>\n\t\t<p>How are you all?<\/p>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n::marker Pseudo-element<\/strong> : It is used to select the markers of list items.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<style>\n\t\t\t\/* you can select the marker of list  *\/\n\t\t\t::marker \n\t\t\t{ \n\t\t\t\tcolor:Purple;\n\t\t\t\tfont-size:30px;\n\t\t\t}\t\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\t\t<ol>\n\t\t\t<li>HTML<\/li>\n\t\t\t<li>CSS<\/li>\n\t\t\t<li>Javascript<\/li>\n\t\t\t<li>Internet Introduction<\/li>\n\t\t<\/ol>\n\t\t<ul>\n\t\t\t<li>Language C<\/li>\n\t\t\t<li>OOP<\/li>\n\t\t\t<li>DS<\/li>\n\t\t\t<li>Java<\/li>\n\t\t<\/ul>\n\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\n\n::selection Pseudo-element:<\/strong> When you select any element, it will give the style accordingly.<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\n::selection \n{\n  color:blue;\n  background-color:cyan;\n}\n<\/style>\n<\/head>\n<body>\n       <h1>H J DOSHI Jamnagar<\/h1>\n       <p>Select any text here<\/p>\n       <div>This is division tag<\/div>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n<\/span>CSS Media Query<\/span><\/h1>\n\n\n\n\nIn CSS (Cascading Style Sheets), a media query is a technique used to apply different styles to a webpage based on certain conditions, such as the size of the viewport or the type of device being used to view the page. <\/li>\n\n\n\n
Media queries allow you to create responsive designs that adapt and look good on various screen sizes and devices, including desktops, tablets, and smartphones.<\/li>\n\n\n\n
It is used to create Responsive Web Design (RWD). It uses the\u00a0@media<\/code>\u00a0rule to include a block of CSS properties only if a certain condition is true.<\/li>\n<\/ul>\n\n\n\nSyntax<\/strong><\/p>\n\n\n\n
@media (condition) {\n  \/* Styles to apply when the condition is met *\/\n}<\/code><\/pre>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\nbody {\n  background-color:cyan;\n}\n@media(max-width: 500px) \n{\n  body \n  {\n        background-color:gray;\n\tcolor:white;\n\tfont-family:\"lucida handwriting\";\n  }\n}\n<\/style>\n<\/head>\n<body>\n       <p>Resize the browser window.When the width of this document is 500 pixels or less, the   background-color is \"gray\",font color is \"white\" & font face is \"lucida handwriting\", otherwise background color is \"cyan\".<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n<\/span>Responsive Web Design – Images <\/span><\/h2>\n\n\n\n\nUsing The width Property<\/strong> : <\/li>\n\n\n\n
If the width property is set to a percentage and the height property is set to \u201cauto\u201d, the image will be responsive and scale up and down<\/li>\n<\/ul>\n\n\n\nExample<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\nimg {\n  width: 100%;\n  height: auto;\n}\n<\/style>\n<\/head>\n<body>\n      <img src=\"img.jpg\" width=\"460\" height=\"345\">\n      <p>Now Resize the browser window to check how the image will scale.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n<\/body>","protected":false},"excerpt":{"rendered":"What is CSS? CSS Syntax : A CSS file consists of a selector and a declaration block as follows Example: In this example all <p> elements will be center-aligned, with a blue text color Types of Style Sheets Internal CSS Example Inline CSS Example External CSS Example Here is how the \u201cstyle.css\u201d file looks: CSS […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"zakra_page_container_layout":"customizer","zakra_page_sidebar_layout":"customizer","zakra_remove_content_margin":false,"zakra_sidebar":"customizer","zakra_transparent_header":"customizer","zakra_logo":0,"zakra_main_header_style":"default","zakra_menu_item_color":"","zakra_menu_item_hover_color":"","zakra_menu_item_active_color":"","zakra_menu_active_style":"","zakra_page_header":true,"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-1296","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/1296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1296"}],"version-history":[{"count":4,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/1296\/revisions"}],"predecessor-version":[{"id":5607,"href":"https:\/\/swatilathia.com\/index.php?rest_route=\/wp\/v2\/pages\/1296\/revisions\/5607"}],"wp:attachment":[{"href":"https:\/\/swatilathia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}