CSS BACKGROUND :
The background-image property in CSS applies a graphic (e.g. PNG, SVG, JPG, GIF, WEBP) or gradient to the background of an element.
There are two different types of images you can include with CSS: regular images and gradients.
BACKGROUND IMAGES:
The URL() value allows you to provide a file path to any image, and it will show up as the background for that element. You can also set a data URI for the URL().
This technique removes one HTTP request, which is a good thing. But, there are a number of downsides, so before you start replacing all of your images make sure you consider all the pros and cons of Data URIs. You can also use background images to sprite images, which is another useful method for reducing HTTP requests.
For Example:
body {
/* Base64 encoded transparent gif */
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); }
BACKGROUND GRADIENTS:
Technically speaking, gradients are just another form of background image. The difference is that the browser makes the image for you. Another option when using backgrounds is to tell the browser to create a gradient. Here’s a super-duper simple example of a linear gradient:
Example:
body {
background: linear-gradient(black, white)
}
MULTIPLE BACKGROUND IMAGES:
You can use multiple images, or a mixture of images and gradients, for your background. Multiple background images are well-supported now (all modern browsers and IE9+ for graphic images, IE10+ for gradients).
When you’re using multiple background images, be aware that there’s a somewhat counter-intuitive stacking order. List the image that should be at the front first and the image that should be at the back last.
body {
background: url(logo.png), url(background-pattern.png); }
When you’re using multiple background images, you’ll often need to set more values for the background to get everything in the right place. If you want to use the background shorthand, you can set the values for each image individually. There’s no limit to how many background images you can set, and you can do cool things like animate your background images.
CSS TABLE:
Styling an HTML table isn’t the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted. the table component is used to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells. The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.
You can create a Bulma table simply by attaching a single table CSS class on an <table> HTML element with the following structure:
- <table table class=”table container” > as the main container
- threat the optional top part of the table
- tfoot the optional bottom part of the table
- tbody the main content of the table
- tr each table row
- th a table cell heading
- td a table cell
- tr each table row
CSS NAVIGATION BAR:
The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigation links. You can align these links to the left or right.
Right Aligned Links: To right-align your navbar links, just add the right class to your <ul> that contains them.
Left Aligned Links: To left align your navbar links, just add a left class to your <ul> that contains them.
Center Aligned Links: The logo will center itself on medium and down screens, but if you want the logo to always be centered, add the center class to your <a class=brand.logo”> You will have to make sure yourself that links do not overlap if you use this.
Fixed NavBar: To make the navbar fixed, you have to add an outer wrapping div with the class navbar fixed. This will offset your other content while making your nav fixed. You can adjust the height of this outer div to change how much offset is on your content.
Navigation DropDown Menu: To add a navbar dropdown menu, add the <ul> dropdown structure to the page. Then, add an element to trigger the dropdown menu. Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.
You Might Also be Interested In Reading, How To Create CSS Padding And Colors
