CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen or in other media. CSS allows you to apply styles to web pages. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .CSS file, and reduce complexity and repetition in the structural content.
External Style Sheets: Apply styles to a whole website by placing the CSS into an external style sheet. An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages.
Internal CSS Stylesheet: When creating a stylesheet internally in the web page, you will need to use the HTML tags in the Head section of your webpage. All the code for the Internal CSS stylesheet is contained between the section of your websites code. Below is an example of what an Internal stylesheet looks like.
The inline style: uses the HTML “style” attribute. This allows CSS properties on a “per tag” basis.
The most common way to add CSS, is to keep the styles in separate CSS files.
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Title</title> <meta name="description" content=""> <meta name="author" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <!--[if lte IE 9]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> <![endif]--> <main> <header> <div class="container"> <div class="row"> <div class="col-sm-12"> </div> </div> </div> </header> <section>...</section> <footer>...</footer> </main> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
HTML and CSS online tutorials
You can customize this code further as per your requirement.
Smartlearningtutorials.com Website is a free online resource on programming and digital marketing for beginners.
It was founded in March 2018 by Rakesh Pal to deliver the best support to beginners.
Below are the few popular tutorials websites for your reference.