Skip to main content

Introduction to CSS,Typography

Image
By

 

Introduction to CSS

What is CSS?

CSS (Cascading Style Sheets) is used to control the style and layout of web pages. It allows you to separate content (HTML) from presentation, enabling better design consistency and easier maintenance.

Why Use CSS?

  • Enhances the visual appearance of websites.
  • Makes websites responsive for different devices.
  • Reduces duplication by centralizing styles.
  • Enables consistent design across multiple pages.

Types of CSS

1.     Inline CSS

o    Applied directly to an HTML element using the style attribute.

o    Use When: You want to apply a unique style to a single element.
Example:

html

Code start here

<p style="color: red; font-size: 16px;">This is an inline-styled paragraph.</p>

2.     Internal CSS

o    Defined within a <style> tag in the <head> section of the HTML document.

o    Use When: You want to apply styles to a single HTML document.
Example:

html

Code start here

<html>

<head>

    <style>

        p {

            color: blue;

            font-size: 18px;

        }

    </style>

</head>

<body>

    <p>This is an internally styled paragraph.</p>

</body>

</html>

3.     External CSS

o    Written in a separate .css file and linked to the HTML document using the <link> tag.

o    Use When: You want to apply styles to multiple pages, ensuring consistency.
Example:

o    HTML:

html

Code start here

<html>

<head>

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

</head>

<body>

    <p>This is an externally styled paragraph.</p>

</body>

</html>

o    CSS (styles.css):

css

Code start here

p {

    color: green;

    font-size: 20px;

}

CSS Syntax

  • A CSS rule consists of a selector, property, and value.

css

Code start here

selector {

    property: value;

}

Example:

css

Code start here

h1 {

    color: orange;

    font-size: 24px;

}

CSS Selectors

  • Universal Selector (*): Applies to all elements.
  • Type Selector (h1, p): Applies to specific tags.
  • Class Selector (.class-name): Targets elements with a specific class.
  • ID Selector (#id-name): Targets a unique element with a specific ID.
  • Example:

css

Code start here

.highlight {

    background-color: yellow;

}

                                   Colors and Units

Colors in CSS

1.     Named Colors: Predefined names like red, blue, green.
Example:

css

Code start here

p {

    color: red;

}

2.     Hexadecimal Colors: Represented by #RRGGBB.
Example:

css

Code start here

p {

    color: #ff5733;

}

3.     RGB Colors: Use rgb(red, green, blue) values.
Example:

css

Code start here

p {

    color: rgb(255, 87, 51);

}

4.     HSL Colors: Use hsl(hue, saturation, lightness) values.
Example:

css

Code start here

p {

    color: hsl(20, 100%, 60%);

}

CSS Units

  • Pixels (px): Fixed unit for absolute size.
  • Percentages (%): Relative to the parent element.
  • Em: Relative to the font size of the parent element.
  • Rem: Relative to the font size of the root element.
  • Viewport Units (vw, vh): Based on the width and height of the viewport.

Example:

css

Code start here

p {

    font-size: 16px; /* Absolute */

    margin: 10%;    /* Relative */

    line-height: 1.5em; /* Relative to font size */

}

Background Properties

1.     Background Color: Sets the background color of an element.
Example:

css

Code start here

body {

    background-color: lightblue;

}

2.     Background Image: Sets an image as the background.
Example:

css

Code start here

body {

    background-image: url('background.jpg');

}

3.     Background Repeat: Controls whether the background repeats.
Example:

css

Code start here

body {

    background-repeat: no-repeat;

}

4.     Background Position: Defines the starting position of the background image.
Example:

css

Code start here

body {

    background-position: center;

}

Linking CSS to HTML

To link CSS to an HTML file, use the <link> tag for external CSS or the <style> tag for internal CSS.

Example: External CSS

  • HTML:

html

Code start here

<html>

<head>

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

</head>

<body>

    <h1>Welcome to CSS!</h1>

    <p>This text is styled using external CSS.</p>

</body>

</html>

  • CSS (style.css):

css

Code start here

body {

    background-color: #f0f0f0;

    font-family: Arial, sans-serif;

}

h1 {

    color: navy;

    text-align: center;

}

p {

    color: darkgray;

    font-size: 16px;

}

Text and Fonts in CSS

CSS provides powerful tools to style text and control how it appears on web pages. From setting font families to adjusting alignment and spacing, CSS ensures content is both readable and visually appealing.

 

Typography Basics

Typography involves designing and arranging text for readability, accessibility, and aesthetic appeal. The following properties are essential for controlling text styles:

  • Font Family: Defines the typeface of the text (e.g., Arial, Times New Roman).
  • Font Size: Sets the size of the text.
  • Font Weight: Determines the thickness of the font.
  • Font Style: Specifies whether the text is italic, normal, or oblique.
  • Line Height: Adjusts the vertical spacing between lines of text.
  • Letter Spacing: Modifies the space between individual letters.
  • Text Alignment: Positions the text within its container.

Font Properties in CSS

1. Font Family

Defines the font to be used for an element. It can include a list of fallback fonts in case the primary font isn't available.

Syntax:

css

Code start here

font-family: "font1", "font2", generic-family;

Example:

css

Code start here

p {

    font-family: "Arial", "Helvetica", sans-serif;

}

  • If Arial is unavailable, the browser will use Helvetica. If neither is available, it will default to a generic sans-serif font.

2. Font Size

Controls the size of the text. Values can be in various units such as px, %, em, or rem.

Example:

css

Code start here

h1 {

    font-size: 32px; /* Absolute size */

}

p {

    font-size: 1.2em; /* Relative to the parent element's font size */

}

3. Font Weight

Specifies how bold the text appears. Common values are normal, bold, and numbers (100 to 900).

Example:

css

Code start here

h1 {

    font-weight: bold;

}

p {

    font-weight: 300; /* Light font */

}

4. Font Style

Defines whether the text is italicized or normal.

Example:

css

Code start here

em {

    font-style: italic;

}

5. Shorthand for Font

Instead of writing multiple font-related properties, you can use a shorthand.

Syntax:

css

Code start here

font: font-style font-variant font-weight font-size/line-height font-family;

Example:

css

Code start here

p {

    font: italic small-caps bold 16px/1.5 "Arial", sans-serif;

}

Text Spacing and Alignment

1. Line Height

Defines the space between lines of text. Often set relative to the font size.

Example:

css

Code start here

p {

    line-height: 1.6; /* 1.6 times the font size */

}

2. Letter Spacing

Adjusts the spacing between individual letters.

Example:

css

Code start here

h1 {

    letter-spacing: 2px;

}

3. Text Alignment

Positions the text within its container. Possible values: left, right, center, and justify.

Example:

css

Code start here

p {

    text-align: justify;

}

Google Fonts Integration

Google Fonts is a free library of web fonts that can be used in your projects. It allows you to incorporate beautiful typography with minimal effort.

Steps to Use Google Fonts

1.     Visit Google Fonts
Go to https://fonts.google.com and select a font.

2.     Copy the Embed Link
Choose the desired style and copy the <link> tag or @import URL.

3.     Add the Link to Your HTML or CSS
Include the link in the <head> of your HTML file or import it in your CSS.

4.     Apply the Font Using CSS
Use the font-family property to apply the font.

Example:

  • HTML:

html

Code start here

<head>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

</head>

<body>

    <h1>Google Fonts Example</h1>

    <p>This text uses the Roboto font.</p>

</body>

  • CSS:

css

Code start here

h1 {

    font-family: "Roboto", sans-serif;

    font-weight: 700; /* Bold */

}

p {

    font-family: "Roboto", sans-serif;

    font-weight: 400; /* Normal */

}

Example Combining All Properties

html

Code start here

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>CSS Typography Example</title>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&display=swap" rel="stylesheet">

    <style>

        body {

            font-family: 'Roboto', sans-serif;

            line-height: 1.6;

            color: #333;

        }

 

        h1 {

            font-size: 36px;

            font-weight: 700;

            text-align: center;

            letter-spacing: 1px;

        }

 

        p {

            font-size: 16px;

            font-weight: 300;

            text-align: justify;

            margin: 10px 20px;

        }

 

        .highlight {

            font-style: italic;

            background-color: #f9f9f9;

            padding: 5px;

        }

    </style>

</head>

<body>

    <h1>Understanding Typography in CSS</h1>

    <p>Typography plays a critical role in web design. It enhances readability, accessibility, and the visual appeal of text. Here is an <span class="highlight">italicized example</span> for emphasis.</p>

</body>

</html>

When to Use Which Property

  • Use font-family to define the overall style of your website.
  • Use font-size and line-height to ensure readability.
  • Use text-align for layout and alignment within containers.
  • Integrate Google Fonts for modern and attractive typefaces without relying on system fonts.

Typography is crucial for creating user-friendly and aesthetically pleasing web pages.

 

Labels:

Comments

Post a Comment

If you have any Doubts plz let me know

Popular posts from this blog

User Registration Form: Purpose, Design, and Code Explanation

By
  Why Do We Need to Create Forms? Forms are essential in web development as they provide a way for users to interact with web applications by submitting data. They are used for various purposes, including: Collecting User Data : For registration, login, feedback, surveys, and more. Enabling Interactions : Allowing users to send information to the server. Dynamic Applications : Forms are key in creating dynamic web applications like e-commerce websites, social media platforms, etc. Improving User Experience : Forms enable tailored content and services by collecting user preferences or queries. Code Explanation HTML The HTML provides the structure of the form and its elements. Here's a detailed breakdown: html .. <div class="form-container"> A container that wraps the entire form, styled with CSS for layout and design. html .. <h1>Sign Up</h1> A heading that indicates the purpose of ...
Post a Comment
Read more

CSS Box Model

By
  CSS Box Model: Comprehensive Guide Overview The CSS Box Model is a foundational concept in web design that governs the layout and spacing of elements on a webpage. It treats every HTML element as a rectangular box, defining how its content, padding, border, and margin interact. Why Do We Need the CSS Box Model? 1.      Precise Layout Control : o     Allows developers to define the exact size and space of elements, including margins, borders, and padding. 2.      Consistency : o     Ensures uniform spacing and layout across different browsers and devices. 3.      Flexibility : o     Adjusts spacing and borders without changing the core content dimensions. Where Do We Need the CSS Box Model? 1.      Website Layout Design : o     Essential for spacing headers, footers, sidebars, and content sections. 2. ...
Post a Comment
Read more

CSS Units

By
CSS Units: Comprehensive Notes What Are CSS Units? CSS (Cascading Style Sheets) units are a way to define the size of elements, spacing, and positioning in a web page. These units provide flexibility to design responsive, visually appealing, and functional layouts. CSS units are used in defining properties such as width, height, margin, padding, font size, and more. Example 1: <style>   div {     width: 100px;     height: 50px;   } </style> <div>Box</div> Here, 100px and 50px define the width and height of the div . Example 2: <style>   p {     font-size: 16px;   } </style> <p>This is a paragraph.</p> The font size of the paragraph is set to 16 pixels using CSS units. Purpose of CSS Units CSS units help define scalable and fixed measurements for web elements, ensuring: Consistency in layout design. Adaptability to differ...
Post a Comment
Read more