Post
Ask Question

Django Bootcamp - Part Three (CSS Basic)🐍

Introduction

 
In my previous article, we have discussed the HTML in detail. In this article, we will learn the basics of CSS - Cascading Stylesheet with an example and coding. Apart from these, many other facts are discussed about CSS, which will help to build a professional Web application with Django Framework in Python. 
 

CSS stands for Cascading Style Sheet

 
CSS describes how HTML elements are displayed on a page.
 
Styling can be affecting many things --  colors, fonts, sizes, borders, and many more properties of HTML.
 
While you can define styling inside of an HTML file, it is much more common to separate .css file and then link it to HTML file. 
 
The basic syntax of a CSS is,
 
Syntax
 
selected tag{
      property: value; 
} 
 
Example
 
h1{
      color:blue; 
} 
 

Different ways to apply colors in CSS

  • Using a color name like Blue, Green, Purple, Pink, etc, we can apply color in the CSS file. 
  • A developer can use the color name or HTML RGB color code or HEX code.

    eg. #085401 is the green shade, which will define the red, green and blue colors
  • Using F, C, B, E, and  0-zero are the different shades that will help to mix colors and create a color combination.

    eg. #FF00FF  is the Magenta color. 
  • One more, rgba (red, green, blue, alpha) defines the transparent and opaque in the form of 0 and 1 respectively. The alpha value is between 0 and 1 only.

    eg. rgba (8,84,1,0.5) it is the light green shade, from the actual dark green color. 
We can try any of these options to apply color to the particular tag value.
 
After creating an HTML file, we have to apply the styling with the help of the CSS file.
 
The CSS file is linked with HTML <link> tag, where href attribute contains the value of the path of the CSS file.  
 

Selector

 
The selector, in general, is used to target the HTML element that we want to style. 
 
We can use "ids" to target a single element. We can use "classes" to target a group of elements. 
 
We can also use a combination of the selector tags to target a certain combination of elements. (JSON Sibling) 
 
We can use a class name with .-Dot while approaching styling class elements.  
 
Ex. 
 
.firstclass{
         color: blue; 
} 
 
Here, "firstclass" is the div class name in the HTML file. A class can be attached to multiple elements. 
 
We can use ids with the #-hashtag sign. 
 
Ex. 
 
#signleout{
         color: pink;
         text-decoration: line-through; 
} 
 
Here, "singleout" is the id name for another tag <p>. An id is attached to a single element. 
 
Another very uncommon selector is *-asterisk for every element on the page.  With applying this selector all the selection is overwriting and only performs the styling which is included in *.
 
Ex. 
 
*{
      color: black; 
} 
 
JSON Selector
 
A concatenation of elements performs the styling to the web page elements using arithmetic operators.
 
Ex. 
 
h3 + ul {
      border: 4px solid black; 
} 
 
here, <h3> is a parent tag which has <ul> tag.  
 
Let's learn all these features in this following example: 
 
By default, our HTML page seems like this,
 
 
With performing different CSS basic concepts on this page it will look like this,
 
Check this image below,
 
 
 
We can see there are different stylings on this page element. 
 
We will create a normal HTML file. 
  1. <!DOCTYPE html>  
  2. <html lang="en" dir="ltr">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <title>CSS Basic Example 1</title>  
  6.             <link rel="stylesheet" href="basiccssfile.css">  
  7.             </head>  
  8.             <body>  
  9.                 <h1> Welcome to CSS Basics Example 1! </h1>  
  10.                 <div class="">  
  11.                     <p> Thanks for visiting this site...</p>  
  12.                 </div>  
  13.                 <h2>What is this site for?</h2>  
  14.                 <p>This site can do three things:</p>  
  15.                 <ol>  
  16.                     <li id='itemone'>Take in text input</li>  
  17.                     <li>Take in Log in Information:</li>  
  18.                     <li>  
  19.                         <a href="https://www.google.com">Take you to Google! </a>  
  20.                     </li>  
  21.                 </ol>  
  22.                 <div class="blogtext">  
  23.                     <textarea name="name" id="textblog"></textarea>  
  24.                 </div>  
  25.                 <h2>Please Log In to save your blog post:</h2>  
  26.                 <form class="" action="index.html" method="post">  
  27.                     <p>  
  28.                         <label for="">Email:</label>  
  29.                         <input type="email" name="" value="">  
  30.                             <label for="">Password:  
  31.                                 <input type="password" name="" value="">  
  32.                                 </label>  
  33.                             </p>  
  34.                             <div class="">  
  35.                                 <p> Question or Comments/Send us feedback here:</p>  
  36.                             </div>  
  37.                         </form>  
  38.                     </body>  
  39.                 </html>    
Now we will perform the differnt tasks in CSS files,
 
Check this CSS file,
  1. /* Task1: Give the body element of a site light blue background set to pink using HEX code: */  
  2. body {  
  3.     background - color: #ADD8E6;  
  4. }  
  5. /*Task2: Change h1 t ohave 1px solid black border*/  
  6. h1 {  
  7.     border: 1 px solid black;  
  8. }  
  9. /*Task3: Makes all h2 element to colour purple*/  
  10. h2 {  
  11.     color: purple;  
  12. }  
  13. /*Task4: Make all input boxes have a 2px solid dark red border(using with RGB)*/  
  14. input {  
  15.     border: 2 px solid rgb(144, 0, 0)  
  16. }  
  17. /*Task5: Make yellow background to <p> elements inside all <div> elements(using HEX code)*/  
  18. div p {  
  19.     background: #fffca5  
  20. }  
  21. /*Task6: there is a textarea element having the id textblog, give it  
  22.  * A 5px solid gray border  
  23.  *A widht of 800px and height of 400px */  
  24. #textblog {  
  25.     border: 5 px solid gray;  
  26.     width: 800 px;  
  27.     height: 400 px;  
  28. }  
  29. /*Task7: There is a link Google on the page make it Red*/  
  30. a {  
  31.     color: red;  
  32. }  
  33. /*Task8: MAke the element with id="itemone" have an overlined text-decorstion and be the color purple.*/  
  34. #itemone {  
  35.     text - decoration: overline;  
  36.     color: purple;  
  37. }  
Find the zip file for this code and also check the image: excss1.png and try to perform these tasks yourself.  
 

Summary

 
Try this code in the Atom Editor and drop your comments on how it will work. You can also apply different methods to the CSS file, it's all about the basics of the CSS. It's not a  cool static web page, but we have to be clear about the concept of CSS basics in Web Development which will helpful for creating a full-stack development with any language. It is the time to jump up with advanced CSS learning in the next article.


Similar Articles