Monthly Archives: July 2022

Add Style in Forms

Styling Input Fields Use the width property to determine the width of the input field: Example <!DOCTYPE html> <html> <head> <style> input {  width: 100%; } </style> </head> <body> <h2>A full-width input field</h2> <form>  <label for=”fname”>First Name</label>  <input type=”text” id=”fname” name=”fname”> </form> <body> </html>​ Result: The example above applies to all <input> elements. If you only want… Read More »

Category: CSS

Attribute Selectors in CSS

Style HTML Elements With Specific Attributes It is possible to style HTML elements that have specific attributes or attribute values. CSS [attribute] Selector The [attribute] selector is used to select elements with a specified attribute. The following example selects all <a> elements with a target attribute: Example <!DOCTYPE html> <html> <head> <style> a[target] {  background-color: yellow; }… Read More »

Category: CSS

Image Sprites

Image Sprites An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Image Sprites – Simple Example Instead of using three… Read More »

Category: CSS

Image Gallery Using CSS.

Image Gallery The following image gallery is created with CSS: Example <html><head><style> {  margin: 5px;  border: 1px solid #ccc;  float: left;  width: 180px;} {  border: 1px solid #777;} img {  width: 100%;  height: auto;}div.desc {  padding: 15px;  text-align: center;}</style></head><body><div class=”gallery”>  <a target=”_blank” href=”img_5terre.jpg”>    <img src=”img_5terre.jpg” alt=”Cinque Terre” width=”600″ height=”400″>  </a>  <div class=”desc”>Add a description of the image here</div></div><div class=”gallery”>  <a target=”_blank” href=”img_forest.jpg”>    <img src=”img_forest.jpg” alt=”Forest” width=”600″ height=”400″>  </a>  <div class=”desc”>Add a description of the image here</div></div><div class=”gallery”>  <a target=”_blank” href=”img_lights.jpg”>    <img src=”img_lights.jpg” alt=”Northern Lights” width=”600″ height=”400″>  </a>  <div class=”desc”>Add a description of the image here</div></div><div class=”gallery”>  <a target=”_blank” href=”img_mountains.jpg”>    <img src=”img_mountains.jpg” alt=”Mountains” width=”600″ height=”400″>  </a>  <div class=”desc”>Add a description of the image here</div></div></body></html> Result:

Category: CSS

How To Add Dropdown In Website CSS?

Create a hoverable dropdown with CSS. Basic Dropdown Create a dropdown box that appears when the user moves the mouse over an element. Example <!DOCTYPE html> <html> <head> <style> .dropdown {  position: relative;  display: inline-block; } .dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  padding: 12px 16px;… Read More »

Category: CSS

How to add Navigation bar in website using CSS?

Navigation Bars Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. Navigation Bar = List of Links A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar… Read More »

CSS Opacity / Transparency

The opacity property specifies the opacity/transparency of an element. Transparent Image The opacity property can take a value from 0.0 – 1.0. The lower value, the more transparent: Example <!DOCTYPE html> <html> <head> <style> img {  opacity: 0.5; } </style> </head> <body> <h1>Image Transparency</h1> <p>The opacity property specifies the transparency of an element. The lower the value, the more… Read More »

Category: CSS

CSS Pseudo-elements

What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element Syntax The syntax of pseudo-elements:selector::pseudo-element {  property: value;} The ::first-line Pseudo-element The ::first-line pseudo-element is used to add a… Read More »

Category: CSS

CSS Pseudo-classes

What are Pseudo-classes? A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus Syntax The syntax of pseudo-classes:selector:pseudo-class {  property: value;} Anchor Pseudo-classes Links can be displayed… Read More »

Category: CSS

CSS Combinators

A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator. There are four different combinators in CSS: descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~) Descendant Selector The descendant… Read More »

Category: CSS