Explore Stylish Designs A CSS Page Showcase Journey

Elevate your web design with our CSS styles. Explore responsive layouts, beautiful typography, and modern visual enhancements effortlessly.

Start Your Test Now
Dear learners, Are you interested in assessing your progress?
Request your mentor to give you access and start your test.

“Dive into the world of web design with our beginner-friendly CSS course. Learn the fundamentals of styling, layout, and responsiveness. Build a solid foundation for creating visually appealing and modern websites. Start your coding journey today!”

Learn CSS Basic Styles

1. CSS Syntax :

CSS (Cascading Style Sheets) syntax is used to define styles for HTML documents.

  1. Selectors:
    • Selectors target HTML elements for styling.
    • Example: body, .class-name, #id.
  2. Properties:
    • Properties define the aspects of an element to be styled.
    • Example: color, font-size, margin.
  3. Values:
    • Values specify the style details for a property.
    • Example: red, 16px, 10%.
  4. Declaration:
    • A declaration is a property-value pair separated by a colon.
    • Example: color: blue;.
  5. Declaration Block:
    • A set of declarations within curly braces { }.

             selector {
             property1: value1;
             property2: value2;
             }

2. Type of CSS :

For beginners learning CSS, it’s important to cover the fundamental concepts and the three main types of CSS:

Inline CSS:

  • Usage: Apply styles directly within HTML tags.
  • Syntax Example:

HTML

<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>

Internal (or Embedded) CSS:

  • Usage: Include styles within the <style> tag in the HTML head.
  • Syntax Example:

HTML

<head>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: 'Arial', sans-serif;
    }
    h1 {
      color: #333;
      text-align: center;
    }
  </style>
</head>

External CSS:

  • Usage: Link an external CSS file to the HTML document.
  • Syntax Example (HTML):

HTML

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

2. CSS Comments :

Single-line Comments:

Denoted by // in CSS. Everything after // on the same line is considered a comment.

Multi-line Comments:

Enclosed between /* and */. Can span multiple lines.

HTML

/* This is a single-line comment */

     body {
      background-color: #f0f0f0;
     /* Background color for the  body */
    }

          /*
    This is a multi-line comment
    It can span multiple lines
     Good for longer  explanations or annotations
        */

      h1 {
       color: #333;          /* Text color for heading */
         }

3. Apply CSS Color and Border:

In CSS, colors and borders play a significant role in styling elements. Below are explanations and examples of using CSS for color and borders:

Colors:
Color Values:
  • Keywords: Predefined color names (e.g., red, blue).
  • Hex Codes: Six-digit codes representing RGB values (e.g., #ff0000 for red).
  • RGBA: Adds an alpha channel for transparency (e.g., rgba(255, 0, 0, 0.5) for semi-transparent red).

HTML

  h1 {
         color: red; 
          }

   p { 
      color: #336699;
        }

         a {

               color: rgba(0, 255, 0, 0.7);

            }
Borders:
Width: Sets the width of the border.

Style: Defines the style of the border (e.g., solid, dashed).

Color: Specifies the color of the border.

Combines width, style, and color properties into one declaration.

Rounded Corners:

  • Use border-radius to create rounded corners.

 

HTML

/* Set text color and background color */

     body {
     color: #333;
     background-color: #f0f0f0;
    }
    
/* Create a border with specific width, style, and color */
  
  div {
    border: 2px dashed #999;
  }
  
/* Apply a rounded border to an image */
   
  img { 
   border-radius: 8px;
  }

4.CSS Background Property:

The CSS background property is a versatile property that allows you to set various background-related styles for an element. Here’s an overview of the background property and its common properties:

Common background Properties:
  1. Background Color (background-color):
    • Sets the background color of an element.

  2. Background Image (background-image):

    • Specifies one or more image URLs to use as the background.

  3. Background Repeat (background-repeat):

    • Defines how the background image should repeat.
      • repeat: The default, repeats both horizontally and vertically.
      • repeat-x: Repeats only horizontally.
      • repeat-y: Repeats only vertically.
      • no-repeat: Does not repeat.

  4. Background Position (background-position):

    • Specifies the position of the background image.
      • Values can be keywords (top, bottom, center) or specific lengths/percentages.

  5. Background Size (background-size):

    • Sets the size of the background image.
      • Values can be keywords (cover, contain) or specific lengths/percentages.

  6. Background Attachment (background-attachment):

    • Determines if the background image scrolls with the content or stays fixed.
      • scroll: Background scrolls with the content.
      • fixed: Background stays fixed relative to the viewport.

HTML

 body { 
      background-color: #f0f0f0; 
     }

div {
background-image: url('background.jpg');
}

section {
background-repeat: no-repeat;
}

header {
background-position: center top;
}

article {
background-size: cover; }

body {
background-attachment: fixed; }

button {
background: #3498db url('button-bg.png') no-repeat center / 80px 30px;
}

5.CSS Margins & Padding Property:

In CSS, margins and padding are essential properties that control the spacing around elements. Here’s an overview of how to use the margin and padding properties:

The margin property is used to set space outside the borders of an element.

  • Shorthand margin Property:
    • Sets all four margins (top, right, bottom, left) at once.

  • Individual Margin Properties:

    • Sets margins individually for each side.

  • Auto Margin:

    • Centers an element horizontally within its containing element.

 

The padding property is used to set space inside the borders of an element.

  • Shorthand padding Property:

    • Sets all four paddings (top, right, bottom, left) at once.

  • Individual Padding Properties:

    • Sets paddings individually for each side.

6.Font and Float property :

The font property is used to set various text-related styles. It can include several sub-properties:

font-family:

  • Specifies the font family for an element.

font-size:

  • Sets the size of the font.

font-weight:

  • Specifies the boldness of the font.

font-style:

  • Specifies the style of the font (e.g., italic).

font-variant:

  • Controls the usage of small caps.

 

The float property is used for layout, allowing an element to be floated to the left or right of its container.

float:

  • Values: left, right, none, inherit.

clear:

  • Specifies on which sides floating elements are not allowed.
  • Values: left, right, both, none, inherit.

 

HTML

/* Set font styles */

 body { 
font-family: 'Helvetica', sans-serif; 
font-size: 16px;
 line-height: 1.6;
 }
  
   /* Style headings */
 h1 { 
font-size: 24px; 
font-weight: bold;
 }

/* Italicize emphasized text */ 
em { 
font-style: italic; 
}

/* Float elements to the left and right */

 .left { 
float: left; 
}

 .right {
 float: right;
 } 

/* Clear floating elements */ 

.clearfix::after { 
content: "";
 display: table; 
clear: both; 
}

Dear learners, Are you interested in assessing your progress?
Request your mentor to give you access and start your test.

Start Your Test Now

© Track Itinerary. Powered By : EligoCS All rights reserved.