CSS

CSS is the Cascading Style Sheets. This file extension is {.CSS}. Cascading style sheets are a very powerful tool for the web site development.  CSS script is a used for style of web page. CSS is dependent of HTML and can be used with any XML-based markup language. CSS is supported by all browsers. CSS is used for design formatting structured content.

<h1 style=”color:blue; text-transfoorm:uppercase;”>I am a web developer<⁄h1>

Cascading Style Sheets defined two roles a selector and or more declarations. CSS declaration always ends with a semicolon, and declaration groups are enclosed within curly brackets to separate them from selectors.

Selector: selector is a HTML tag. Example

selector is a HTML tag. Example <h1>…..………. </h2>, <body>……………</body>

Declaration: The property is the style attribute you want to change and has a value. For examples, h1 {color:red; font-size:12px;}.

Semicolon: As you can see from the image above, each declaration must be followed by a semicolon. The semicolon is the end of the declaration.

Example :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charser = "utf">

<title> CSS Tutorial</title>

<style type ="text/css">

h1, h2

{

color:red;

font-size:30px;

font-family: calibri, sans-serif;

}

</style>

</head>

<body>

<h1>Cascading Style Sheets</h1>

<h2>

CSS is the Cascading Style Sheets. This file extension is {.CSS}. Cascading style sheets are a very powerful tool for the web site development.  CSS script is a used for style of web page. CSS is dependent of HTML and can be used with any XML-based markup language. CSS is supported by all browsers. CSS is used for design formatting structured content.

<h1 style=”color:blue; text-transfoorm:uppercase;”>I am a web developer<⁄h1>

Cascading Style Sheets defined two roles a selector and or more declarations. CSS declaration always ends with a semicolon, and declaration groups are enclosed within curly brackets to separate them from selectors.

Selector: selector is a HTML tag. Example <h1>…..………. </h2>, <body>……………</body>

Declaration: The property is the style attribute you want to change and has a value. For examples, h1 {color:red; font-size:12px;}.

</h2>

</body>

</html>

You can define CSS rules in a file that’s completely separate from your HTML document. You can link to this file by including a link element in the head of any HTML document on which you want to implement those styles.

Example of external:

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

<head>
<meta charset="utf-8">
<meta name="CSS" content="width=device-width; initial-scale=2.0">
<title>What is CSS how to design website with CSS</title>
<meta name="description" content=" What is CSS how to design website with CSS." />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<link rel="stylesheet" type="text/css" href="../css/responsive.css" media="only screen and (max-width : 600px)" />
</head>

After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look.

Index.html

  1. <!DOCTYPE>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title> what is CSS how to design with CSS</title>
  6. <link rel="stylesheet" type="text/css" href="style.css">
  7. </head>
  8. <body>
  9. CSS is the Cascading Style Sheets. This file extension is {.CSS}. Cascading style sheets are a very powerful tool for the web site development. CSS script is a used for style of web page. CSS is dependent of HTML and can be used with any XML-based markup language. CSS is supported by all browsers. CSS is used for design formatting structured content.
  10. </body>
  11. </html>
  • Line number 1 is a document type.
  • Line number 2 is a document language tag. This document language is English”en”
  • Line number 3 is a start is a html tag.
  • Line number 4 is a meta charset tag. Hear meta charset is “utf-8”.
  • Line number 5 is a title tag. This page title is “what is CSS how to design with CSS”.
  • Line number 6 is a link tag. This tag call style.css file.
  • Line number 7 is a close html tag
  • Line number 8 start body tag
  • Line number 9 is a body writing of webpage.
  • Line number 10 is a close body tag.
  • Line number 11 is a close html tag.

style.css

  1. /* css Document */
  2. body{
    1. background:#3ea50c;
    2. border-top:5px solid #e75967;
    3. font-family:'Lato',sans-scrif;
    4. color: #000000;
    5. font-weight:600;
    6. text-align:left;
  3. }
  • Line number 1 is a document type of the document.
  • Line number 2 is a body tag of html document.
  • Line number 2-a is a define of background color of html document.
  • Line number 2-b is a border top of the html document.
  • Line number 2-c is a define font of html document.
  • Line number 2-d is a define font color.
  • Line number 2-e is a define font weight.
  • Line number 2-f is a working text align of html document
  • Line number 3 is a close body tag of css file.