Category: CSS

CSS3 Challenge #1: Flexbox

Since I create videos only to help beginners, this is a very basic challenge on flexbox. Please try complete on your own first . <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="container"> <div class="inner"> <div>1</div> <div>2</div> <div>3</div> </div> <div>4</div> </div> </body>

External Style Sheets in CSS3

It is a very good practice to keep CSS styles in a separate file which is also known as sheet.  By doing so, you will have 2 files to work on, one will be HTML and another will be CSS.  You only need to add reference to the CSS style sheet using link element.  This

Internal Style Sheets in CSS3

By using style attribute which contains multiple properties, will make your code look dirty.   In such scenario, Internal Style Sheets help a lot.  Internal Style Sheets are created using style element.  They are usually placed inside head element. There are multiple selectors like class, ID, tag name etc which you can use to select an

Inline Styles in CSS3 with Example

For Inline Styles, we make use of style attribute.  You can apply one or more styles directly to an element in HTML.  The syntax for a CSS style is given below with an example. property_name:value; <!DOCTYPE html> <html> <head> <title>CSS Tutorials</title> </head> <body> <div style="background-color: red;font-weight: bold;">Hello World!</div> </body> </html>