To control the layout of an HTML element, the CSS Display is used. On a web page, each element is a rectangular box. The behavior of the rectangular box is specified by the CSS property. CSS Display default properties: default value inline inherited no animation supporting no version css1 javascript syntax object.style.display=”none” Syntax: display:value; CSS … Read more
To set the border on an HTML element, the CSS Border is used. To define the style, color, and size of the border of an HTML element, the CSS border properties are used. CSS border properties: border-style border-color border-width border-radius CSS border-style: To define the border type the Border style property is used. Values used … Read more
To define the background effects on an HTML element, the CSS background property is used. In an HTML element, five types of CSS background properties are used. These are: Background-color property Background-image property Background-repeat property Background-attachment property Background-position property CSS background-color: To define the background color of an element, the background color property is used. … Read more
To explain a code, CSS comments are used. It makes code easy to understand. Comments are not displayed by the browsers. Both the single or multiple lines statements are written within the /*…………*/ in CSS. Example: <!DOCTYPE html> <html> <head> <style> h3 { color: crimson; /* I am a single-line comment */ text-align: center; } … Read more
External CSS uses an external CSS file to apply CSS to multiple HTML pages. Example: <!DOCTYPE html> <html> <head> <link rel=”stylesheet” href=”styles.css”> </head> <body> <h1>Hello World!!</h1> <p>How are you?</p> </body> </html> style.css: h1 { background-color: blue; color: white; } p { color: blue; font-size: 25px; font-style: italic; } Explanation: In the above example, we used … Read more
Internal CSS uses a <style> element in the <head> section to apply CSS to a single HTML page. Example: <!DOCTYPE html> <html> <head> <style> h1 {background-color: blue; color: white;} p {color: blue;font-size: 25px;font-style: italic;} </style> </head> <body> <h1>Hello World!!</h1> <p>How are you?</p> </body> </html> Explanation: In the above example, we used a <style> element in … Read more
Inline CSS uses the style attribute to apply CSS to a single HTML element. Example: <!DOCTYPE html> <html> <body> <h1 style=”color:crimson;font-family:cursive;”>Hello World!!</h1> </body> </html> Explanation: In the above example, we used the style attribute to add CSS to a single HTML element. Disadvantages of Inline CSS: Within the inline CSS, quotations can be used, because … Read more
There are 3 ways to apply CSS to HTML elements. These are: Inline CSS: Uses the style attribute in HTML elements. Internal CSS: Uses a <style> element in the <head> section. External CSS: Uses an external CSS file. Inline CSS: Uses the style attribute to apply CSS to a single HTML element. Example: <h1 style=”color:crimson;font-style: … Read more
To select the contents to style, the CSS selectors are used. Selectors in CSS are used to select an HTML element according to its id, class, type, attribute, etc. Different types of CSS selectors are listed below: CSS Element Selector CSS Id Selector CSS Class Selector CSS Universal Selector CSS Group Selector CSS Element Selector: … Read more
A CSS rule set contains two blocks. Selector: The HTML element to be styled is specified by a selector. Declaration Block: One or more declarations containing a property name and value separated by a semicolon are included in the declaration block. Property: The type of attribute of the HTML element is known as property. For … Read more