Mastering CSS: A Beginner’s Guide to Styling Web Pages with Flexbox, Grid, and More

CSS (Cascading Style Sheets) is the language used to style and design web pages. The term "cascading" means that styles applied to parent elements cascade down to child elements unless overridden.

At its core, CSS involves two key actions:

  1. Selecting elements on a webpage.
  2. Styling those elements based on the selection.

Inline Styling

Inline styling is applied directly within the HTML element:


<h1 style="color: blue;">Lorem ipsum dolor sit. </h1>

Here, the style attribute specifies the styling directly within the line of code.

Page Styling (Internal CSS)

Add a <style> tag inside the <head> to define styles for the entire page: 


<head>
<style>
  h2 {
    color: blue;
  }
</style>
</head>

Using Classes and IDs:

  • Classes: Used for multiple elements, selected using a dot (.).
  • IDs: Unique to a single element, selected using a hash (#). 

.exampleclass { color: red; }
#exampleid { font-size: 20px; }

External CSS

Create a separate .css file for styling and link it to your HTML file: 


<head>
  <link rel="stylesheet" href="style.css" />
</head>

Box Model

The box model determines how much space an element occupies:

  • Content: Actual content of the element.
  • Padding: Space between content and border.
  • Border: Surrounds the padding.
  • Margin: Space outside the border, separating elements.

Example:


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • content-box: Default behavior where padding and border are added to content width.
  • border-box: Includes padding and border within the total width.

Flexbox

Flexbox provides powerful layout control for aligning and positioning elements.

Basic Syntax:


display: flex;
justify-content: center;
align-items: center;

Key Properties:

  • justify-content: Aligns items along the main axis (e.g., center, space-around).
  • align-items: Aligns items along the cross axis (e.g., center).
  • flex-wrap: Controls whether items wrap to the next line.

Grid Layout

CSS Grid enables precise control over rows and columns.
Example: 


display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Defines three columns */
gap: 20px; /* Adds space between grid items */

Control inner elements using grid-column and grid-row: 


grid-column: 1 / 3; /* Spans from column 1 to 3 */
grid-row: 1 / 2; /* Spans from row 1 to 2 */

Media Queries

Use media queries to make styles responsive:


@media (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: lightblue;
  }
}

Selectors Overview

  • Universal Selector: * {} (Applies to all elements)
  • Type Selector: h1, p {} (Targets specific elements)
  • Class Selector: .classname {}
  • ID Selector: #id {}
  • Pseudo-classes: a:hover {} (Styling on user action)
  • Pseudo-elements: p::first-letter {}
Tags :
I write things which I face in day to day life of online and have difficulty implementing it, includes topics about Android, Ubuntu, Windows 10, Android apps making using Android studio, Google tips and tricks, blogging SEO tips and much more. I will also share about cinema activity and fun things around the world. Follow me on Twitter➤ twitter.com/legaluser Facebook➤facebook.com/syedahmed085

Comments

Post a Comment

Please share your opinions and suggestion and do not enter any spam links in the comment box

Popular posts from this blog

How To Record Audio in Moto G Without Any Third Party Apps

Image
Although there is no in-built app (or) interface in the Moto G to record audio, however, there is a workaround from which you can record audio and save it. To do that just go to the Messaging app >>> New Message >>> Click on Attach >>> Record Audio Below is screenshots illustrating : Also Read:  How I Submitted My Blog to Google Search Now all you have to do is record your audio, play it and then remove it, Now you can find the audio automatically get saved in the memory, which you can access through any File Manager  (or) you can play it again in Google Play Music . Below are all my recordings saved in memory, which I have accessed through ES File Explorer (File Manager) So Enjoy all the fun stuff in the Moto G , if you have a better suggestion please voice your opinion in the comments section. Also Read:  How I loaded my website quick and fast
KNOW more »

How to Unistall Software (or) Programs in Ubuntu Using the Terminal

If you want to uninstall the installed programs using Terminal follow these steps Open the terminal using ctrl + alt + t Browse your installed programs by entering the command dpkg --list and note down the name of package you desired to uninstall                                 (or)           dpkg --list to check if the package has the same as the program name        3. a) Uninstall the package (or) program only use the command sudo apt-get remove              Eg: sudo apt-get remove yelp                          b)To uninstall the program along with its configuration files use the command sudo apt-get --purge remove             Eg: sudo apt-get --purge remove yelp
KNOW more »

All the Questions Answered About Rs.500 and Rs.1000 In this Frequently Asked Question Document

1. Why is this scheme? The incidence of fake Indian currency notes in higher denomination has increased. For ordinary persons, the fake notes look similar to genuine notes, even though no security feature has been copied. The fake notes are used for anti-national and illegal activities. High denomination notes have been misused by terrorists and for hoarding black money. India remains a cash-based economy hence the circulation of Fake Indian Currency Notes continues to be a menace. In order to contain the rising incidence of fake notes and black money, the scheme to withdraw has been introduced. 2. What is this scheme? The legal tender character of the notes in denominations of ₹ 500 and ₹ 1000 stands withdrawn. In consequence there,of withdrawn old high denomination (OHD) notes cannot be used for transacting business and/or store of value for future usage. The OHD notes can be exchanged for value at any of the 19 offices of the Reserve Bank of India or at any of the bank branches...
KNOW more »