corecodeschool.blogspot.com: how to use css in your website CSS stands for Cascading Style Sheets.

Enter Keyword Hear for Search This Blog

Sunday, 2 October 2016

how to use css in your website CSS stands for Cascading Style Sheets.


1. What is CSS?

CSS stands for Cascading Style Sheets.

CSS is a stylesheet language used to design and style web pages. It controls how HTML elements appear in a browser.

Using CSS, you can change:

  • Text color and font size.

  • Background colors and images.

  • Width and height of elements.

  • Margins and padding.

  • Borders and shadows.

  • Page layouts and alignment.

  • Animations and transitions.

  • Responsive designs for mobile phones, tablets, and computers.

Example: HTML creates a button, while CSS makes the button colorful, attractive, and interactive.

2. Why Do We Use CSS?

Consider a simple HTML heading:

<h1>Welcome to My Website</h1>

Without CSS, the heading uses the browser's default styling.

With CSS, you can change its color, size, and alignment.

<!DOCTYPE html>
<html>
<head>
    <title>My First CSS Page</title>

    <style>
        h1 {
            color: blue;
            text-align: center;
            font-size: 36px;
        }
    </style>
</head>

<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

Output: The heading appears in blue, centered on the page, with a font size of 36 pixels.


3. Basic CSS Syntax

CSS consists of three main parts:

selector {
    property: value;
}

For example:

p {
    color: red;
    font-size: 20px;
}

Let's understand each part.

Component

Meaning

Example

Selector

Identifies the HTML element to style

p

Property

Specifies what you want to change

color

Value

Specifies the desired setting

red

Declaration

A property and its value

color: red;

Declaration block

All declarations inside { }

color: red; font-size: 20px;

Here, all paragraph (<p>) elements will have red text with a font size of 20 pixels.

Important CSS rules

  • Use { } to enclose declarations.

  • Use : between a property and its value.

  • Use ; to separate declarations.

  • CSS comments are written as /* comment */.


1 comment:

Featured post

Contact

Contact Core Code School Core Code School shares beginner-friendly tutorials on PHP, HTML, CSS, JavaScript, Java, SQL and Ubuntu. You can...