What is !important? The !important rule in CSS is used to add more importance to a property/value than normal. In fact, if you use the !important rule, it will override ALL previous styling rules for that specific property on that element! Let us look at an example: Example <!DOCTYPE html> <html> <head> <style> #myid { background-color: blue; } .myclass… Read More »
What is Specificity? If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will “win”, and its style declaration will be applied to that HTML element. Think of specificity as a score/rank that determines which style declaration are ultimately applied to an element. Look… Read More »
CSS Units CSS has several different units for expressing a length. Many CSS properties take “length” values, such as width, margin, padding, font-size, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. Example Set different length values, using px (pixels): <!DOCTYPE html> <html> <head> <style> h1 { font-size: 60px; } p { font-size: 25px; line-height: 50px;… Read More »
Website Layout A website is often divided into headers, menus, content and a footer: There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial. Header A header is usually located at the top… Read More »
CSS counters are “variables” maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document. Automatic Numbering With Counters CSS counters are like “variables”. The variable values can be incremented by CSS… Read More »
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 »