CSS Tutorial for Beginners PDF Guide Download Free

by
CSS Tutorial for Beginners GuideDownload

CSS Tutorial for Beginners

Welcome to the CSS (Cascading Style Sheets) tutorial for beginners! This guide is designed to help you learn CSS from scratch. We’ll cover the basics, provide coding examples, and include quiz questions to test your understanding. By the end of this tutorial, you’ll be able to style web pages with confidence. Let’s get started!

Introduction to CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS defines how elements should be rendered on screen, on paper, or in other media.

Why Learn CSS?

  • Enhance Appearance: Customize the look and feel of your web pages.
  • Separation of Concerns: Keep HTML structure separate from styling.
  • Responsive Design: Create layouts that work on various devices.

Getting Started with CSS

To start using CSS, you’ll need:

  1. A Text Editor: Options include Visual Studio Code, Sublime Text, or Notepad++.
  2. A Web Browser: Modern browsers like Chrome, Firefox, or Edge.

Ways to Add CSS to HTML

  1. Inline Styles: Using the style attribute within HTML elements.
  2. Internal Stylesheet: Using the <style> tag within the <head> section.
  3. External Stylesheet: Linking to a separate .css file.

Example of an External Stylesheet:

<!– index.html –>

<!DOCTYPE html>

<html>

<head>

    <title>My First CSS Page</title>

    <link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<h1>Hello, World!</h1>

<p>This is my first CSS-styled page.</p>

</body>

</html>

/* styles.css */

h1 {

    color: blue;

}

p {

    font-size: 18px;

}

CSS Syntax

CSS is composed of selectors and declarations.

Basic Structure

selector {

    property: value;

}

  • Selector: The HTML element you want to style.
  • Property: The aspect of the element you want to change (e.g., color, font-size).
  • Value: The value assigned to the property.

Example:

p {

    color: red;

    text-align: center;

}

Comments in CSS

Use /* comment */ to add comments.

Example:

/* This is a comment */

p {

    color: green;

}

Quiz Question

Q1: Which of the following is the correct CSS syntax to set the background color to yellow for all <h1> elements?

A. h1 {background-color: yellow;}
B. h1 {background: yellow;}
C. <h1 style=”background-color: yellow;”>
D. h1 {color: yellow;}

Answer: A. h1 {background-color: yellow;}

Selectors

Selectors are used to target HTML elements for styling.

Type Selector

Selects all elements of a given type.

Example:

p {

    color: blue;

}

Class Selector

Selects elements with a specific class attribute. Classes are defined with a . (dot).

HTML:

<p class=”intro”>Welcome to CSS!</p>

CSS:

.intro {

    font-weight: bold;

}

ID Selector

Selects an element with a specific id attribute. IDs are defined with a # (hash).

HTML:

<p id=”main-paragraph”>This is the main paragraph.</p>

CSS:

#main-paragraph {

    font-size: 20px;

}

Universal Selector

Selects all elements.

* {

    margin: 0;

    padding: 0;

}

Grouping Selectors

Apply the same style to multiple selectors.

h1, h2, h3 {

    color: navy;

}

Descendant Selector

Selects elements nested within others.

ul li {

    list-style-type: square;

}

Quiz Question

Q2: How do you select an element with the class name highlight?

A. highlight {}
B. .highlight {}
C. #highlight {}
D. *highlight {}

Answer: B. .highlight {}

Colors and Backgrounds

Setting Text Color

Use the color property.

p {

    color: teal;

}

Background Color

Use the background-color property.

body {

    background-color: lightgray;

}

Color Values

  • Named Colors: red, blue, green
  • Hexadecimal: #FF0000, #00FF00
  • RGB: rgb(255, 0, 0)
  • RGBA (includes alpha for opacity): rgba(255, 0, 0, 0.5)

Example:

div {

    background-color: rgba(0, 0, 255, 0.1);

}

Background Images

Use the background-image property.

body {

    background-image: url(‘background.jpg’);

    background-repeat: no-repeat;

    background-size: cover;

}

Quiz Question

Q3: Which CSS property is used to change the text color of an element?

A. font-color
B. text-color
C. color
D. text-style

Answer: C. color

Fonts and Text Styling

Font Family

Specify the font using font-family.

p {

    font-family: Arial, sans-serif;

}

Font Size

Set the size using font-size.

h1 {

    font-size: 36px;

}

Font Weight

Set the thickness using font-weight.

strong {

    font-weight: bold;

}

Text Alignment

Align text using text-align.

p {

    text-align: justify;

}

Text Decoration

Add decorations like underlines using text-decoration.

a {

    text-decoration: none;

}

Line Height

Control the space between lines with line-height.

p {

    line-height: 1.5;

}

Quiz Question

Q4: How do you make the text bold in CSS?

A. font-style: bold;
B. font-weight: bold;
C. text-decoration: bold;
D. text-weight: bold;

Answer: B. font-weight: bold;

The Box Model

The CSS box model is a box that wraps around every HTML element, consisting of margins, borders, padding, and the content itself.

Components of the Box Model

  1. Content: The actual content (text, images, etc.).
  2. Padding: Clears an area around the content (inside the border).
  3. Border: A border that goes around the padding and content.
  4. Margin: Clears an area outside the border.

Visual Representation

+—————————+

|        Margin             |

|  +———————+  |

|  |      Border         |  |

|  |  +—————+  |  |

|  |  |   Padding     |  |  |

|  |  | +———–+ |  |  |

|  |  | |  Content  | |  |  |

|  |  | +———–+ |  |  |

|  |  +—————+  |  |

|  +———————+  |

+—————————+

Setting Padding, Border, and Margin

div {

    padding: 20px;

    border: 2px solid black;

    margin: 10px;

}

Box Sizing

Control box sizing using box-sizing.

  • content-box (default): Width and height include content only.
  • border-box: Width and height include content, padding, and border.

div {

    box-sizing: border-box;

}

Quiz Question

Q5: Which CSS property adds space inside the border and around the content?

A. margin
B. padding
C. border
D. spacing

Answer: B. padding

Layout and Positioning

CSS provides properties to control the layout and positioning of elements.

Display Property

Defines how an element is displayed.

  • block: Starts on a new line and takes up full width.
  • inline: Flows inline with text.
  • inline-block: Like inline, but allows setting width and height.
  • none: Hides the element.

span {

    display: inline-block;

    width: 100px;

}

Position Property

Specifies how an element is positioned in the document.

  • static: Default position.
  • relative: Positioned relative to its normal position.
  • absolute: Positioned relative to its first positioned ancestor.
  • fixed: Positioned relative to the viewport.
  • sticky: Toggles between relative and fixed.

div {

    position: absolute;

    top: 50px;

    left: 100px;

}

Flexbox

A layout model that allows responsive alignment of elements.

.container {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

}

Grid

A two-dimensional layout system.

.grid-container {

    display: grid;

    grid-template-columns: 1fr 2fr;

    grid-gap: 10px;

}

Float

Used to wrap text around images.

img {

    float: left;

    margin: 10px;

}

Clear

Clears floated elements.

.clearfix::after {

    content: “”;

    clear: both;

    display: table;

}

Quiz Question

Q6: Which CSS property is used to change the position of an element?

A. position
B. display
C. float
D. align

Answer: A. position

Responsive Design

Responsive design ensures that web pages look good on all devices.

Media Queries

Used to apply styles based on device characteristics.

@media (max-width: 600px) {

    body {

        background-color: lightblue;

    }

}

Viewport Meta Tag

Ensures proper rendering on mobile devices.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Responsive Units

  • Percentages: %
  • Viewport Width: vw
  • Viewport Height: vh
  • Relative Units: em, rem

Example:

.container {

    width: 80%;

}

h1 {

    font-size: 3vw;

}

Flexbox and Grid for Responsive Layouts

Utilize flex and grid properties to create flexible layouts.

Example using Flexbox:

.navbar {

    display: flex;

    flex-wrap: wrap;

}

Quiz Question

Q7: What is the purpose of the viewport meta tag in responsive design?

A. To include external stylesheets
B. To control the page’s dimensions and scaling
C. To link JavaScript files
D. To specify the page title

Answer: B. To control the page’s dimensions and scaling

Conclusion

Congratulations! You’ve covered the basics of CSS, including syntax, selectors, colors, fonts, the box model, layout techniques, and responsive design. Practice by creating your own stylesheets and experimenting with different properties to reinforce your learning.

Final Quiz

Q8: Which CSS property controls the text size?

A. text-style
B. font-style
C. font-size
D. text-size

Answer: C. font-size

Q9: How do you select all <p> elements inside a <div> element?

A. div.p
B. div + p
C. div p
D. div > p

Answer: C. div p

Q10: Which property is used to change the background color?

A. color
B. bgcolor
C. background-color
D. background

Answer: C. background-color