Introduction to CSS

Introduction

 
In the last chapter, we have discussed the HTML in detail. In this chapter, 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

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

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

  1. The selector, in general, is used to target the HTML element that we want to style. 
  2. We can use "ids" to target a single element. We can use "classes" to target a group of elements. 
  3. We can also use a combination of the selector tags to target a certain combination of elements. (JSON Sibling) 
  4. We can use a class name with .-Dot while approaching styling class elements.  
Ex. 
  1. .firstclass{  
  2.          color: blue;   
  3. }   
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. 
  1. #signleout{  
  2.          color: pink;  
  3.          text-decoration: line-through;   
  4. }   
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. 
  1. *{  
  2.       color: black;   
  3. }    
 

JSON Selector

 
A concatenation of elements performs the styling to the web page elements using arithmetic operators.
 
Ex. 
  1. h3 + ul {  
  2.       border: 4px solid black;   
  3. }    
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.   
  4.      <head>  
  5.           <meta charset="utf-8">  
  6.           <title>CSS Basic Example 1</title>  
  7.           <link rel="stylesheet" href="basiccssfile.css">  
  8.      </head>  
  9.   
  10.      <body>  
  11.           <h1> Welcome to CSS Basics Example 1! </h1>  
  12.           <div class="">  
  13.                <p> Thanks for visiting this site...</p>  
  14.           </div>  
  15.           <h2>What is this site for?</h2>  
  16.           <p>This site can do three things:</p>  
  17.           <ol>  
  18.                <li id='itemone'>Take in text input</li>  
  19.                <li>Take in Log in Information:</li>  
  20.                <li>  
  21.                     <a href="https://www.google.com">Take you to Google! </a>  
  22.                </li>  
  23.           </ol>  
  24.           <div class="blogtext">  
  25.                <textarea name="name" id="textblog"></textarea>  
  26.           </div>  
  27.           <h2>Please Log In to save your blog post:</h2>  
  28.           <form class="" action="index.html" method="post">  
  29.                <p>  
  30.                     <label for="">Email:</label>  
  31.                     <input type="email" name="" value="">  
  32.                     <label for="">Password:  
  33.                          <input type="password" name="" value="">  
  34.                     </label>  
  35.                </p>  
  36.                <div class="">  
  37.                     <p> Question or Comments/Send us feedback here:</p>  
  38.                </div>  
  39.           </form>  
  40.      </body>  
  41.   
  42. </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. }  
Try to perform these tasks yourself.  
 

Summary

In the next chapter, you will learn different properties of fonts like size, weight, text-alignment, etc. 
Author
Dipa Mehta
142 12.6k 493.6k
Next » CSS: Fonts and Alignment

©2024 C# Corner.