HTML Styles — CSS

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

What is CSS?

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces.

Using CSS

CSS can be added to HTML documents in 3 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 the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

Example

<!DOCTYPE html>
    <head>
        <title>This is my first webpage</title>
    </head>
    <body style="background-color:black">
        <!--inline-->

        <h1 style="color:white">This is my website</h1>

        <p style="color:white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt corporis suscipit cupiditate iusto! Accusamus facilis similique repudiandae voluptatibus maxime molestiae nam doloremque. Perspiciatis accusamus neque cum. Id quia illo natus.</p>
        <p style="color:white">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Autem natus magnam excepturi beatae, repellendus facilis architecto sunt laboriosam nisi a eum nostrum dolor nemo omnis dolores, nobis animi quia? Culpa?</p>
        <p style="color:white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati tempore aliquam vel magni fuga pariatur vitae iste! Fugit modi explicabo veritatis nihil laborum autem, distinctio similique sed ut laboriosam dignissimos?</p>

     </body>
</html>