Post
Ask Question

Django Bootcamp - Part Three (CSS Advanced)🐍

Introduction

 
In my previous article, we learned the basic CSS with Selectors and Color patterns. We also made our very first static web app/page.
 
In this article, we will learn different properties of fonts like size, weight, text-alignment, etc. Also, we will download new fonts and change fonts. Note one thing, not every OS has every font. Google Font is free and easy to apply in the CSS file. Not only these fonts, but the box model is also an interesting part of the Webpage. It is a great combination of content and margins. Let's see in detail. 
 

Font

 
This image will give us a better idea about the new fonts in HTML.
 
Visit this link in your browser: https://fonts.google.com/ and we can find out there are 987 types of fonts available, which is useful for advanced web development as well as we can save it as a new font in our operating system. We can resize them, and go through different languages. There is also another attribute font property where we can see the different choices like thickness, slant, and width. 
 
Django Bootcamp
 
Note
Before selecting a new font for the web development make sure that it's going to be reusable and the source code is available.
 
The most popular font properties are:
  • font-family, 
  • font-size,
  • font-style,
  • font-weight,
  • font-variant,
  • color,
  • text-decoration,
  • text-shadow,
  • text-transform,
  • letter-spacing,
  • word-spacing,
  • white-spacing. 

Box

 
The box model allows us to precisely dictate how we want HTML elements to look.
 
These are the images on which we will elaborate on the box concept of the web page. 
 
Django Bootcamp
 
When we are talking about the web page design or a layout this will be reflected below. 
 
The properties are work in order: top, right, bottom, and left. 
 
Django Bootcamp
 
TIP
  • When you set the width and height properties of an element in CSS it is ultimately content area. When setting background-color, it will cover the content area and padding both. Total element height= height + top padding + bottom padding + top border + bottom border +top margin + bottom margin
  • Width and height are usually expressed with pixels and percentages.
In this article, we will learn the font and box concept with complete CSS. It is advanced concept of web development.
 
Let's see with an example where I had generated a spectrum image. I will also share some links where you will find out these images and grab the color palate code easily.
 
Check this link for the color palates and spectrum images.
 
Also, visit this link for advanced fonts,
 
Django Bootcamp
 
Example - pro.html
  1. <!DOCTYPE html>  
  2. <html lang="en" dir="ltr">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <title>Spectrum Project</title>  
  6.             <link href="https://fonts.googleapis.com/css2?family=IM+Fell+French+Canon+SC&display=swap" rel="stylesheet">  
  7.                 <link rel="stylesheet" href="pro.css">  
  8.                 </head>  
  9.                 <body>  
  10.                     <h1>My Spectrum Project</h1>  
  11.                     <table class="art">  
  12.                         <tr>  
  13.                             <td id='one'></td>  
  14.                             <td id='two'></td>  
  15.                             <td id='three'></td>  
  16.                             <td id='four'></td>  
  17.                             <td id='five'></td>  
  18.                         </tr>  
  19.                     </table>  
  20.                 </body>  
  21.             </html>    
pro.css
  1. h1 {  
  2.   text-align: center;  
  3.   font-family: 'IM Fell French Canon SC', serif;  
  4. }  
  5.   
  6. .art {  
  7.   margin: auto;  
  8. }  
  9.   
  10. td {  
  11.   background-color: black;  
  12.   height: 300px;  
  13.   width: 150px;  
  14.   border: 6px solid white;  
  15. }  
  16.   
  17. #one {  
  18.   background-color: #183446;  
  19. }  
  20.   
  21. #two {  
  22.   background-color: #2D4656;  
  23. }  
  24.   
  25. #three {  
  26.   background-color: #A81E1E;  
  27. }  
  28.   
  29. #four {  
  30.   background-color: #020F14;  
  31. }  
  32.   
  33. #five {  
  34.   background-color: #0F1620;  
  35. }    
Output
 
Django Bootcamp
 
Kindly check the attached file for a better idea.
 
As we know, CSS is a vast subject for web development with a variety of attributes for all web content. The very rare and attractive features are discussed below.
 

Styling the table

 
the empty-cell property,
 
There are two possible values for it: Show and Hide
 
Example 
  1. <!DOCTYPE html>  
  2. <html lang="en" dir="ltr">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <title>rare contents</title>  
  6.             <link rel="stylesheet" href="rare.css">  
  7.             </head>  
  8.             <body>  
  9.                 <table border="1">  
  10.                     <tr>  
  11.                         <td>HTML</td>  
  12.                         <td>CSS</td>  
  13.                     </tr>  
  14.                     <tr>  
  15.                         <td>Python</td>  
  16.                         <td></td>  
  17.                     </tr>  
  18.                 </table>  
  19.             </body>  
  20.         </html>    
  1. table{  
  2.   border-collapse:separate;  
  3.   empty-cells: hide;  
  4. }  
Output
 
Django Bootcamp
 

Styling the list

 
We can style the the list with circle,square,decimal, disc, lower-alpha(a,b,c). Apart from these list-style-image property it looks good for the professional website.
 
Example   
  1. <!DOCTYPE html>    
  2. <html lang="en" dir="ltr">    
  3.   <head>    
  4.     <meta charset="utf-8">    
  5.     <title>rare contents</title>    
  6.     <link rel="stylesheet" href="rare.css">    
  7.   </head>    
  8.   <body>    
  9.     <p>Following list is list-style-position: <h2>inside</h2></p>    
  10.     <ul>    
  11.       <li>Red</li>    
  12.       <li>Blue</li>    
  13.       <li>Green</li>    
  14.     </ul>    
  15.   </body>    
  16. </html>    
  1. ul{  
  2.   list-style-image: url("python-logo.png");  
  3.   list-style-position: inside;  
  4. }  
Output
 
Django Bootcamp
 

Positioning Elements

 
Static Positioning - Static value used in positioning to make the element run in the natural order of the page.
Fixed Positioning - Fixed position is related to the browser window, will not move even if the window scrolls. It has more top, right, left, and the bottom is properties.
Relative Position - Relative value puts the element relative to the normal flow.
Absolute Position - It overlaps other elements.
 

Float

 
Floated element means the element can be in the left or right direction, not up or down. The clear float property accepts the values none, left, right, and both. The clear property is used to take the next element off the floating group.
 

z-index property

 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en" dir="ltr">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <title>rare contents</title>  
  6.             <link rel="stylesheet" href="rare.css">  
  7.             </head>  
  8.             <body>  
  9.                 <div class="blue">Blue    
  10.     
  11.                </div>  
  12.                 <div class="red">Red    
  13.     
  14.                </div>  
  15.             </body>  
  16.         </html>    
  1. .blue {  
  2.   background-color: #8EC4D0;  
  3.   margin-bottom: 15px;  
  4.   width: 120px;  
  5.   height: 120px;  
  6.   color: #FFF;  
  7. }  
  8.   
  9. .red {  
  10.   background-color: #FF4D4D;  
  11.   position: relative;  
  12.   margin-top: -50px;  
  13.   margin-left: 50px;  
  14.   width: 120px;  
  15.   height: 120px;  
  16.   color: #FFF;  
  17. }    
Output
 
Django Bootcamp
 
This property is to specify the stack order of an element.
 

Summary

 
In this article, we have almost completed a very interesting part of  web development with advanced features. There are many other features to decorate web page elements. With this much basic knowledge, we can easily build up the advanced Web App using Django in Python. Now I will move towards the Bootstrap and Javascript for Web applications.


Similar Articles