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 »
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 »
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 »
Image Gallery The following image gallery is created with CSS: Example <html><head><style>div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px;}div.gallery:hover { border: 1px solid #777;}div.gallery 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:
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 »
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 »
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 »
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 »
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 »
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 »