Introduction to CSS

CSS TUTORIAL

CSS stands for cascading style sheet. It is normally used to control the style of the web document in a simple and easy way. CSS also describes how HTML elements are to be displayed on screen. In this tutorial we are going to look at how to use CSS to style and beautiful your web pages.

Why use CSS

CSS is used to style your web pages, including its designs, layouts and variations in display of different screens and devices. CSS is one of the compulsory technologies you must get familiar with if you wish to be a web developer. CSS has solved the problem of repeating a style all over the documents. It enabled one to easily style several HTML elements at the same time.

Application of CSS

CSS saves time: It saves a lot of time as only one style sheet can be used on multiple pages, there is no need to write same code in all the pages. A single file can be used to write the code for same styling of the web page. this helps to decrease the page loading time as the file transfer size get reduced.

Improves HTML functionality: CSS has a larger number of attributes than HTML which only provides limited number of styling attributes.

Multiple Device Compatibility: CSS can optimize the same webpage to adapt different viewports. This makes the webpages compatible with any device.

Pages load faster When a single file is used for the styling of several webpages, the loading of the pages is faster because of the reusing of code.

CSS Code:

body {
    background-colors: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: verdana;
    font-size: 20px;
}

Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. Try contrast pro!

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro

Resources

• Contrast Design Bootstrap
• Accordion
• Alert
• Animation
• Autocomplete
• Badges
• Box
• Breadcrumb
• ButtonGroup
• Button
• ButtonToolbar
• Card
• Carousel
• Checkbox
• Collapse
• DataTable
• DatePicker
• DropDown
• Footer
• Forms
• Icon
• Iframe
• Input
• InputGroup
• ListGroup
• Mask
• Modal
• Multiselect
• Notification
• Pane
• Panel
• Pop Over
• Progress
• Radio
• Rating
• Select
• Select 2
• Slider
• Spinner
• Stepper
• Switch
• Table
• Forms
• Navbar
• Pagination
• Tab
• Sidebar
• Time Picker
• Data Table
• Fixed Data Table
• Table
• Widgets