Text Image and Spacing in CSS

Text Image and Spacing in CSS. In this article we will step through on how to combine text , article and images into a single row. Inside this row section i will divide it into 2 separate partition , one column which holds the text information or contents while the other holds an image.

The second objective in this article is to style the Image and text of both separate column in the row.In the Mean time we will also look into how to create box shadow for our image . How to specifically target an Image and how to specifically target the text element contains inside our article.

Finally ,I will make the content for both text and image to stack up properly when it is in mobile version.By doing this i will need to adjust the Mobile Styling under my Media Query in CSS.

 

Follow the Step Below to Style text image and Spacing in CSS

1. Create a Container and a Row in HTML.

           <div class="container">
       
                   <div class="row">
              
                   </div>
     
          </div>   
   
       

2. Define Column Class in CSS.

         .col-1 {width: 8.33%};
         .col-2 {width: 16.66%;}
         .col-3 {width: 25%;}
         .col-4 {width: 33.33%;}
         .col-5 {width: 41.66%;}
         .col-6 {width: 50%;}
         .col-7 {width: 58.33%;}
         .col-8 {width: 66.66%;}
         .col-9 {width: 75%;}
         .col-10 {width: 83.33%;}
         .col-11 {width: 91.66%;}
         .col-12 {width: 100%;}

        

3. Create 1 Column using “.col-7 ” and 1 column“.col-5 ” in HTML

        <div class="container">
       
                <div class="row">
                     <div class="col-7">
           
             
                     </div>
                    <div class="col-5">
                  
                    </div>
        
               </div>
          </div>
                  
       

4. Create an Article tag to contain the content inside your Paragraph tag , and create a div tag name HTML As well to contain the Image in the Second Column
5. Insert your text Content in the paragraph tag and insert your image in Column 2 using the Image Tag as well

          <div class="container">
       
                   <div class="row">
                            <div class="col-7">
           
                                        <article>
                 
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dictum ante quis diam dictum, at fermentum ligula congue</p>
                                       
              
                                        </article>
                   
                            </div>
                            <div class="col-5">
                                          <div class="html-icon">    
                                                 <img src="HTML.png">
                    
                                          </div>
        
                            </div>
                    </div>   
      
          </div>
 
       

6. Style the Article and paragraph tag,give a line height between the text on top and below, allocate some padding to your article

         p{
    
          font-size : 28px;
          line-height : 1.2;
    
           }

         article{
    
                 font-size:35px;
                 padding:20px;
   
                }

       

7. Style the Image make it centre and gave it a box shadow. Check out what is a Box Shadow here

        div.html-icon img{ 
                         display:block;
                         margin:auto;
                         box-shadow:-2px -2px 20px 2px rgba(0,0, 0,15),2px 2px 17px 2px rgba(0,0, 0,.15) ;/* Horizontal Vertical Blur Spread*/
                         /*shadow, background color,Box Color, Opacity*/
    
                         }
      

8. Turn your text content and image column into 100% width, provide some space margin of 10px under mobile mode.All these Styling lie under the @media Query Section

         .col-7,.col-5{
                     width:100%;
                     margin: 0;
                     }
         div.html-icon{
                    margin:10px;
        
                     }
     
    div.html-icon img{
        
                  width:100%;
                     }  


         

 

Well that wrap up on how to manage Text Image and Spacing in CSS . Check out how to style image and Box Shadow in CSS here