What is CSS?

CSS stands for “Cascading Style Sheets”

CSS saves a lot of work and time. You can control the layout of multiple web pages simultaneously.

Cascading Style Sheets (CSS) are used to format the layout of web pages.

CSS allows you to control things like colors, fonts, text size, spacing between elements, placement and placement of elements, what background image or color to use, and how it looks differently on different devices and screen sizes.

How to use CSS?

CSS can be added to HTML documents in THREE ways:

Inline – by using the style attribute inside HTML elements

Internal – by using a <style> element in the <head> section

External – by using a <link> element to link to an external CSS file

The most common way to add CSS is to keep your styles in an external CSS file. However, we’ll use inline and internal styles because they’re easy to demonstrate and you can try them yourself.

Inline CSS

Inline CSS is used to apply unique styles to a single HTML element.

Inline CSS uses the style attribute of HTML elements.

The following example sets the text color of the element to green and red text.

<h1 style=”color:blue;”>A Blue Heading</h1>

<h2 style=”color:green;”>A Green Heading</h2>

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue background, and the text color of ALL the <h1> elements to whitesmoke. In addition, the page will be displayed with a cornsilk background color:

<!DOCTYPE html>
<html>
<head>
<style>
        body 
        {
            background-color: whitesmoke;
        }
        h1
        {
            background-color: blue;
            color: whitesmoke;
        }

</style>
</head>
<body>

<h1>ITSOLZONE</h1>

</body>
</html>

External CSS

External style sheets are used to define styles for many HTML pages.

To use an external style sheet, add a link in the section of each HTML page.

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>ITSOLZONE</h1>


</body>
</html>

External style sheets can be written in any text editor. The file cannot contain HTML code and must be saved with a .css extension.

The styles.css file looks like this:

        body 
        {
            background-color: whitesmoke;
        }
        h1
        {
            background-color: blue;
            color: whitesmoke;
        }

Some Most Common and useful CSS properties listed below:

Background
Border
Display
Float
Font
Line Height
Margin
Opacity
Overflow
Padding
Position
Vertical Align
White Space
Width
Word Wrap
Outline
Visibility
Counter

Spread the love