Introduction to CSS

Cascading Style Sheets

What is CSS?

  • CSS (Cascading Style Sheets) is used to style and layout web pages.
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media

Basic CSS Syntax and Selectors

  • CSS syntax consists of a selector and a declaration block.
  • Selectors can be element selectors, class selectors, and ID selectors.

p {
    color: green;
}
.intro {
    font-size: 20px;
}
#main-heading {
    text-align: center;
}

CSS Text Styling

CSS properties to style text include font-family, font-size, font-weight, text-align, and text-decoration.

CSS Text Styling Example


p {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-align: justify;
    text-decoration: underline;
}

Basic CSS Properties Cheat Sheet

Goal: Introduce basic properties and demonstrate how they impact different elements.

Font and Text Styling Properties:

  • color – Sets the text color.
  • font-size – Adjusts the text size.
  • font-family – Sets the font.
  • text-align – Aligns text (e.g., center, left, right).

h1 {
    color: teal;
    font-size: 2em;
    text-align: center;
}
p {
    font-family: Georgia, serif;
    line-height: 1.5;
    color: gray;
}

Inline CSS

Apply quick styles directly within HTML tags to see how CSS affects the elements instantly.

Inline CSS Example:


<h1 style="color: navy; text-align: center;">Your Name</h1>
<p style="color: gray; font-size: 16px;">A short bio paragraph about yourself.</p>

Here, we styled the <h1> and <p> tags by adding the style attribute directly to them.

Explanation:

  • color: navy; sets the text color.
  • text-align: center; centers the text.
  • font-size: 16px; adjusts the text size.

Pros & Cons of Inline CSS:

  • Pros: Quick to add, great for testing small changes.
  • Cons: Difficult to maintain on larger pages.

Internal CSS

Grouping Styles in the <head>

Apply CSS within the HTML <head> to style elements without repeating code.

Adding Internal CSS:

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            color: gray;
            font-size: 16px;
        }
    </style>
</head>

Explanation:

  • This CSS code is inside a <style> tag within the HTML <head>.
  • body selector applies a font to the entire page.
  • h1 styles all headings in dark blue and centers them.
  • p makes all paragraph text gray and slightly larger.

Advantages of Internal CSS:

  • Keeps styles together, making it easy to adjust page-wide styling.

External CSS - Organizing Styles in a Separate File

Goal: Move CSS into an external file to simplify and organize code for larger projects.

Create a styles.css file:

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
}
h1 {
    color: darkblue;
    text-align: center;
}
p {
    font-size: 1em;
    color: #555;
}
Link styles.css to HTML:

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

Explanation: External CSS is ideal for bigger projects since it keeps the HTML clean and easy to manage.

Exercise

Change the text color of the element with id="para1" to red.


<style>
# {
    : red;
}
</style>
<body>
    <h1>This is a heading</h1>
    <p id="para1">This is a paragraph</p>
</body>

Exercise

Goal: Link an external style sheet with the URL "mystyle.css" to the HTML document.


<head>
   
</head>

Exercise

Change the background color of the HTML document to red.


<style>
 {
    
}
</style>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
</body>

Exercise

Set the page's text to green using inline style.


<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
    <p>This is a paragraph</p>
</body>

Exercise

Goal: Correct the CSS code to set the color of paragraphs to blue.


<style>

</style>

Box Model Basics:

  • padding – Adds space inside the border.
  • margin – Adds space outside the element.
  • border – Adds a border around the element.

Box Model Example


div {
    margin: 20px;
    border: 2px solid #000;
    padding: 10px;
    width: 100px;
    height: 100px;
}
                    

div {
    box-sizing: border-box;
}

Display and Visibility

CSS properties display and visibility control the layout and visibility of elements.

Display and Visibility Example


div {
    display: block;
}
span {
    display: inline;
}
.hidden {
    display: none;
}
.visible {
    visibility: visible;
}
.invisible {
    visibility: hidden;
}

CSS Layout: Positioning

CSS positioning properties include static, relative, absolute, fixed, and sticky.

CSS Layout: Positioning Example


.relative {
    position: relative;
    top: 10px;
    left: 20px;
}
.absolute {
    position: absolute;
    top: 50px;
    left: 100px;
}
.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}
.sticky {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
}

Flexbox

Flexbox is a layout model that provides an easy and clean way to arrange items within a container.

Flexbox Example


<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
                    

.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.item {
    flex: 1;
    padding: 10px;
}

Grid

CSS Grid Layout is a two-dimensional layout system for the web

Grid Example


<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
</div>
                    

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.grid-item {
    background-color: #ddd;
    padding: 20px;
    text-align: center;
}

Thank You!

Any questions?

Thank You GIF
Next: Advanced HTML & CSS Back to Home