Cascading Style Sheet Language CSS3

A Basic Introduction

Cascading Style Sheet language CSS3 is a companion language to HTML5. While HTML controls the content of a webpage, an externally linked CSS file controls how the content is displayed.

CSS3 is the latest version of CSS. It is used in companion with HTML5.

Change Background with Cascading Style Sheet Language CSS3

To change the background color of a <body> tag, for example,  the code is:

body { background: blue; }

 

CSS files are typically saved with a name like “styles.css“.

Connect Cascading Style Sheet Language CSS3 to HTML5

 

In order for stylings to be seen on a page, the CSS file must be meta-linked to the HTML file to apply the stylings. The code to link the file should be placed in inside the <head> tags.


<!DOCTYPE html>
<html lang="en">

<head>

<title>Page Title</title>

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

</head>

<body>

</body>
</html>

 

The above code example creates a meta-link. The href attribute must point to the correct name and path of the CSS file. It is common practice to keep CSS files in a folder named “css“.

One of the key features of CSS3 is that only one file is needed per web application. Once you link that style sheet to all the desired HTML pages, then all those pages will be changed according to the CSS3 commands.

Change Text Color with Cascading Style Sheet Language CSS3

Another simple command is changing the text color of the body.


body {
background: blue;
color: green;
}

 

Sufficient practice with CSS3 commands will allow any designer take control of how content is displayed.

Leave a Reply

Your email address will not be published. Required fields are marked *