CSS Tutorial: Introduction for Beginners

css tutorial introduction

Cascading Style Sheets (CSS) is a simple design language. it handles the design part of a web page(web layout, variation in the display for different screen size) It’s easy to learn. In this tutorial, you’ll learn the basic concept of CSS. (CSS Tutorial Introduction)

What is HTML?

HTML (HyperText Markup Language) is developed by Tim Berners-Lee. An HTML document which can be displayed through a web browser is called a web page. HTML is not a computer language it’s a markup language.

For more information: HTML Tutorial : Introduction for beginners (Basic)

External Style Sheet

index.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

</body>
</html>

stylesheet.css

selector { 
    property: value;
    property: value;
    .....
}

body {
  background-color: black;
}

Internal Style Sheet

<html>
<head>

<style>
body {
  background-color: black;
}
</style>

</head>
<body>
</body>
</html>

Internal Style

<html>
<head> </head>
<body style="background-color: white;">
  <element style="property: value; property: value;">

  <h1 style="color:blue;background-color: white;">Hello World!</h1>
</body>
</html>

Cascading Order

  1. Inline style.
  2. External and internal style sheets.
  3. Browser default.

Comments

/* Single line Comment */

Selector

The element Selector

index.html

<html>
<head>

<style>
p {
  font-size: 14px;
}
</style>

</head>
<body>
<p> CSS </p>
<p> Cascading Style Sheets </p>
</body>
</html>

Output

CSS

Cascading Style Sheets

The .class Selector

index.html

<html>
<head>
<style>
p {
  font-size: 14px;
}

.main {
  color: red;
}
</style>

</head>
<body>
<p class="main"> CSS </p>
<p> Cascading Style Sheets </p>
</body>
</html>

Output

CSS

Cascading Style Sheets

The .class Selector (more)

index.html

<html>
<head>


<style>
p {
  font-size: 14px;
}

p.main {
  color: red;
}

h1.main {
  color: blue;
}
</style>

</head>
<body>
<h2 class="main"> Hello </h2>
<p class="main"> CSS </p>
<p> Cascading Style Sheets </p>
</body>
</html>

Output

Hello

CSS

Cascading Style Sheets

The #id Selector

index.html

<html>
<head>

<style>
p {
  font-size: 14px;
}

.main {
  color: red;
}

#main {
  color: blue;
}
</style>

</head>
<body>
<p class="main"> CSS </p>
<p id="main"> Cascading Style Sheets </p>
</body>
</html>

Output

CSS

Cascading Style Sheets

The Group Selector

index.html

<html>
<head>

<style>
p, h1 {
  font-size: 14px;
}
</style>

</head>
<body>
<h2> Hello </h2>
<p> CSS </p>
<p> Cascading Style Sheets </p>
</body>
</html>

Output

Hello

CSS

Cascading Style Sheets

Backgrounds

index.html – Background image and Color

<html>
<head>

<style>
body {
  background-image: url("image.png");
}

p, h1 {
  background-color: #1abc9c;
}
</style>

</head>
<body>
<h2> Hello </h2>
<p> CSS </p>
<p> Cascading Style Sheets </p>
</body>
</html>

index.html – Background image (background-repeat)

<html>
<head>

<style>
body {
  background-image: url("image.png");
  background-repeat: repeat-y;
}
</style>

</head>
<body>
<h2> Hello </h2>
<p> CSS </p>
<p> Cascading Style Sheets </p>
</body>
</html>

index.html – Background image (background-attachment)

<html>
<head>

<style>
body {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}
</style>

</head>
<body>
<h2> Hello </h2>
<p> CSS </p>
<p> Cascading Style Sheets </p>
</body>
</html>

Text

index.html (Text Color)

<html>
<head>

<style>

h2 {
  color: #1abc9c;
}

</style>

</head>
<body>
<h2> Hello </h2>
<p> CSS </p>
<p> Cascading Style Sheets </p>
</body>
</html>

Output

Hello

CSS

Cascading Style Sheets

index.html ( text-align )

<html>
<head>

<style>

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

</style>

</head>
<body>
<h2 class="left"> Hello </h2>
<h2 class="center"> CSS </h2>
<h2  class="right"> Cascading Style Sheets </h2>
</body>
</html>

Output

Cascading

Style

Sheets

index.html ( text-decoration )

<html>
<head>

<style>

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: underline;
}

h3 {
  text-decoration: line-through;
}

</style>

</head>
<body>
<h2> overline </h2>
<h3> underline </h3>
<h4> line-through </h4>
</body>
</html>

Output

overline

underline

line-through

index.html (direction)

<html>
<head>

<style>

p {
  direction : rtl;
}
</style>

</head>
<body>
<p>Cascading Style Sheets (CSS) is a simple design language. it handles the design part of a web page(web layout, variation in the display for different screen size) It's easy to learn. In this tutorial, you'll learn the basic concept of CSS.</p>
</body>
</html>

Output

Cascading Style Sheets (CSS) is a simple design language. it handles the design part of a web page(web layout, variation in the display for different screen size) It’s easy to learn. In this tutorial, you’ll learn the basic concept of CSS.

index.html ( text-transform )

<html>
<head> </head>
<body>
<p style="text-transform: uppercase;"> Cascading Style Sheets (CSS) </p>
<p style="text-transform: lowercase;"> Cascading Style Sheets (CSS) </p>
<p style="text-transform: capitalize;"> cascading style sheets (css) </p>
</body>
</html>

Output

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)

cascading style sheets (css)

Margins

index.html

<html>
<head>
<style>
.marcss {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 100px;
  margin-left: 100px;
}

.marcolor {
   background-color: #f1c40f;
}
</style>
</head>

<body>
<p class="marcolor"> CSS </p>
<br>
<p class="marcolor marcss"> CSS </p>
</body>

</html>

Output

CSS


CSS


CSS

Padding

index.html

<html>
<head>
<style>
.marcss {
  padding-top: 100px;
  padding-bottom: 100px;
  padding-right: 100px;
  padding-left: 100px;
}

.marcolor {
   background-color: #f1c40f;
}
</style>
</head>

<body>
<p class="marcolor"> CSS </p>
<br>
<p class="marcolor marcss"> CSS </p>
<br>
<p class="marcolor"> CSS </p>
</body>
</html>

Output

CSS


CSS


CSS


Sources : 
https://pixabay.com/ (images)
ICT Books (Details)

What is PHP?

PHP: Hypertext Preprocessor is a general purpose server side script language. it designed for web development. It designed by Rasmus Lerdorf in 1994 and first released in 1995. PHP is free to download and use. It can contain text, HTML, JavaScript, CSS and PHP code. it runs on Windows, Linux, Mac OS and etc… PHP can do many things such as generate dynamic web pages, manage data in your database, control user access, etc… PHP 7 is much faster than the previous versions. In this tutorial. You will learn to install and run PHP on Windows pc.

For more information
PHP 7 Tutorial: Introduction for Beginners (Basic)
PHP7 Tutorial | Part 2 – GET, POST and Cookies
PHP7 Tutorial | Part 3 – MySQL and PHP

Hello Guys,

Hope this post (CSS Tutorial: Introduction) will help you to learn something, If you enjoy my work then please share my posts with your friends and anyone who might be interested in web designing and don’t forget to subscribe my mailing list.

If you had any problem with this post, please do mention it in the comment section.

Like ctechf Facebook fan page : https://www.facebook.com/ctechf

Also Read :

How to be a Programmer

Leave a Reply

25 Shares
Share
Tweet
Share
Pin
Share