Online Training
Q4 2024
Nov 19 to Dec 10
11.00 AM EST: USA, UK, Canada, Mexico and Europe
06.00 AM GMT: MiddleEast, Asia and Australia
Signifiers are clues or hints that help users understand how to interact with elements on a page. For example, a button might have a shadow to indicate that it can be clicked.
<!-- Signifier with shadow effect -->
<button style="box-shadow: 2px 2px 5px gray;">Click Me</button>
Browsers come with built-in default styles that they apply to all web pages. These default styles are known as the user agent stylesheet.
<!-- Default link style by browser -->
<a href="#">This is a link</a>
Links and buttons need to work the same way across different browsers to ensure a consistent user experience. This means that clicking a button or a link should always perform the same action.
<!-- Link and button performing the same action -->
<a href="#" onclick="alert('Link clicked!')">Click this link</a>
<button onclick="alert('Button clicked!')">Click this button</button>
Links have several states in a browser, such as when they are hovered over, clicked, or visited. Each state can be styled differently to provide feedback to the user.
<!-- Styling different link states -->
<a href="#" style="color: blue; text-decoration: underline;">Normal link</a>
<a href="#" style="color: red; text-decoration: none;">Visited link</a>
<a href="#" style="color: green; text-decoration: underline;">Hover link</a>
Links should be visually distinct from regular text. This helps users easily identify clickable areas on a web page.
<!-- Styled link -->
<a href="#" style="color: darkblue; text-decoration: none;">Styled Link</a>
By default, links are usually blue and underlined, which makes them stand out from regular black text.
<!-- Default appearance of a link -->
<a href="#">This is a default styled link</a>
Anchor text is the clickable text inside a link. It should describe what the link will lead to, giving users a clear idea of what to expect when they click.
<!-- Anchor text describing the link -->
<a href="https://www.example.com">Visit Example.com</a>
The 'title' attribute provides additional information about an element. It shows up as a tooltip when you hover over the element, giving extra context to users.
<!-- Title attribute showing a tooltip -->
<a href="#" title="This is an example link">Hover over me</a>
Tooltips are small boxes that appear when you hover over an element. They show extra information from the 'title' attribute or other details.
<!-- Tooltip example -->
<button title="Click this button to submit">Submit</button>
The :hover pseudo-class in CSS is used to change the appearance of an element when a user places their mouse over it. This is useful for highlighting links and buttons.
<!-- Hover effect using CSS -->
<style>
a:hover {
color: orange;
text-decoration: underline;
}
</style>
<a href="#">Hover over this link</a>
The CSS cursor property changes the appearance of the mouse cursor when it hovers over an element, indicating that the element is clickable or interactive.
<!-- Changing cursor style -->
<style>
button {
cursor: pointer;
}
</style>
<button>Click Me</button>
Skeuomorphism is a design concept where elements mimic the appearance of real-world objects to make them more familiar and easier to use. For example, a button might look like a physical button with a shadow and 3D effect.
<!-- Skeuomorphic button design -->
<style>
.skeuomorphic-button {
background: #f0f0f0;
border: 2px solid #ccc;
border-radius: 5px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
padding: 10px 20px;
}
</style>
<button class="skeuomorphic-button">Click Me</button>
Flat design focuses on simplicity and minimalism. It avoids using 3D effects and shadows, opting for a clean, flat look instead.
<!-- Flat design button -->
<style>
.flat-button {
background: #3498db;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
</style>
<button class="flat-button">Click Me</button>
Skeuomorphic styling for buttons makes them look like physical objects with depth and texture, helping users recognize them as interactive elements.
<!-- Skeuomorphic button with depth -->
<style>
.skeuomorphic-button {
background: #e0e0e0;
border: 1px solid #b0b0b0;
border-radius: 5px;
box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
padding: 10px 20px;
}
</style>
<button class="skeuomorphic-button">Click Me</button>
Flat styling for buttons uses simple colors and shapes without any 3D effects or shadows, fitting the flat design approach.
<!-- Flat button design -->
<style>
.flat-button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
</style>
<button class="flat-button">Click Me</button>
When a button is hovered over, it might change color or appearance to provide feedback to the user, indicating that it is clickable.
<!-- Hover effect for button -->
<style>
.hover-button {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
.hover-button:hover {
background: #0056b3;
}
</style>
<button class="hover-button">Hover over me</button>
Mobile devices do not have a hover state like desktop computers. Instead, interactions are usually based on taps or clicks.
<!-- Mobile touch interaction -->
<button onclick="alert('Button tapped!')">Tap me on mobile</button>
Favourites
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now
Welcome to our comprehensive collection of programming language cheatsheets! Whether you're a seasoned developer or a beginner, these quick reference guides provide essential tips and key information for all major languages. They focus on core concepts, commands, and functions—designed to enhance your efficiency and productivity.
ManageEngine Site24x7, a leading IT monitoring and observability platform, is committed to equipping developers and IT professionals with the tools and insights needed to excel in their fields.
Monitor your IT infrastructure effortlessly with Site24x7 and get comprehensive insights and ensure smooth operations with 24/7 monitoring.
Sign up now!
Java
HTML and CSS 
Python
Javascript
Troubleshooting
Blogs
Learn
Tools