gray-laptop-computer-showing-html-codes-in-shallow-focus-160107

WHAT IS CSS? CASCADING STYLE SHEETS

What is CSS? In this tutorial, I will discuss with you basic about CSS (cascading style sheet). Before you learn about CSS, you should know about basic of HTML.We recommend that you to follow our HTML Basic tutorial first.

The Breakdown

All web pages can be broken down into many content areas.

These areas can be updated by changing the code on each page or by using the Cascading Style Sheets.

css-27192_1280

Advantages of style sheets

  • Save times
  • Keep consistency
  • Easy to change
  • Give you more control over layout
  • Use styles with JavaScript -> DHTML
  • Make it easy to create a common format for all the web pages.

Applying a single style sheet to multiple file.

css _chart1

Basic structure of a style

  • A property
  • A colon
  • A value
  • A semicolon to separate two or more values
  • Can include one or more values.

Three types of styles

  1. Inline styles
  2. Embedded styles (internal style),
  3. External styles sheet

We can use the Editor Tool for better and easy editing.We can see different type of HTML Editors in the market.You can use one of them like Visual Studio Code for you editing.

Inline styles

Add styles to each tag within the HTML document.

Use it when you want to format only one part of a web page.

<h1 style=“color:red; font-family:sans-sarif;”>My Heading 1</h1> 
<html>
<head>
<title> INLINE CSS EXAMPLE</title>
</head>
<body>
<h1 style=“color:red; font-family:sans-sarif;”>My Heading 1</h1>
</body>
</html>

Embedded styles

Embedded or Internal styles.

A styles is applied to the entire HTML document

Use it when you need to modify all instances of particular element (Eg: h1) in a web page.

<style type=“text/css”>h1 { color:red; font-family:sans-serif } </style>
<html>
<head>
<title> INTERNAL CSS EXAMPLE</title>
<style type=“text/css”>h1 { color:red; font-family:sans-serif } </style>
</head>
<body>
<h1>My Heading 1</h1>
</body>
</html>

External style sheet

An external style sheet is a text document containing the style definition.

Use it when you want to control the style for an entire website.

h1,h2,h3,h4,h5,h6{ color:green; font-family:sans-serif }

Save this file and .css file in the same web server directory.

Linking style sheets to HTML

Open an HTML document.

In between,

<head> and </head> tags add <link href=URL rel=“relation-type” type=“linl-type”/>

  • URL is the .css file
  • Relation-type = “stylesheets”
  • Link-type = “text/css”

Save this file and the .css file in the same web server directory.

mysyles.css
h1 { color:red; font-family:Calibri(body); }
body { background-color:#EFggFF; }
header.html
<html>
<head>
<title> EXTERNAL CSS EXAMPLE</title>
<link-href=“mystyles.css” rel=“stylesheet” type=“text/css” />
</head>
<body>
<h1>My Heading 1</h1>
</body>
</html>

Classes

You can mark a group of elements with a common identifier using the class attribute

<element class = “class”> ……….. </element>

Applying a style to a class

<ul>
<li class=“phone”>Apple</li>
<li class=“car”>BMW</li>
<li class=“phone”>Samsung</li>
<li class=“car”>Audi</li>
<li class=“phone”>Huawei</li>
<li class=“car”>Benz</li>
</ul>
.phone { color:white }
.car { color:black }
  • Apple
  • BMW
  • Samsung
  • Audi
  • Huawei
  • Benz

Summary

In this tutorial we learned basic of CSS.So If you have any queries related to this article please leave your comment in the comment section below.

SHARE THIS:

Leave a Comment

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

Translate »
error: Content is protected !!
Open chat