In this lesson we will demonstrate several ways to style components.
In the next example, we use CSS to improve the HTML form style:
In this example we demonstrate how to use CSS to style search form.
You can use the CSS transition property to animate the width of the search input when it gets focus, using CSS transition property
Click on the search icon:
You can control the width of the field using width property:
If you want to style specific input field, there are 3 methods:
You can control the size of the Textarea:
You can control the space inside text area using the padding property:
You can control the background color background-color property
and the color property to change the color of the text
You can control the border size and color using the border property
Also add rounded corners to property using the border-radius
Resize the browser window to see the effect. When the screen is less than 600px wide, the style of the page/component changes.
The next example use media queries method to create responsiveness, check our media queries guide for more information.
enjoy this css full course, our main goal is to create css3 tutorial with examples,our courses are free, learn css3 online.