Over 10 years we helping companies reach their financial and branding goals. Onum is a values-driven SEO agency dedicated.

CONTACTS

10 HTML & CSS Tricks 

In this article, you’ll learn some cool HTML & CSS Tricks that make your website look ten times more attractive. If you are a beginner coder then this article can help you to learn new things.

HTML is used to create Web pages and Web applications. With the help of Html, you can create a web page layout and CSS is used for styling. With the use of both, you can make an attractive front-end page.

 There are many HTML & CSS Tricks, Here we’ll discuss a few of them. 

1. <label> Tag

We usually forget the Form element to mark up the document. As we also forget the <label> tag which is usually used with the form tag. Lable’s text can be easily noticeable, the <label> tag also passes a “for” attribute to specify which element is given to the label. The <label> tags are great for styling, they also allow us to give a caption for a clickable associated element.

For Example –

<label for="username">Username</label>
<input id="username" type="text" />

2. <button> Tag

The <button> tag is a element that can click.

When we have to submit some kind of value we use a button tag. Inside the button tag, you can put tags like(<b>, <strong>,<img> etc). Always define the type of button, to tell the browser what type of button it is.

We can easily style the button with CSS, like hover, opacity, and many more styling tags.

For Example –

HTML & CSS Tricks
HTML Trick

3. <ins> and <del> Tag

If you want to change some value and see the editing revision vale markup, then <ins> and <del> are the right tag for it. As the name shows, <ins> means what you want to add in return for the existing value, and <del> means what is going to be deleted. If you are a teacher then it can help you to make students understand.

For Example –

I <del>like</del> <ins>love</ins> myself.

Output - I  love myself.

4. <span> Tag

The span tag is used to color a part of the text. It is also used to color a specific region inline container used to color part of the text and it can easily be styled and manipulated by the CSS and JavaScript.

For Example – 

HTML & CSS Tricks
Span tag

In the above example, the blue element has a blue color, with a span tag we can make inline-block changes.

5. CSS Animation

Animation can grab the attention of the user on your web page. With the help of an animation, you can move your words and pictures as well as when they move you also can put color changing effect in it and this can make your page attractive. CSS makes animation easy.

Syntax of CSS Animation

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

To know more about CSS click here.

6. CSS: Hover

CSS: Hover is one of the best ways to make your pages look attractive. As your cursor over the text, it changes its color or what you specify the changes in hover. Hover can be used on all elements.

To know more about CSS: Hover click here.

7. Absolute Positioning 

If you want to control an element on your website at all times, absolute positioning is the key to make this thing happen. If your website is big and you want to fix the position of your image or box then absolute positioning allows you to control exactly where the element will stay. Use top, left, right, down accompanied by a pixel value to control where an element stays. 

For Example – 

position:absolute;top:20px;right:20px

In this example, the absolute fix the position on the top right corner of the page.

8. CSS Opacity/Transparent

You can use opacity instead of Rgba. Opacity is used to transparent the image or element. If you want to transparent your background image or box then you can use it. It can take value from 0.0 to -1.0, the lower value the more transparent. 

You can also use opacity with the hover that can make your site attractive and beautiful.

For Example – 

img {
  opacity: 0.5;
}

9. CSS Inline-Block

Inline-block makes your page more attractive. with the help of inline-block, you can make any element highlighted with a specific box with respected height, width or margin, or padding. 

The main difference between the display: inline and display:inline-block doesn’t add a line break after the element, so the next element will sit next to the existing element.

For Example –

HTML & CSS Tricks
HTML & CSS Tricks

In this above example, you can see the difference as inline-block we can set our padding, border, height, and others it doesn’t affect the other lines.

10. CSS Form 

With the help of the <form> tag, our page looks more manageable and looks simple. The form can use to take information about the user as their name, age, and many other things.

Also, you can set the value of the input-field and width as you want. 

For Example-

 

HTML & CSS Tricks

In this above example, we made our form more attractive and stylish with the help of CSS. So we set their margin, padding, and another thing.

With the help of these things you can easily make your website look more attractive and in an aligned way.

 

 

Author

Anjali V.

Leave a comment

Your email address will not be published. Required fields are marked *