Skip to main content

Introduction to CSS,Typography

Image
By Prathima

 

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

What Is SCADA System

By Prathima
SCADA                 Supervisory Control and Data Acquisition or SCADA is an automation control system used in industries such as energy, oil and gas, water power and many more.         The system has a centralized system that monitors and controls the entire country from industrial plants to plant premises.             The SCADA system works by working with signals that communicate through channels to provide the user with remote control of any device in a system.        There are some essential parts composed of highly controllers and monitoring Systems. 1. SCADA system human machine interface or HMI supervisory system remote terminal units 2. RTu  use programmable logic controllers or PLC and communication infrastructure. HMI processes the data and sends it to the human operator. Where they can monitor or control the system.          The supervi...
Post a Comment
Read more

Plc (Programmable Logic Controller) Communication/PLC communication protocols/Ethernet/IP

By Prathima
Plc (Programmable Logic Controller) Communication/PLC communication protocols. A program consists of 1 or more instructions that accomplish a task. Before writing the program in plc you'd wish to attach the module with PLC software by using communication port like RS232,Serial Communication,Modbus or Ethernet supported your application. you'd wish to offer the connection to all or any or any your input and out devices, Then you've to write down down the program in plc.. Ladder Logic is that the normal programming language . There are four basic steps within the operation of all PLCs; Input Scan, Program Scan, Output Scan, and Housekeeping. These steps continually happen during a repeating loop.        The communication protocol acts as an agreement between two or more communicating Devices. Extension modules PLC I/O number are often increased through certain additional modules by system extension through a extension lines. In PLC Each module can con...
Post a Comment
Read more