Header Ads

ad728

CSS Tutorial



Cascading Style Sheets (CSS) is the core technologies for building Website web pages.CSS is a language for define how documents are display to users. The CSS files can help define the website color, font size, animation, layout and position of text and other HTML tags, CSS is elementary to web design.


Without CSS, your websites is a plain text on white backgrounds. if you want learn css you must first understand a little about HTML, CSS saves a lot of your time. CSS helps create a static look several pages of a Web site. It allows adapting the presentation to different types of devices, such as LCD Large Screen Laptop screens, Mobile screens. Cascading Style Sheets is also separate of HTML and can be used with any XML-based markup language.


The kinds of CSS is three external, internal, and inline, External styles sheet manage how things view across many pages on a website. Internal styles manage the look of just one page. Inline styles Manage just one element of a single page, below some are example.





CSS tutorial for beginners

<h1 style="color:red;">This is a red Heading Inline CSS Example</h1>

Internal CSS Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: red;}
h1   {color: red;}
p    {color: black;}
</style>
</head>
<body>

<h1> This is a red heading Internal CSS Example</h1>
<p> This is a red Heading Internal CSS Examplep>

</body>
</html>


EXTERNAL CSS EXAMPLE

<!DOCTYPE html>
<html>
<head>
  
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading External CSS Example
</h1>
<p>This is a paragraph External CSS Example
</p>

</body>
</html>

SEE BELOW STYLE SHEET LOOKS:


body {
  background-color
: red;
}
h1 
{
  color
: red;
}
{
  color
: black;
}

How to use fonts in css file.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: red;
  font-family: Arial;
  font-size: 14px;
}
p  {
  color: black;
  font-family: Arial;
  font-size: 16px;
}
</style>
</head>
<body>

<h1>This is a heading fonts</h1>
<p>This is a paragraph small fonts.</p>
</body>
</html>

HOW TO SET CSS MARGIN AND PADDING

{
  border: 1px solid black;
  padding: 35px;
}

{
  border: 1px solid black;
  margin: 40px;
}

HOW TO MAKE HYPERLINK IN CSS:


You can click on a hyperlink and jump to another website page.



<a href="#">link text</a>

How to change html link color blow are some css examples

<style>
a:link 
{
  color: red; 
  background-color
: #ccc; 
  text-decoration
: none;
}

a:visited 
{
  color: Black;
  background-color: #ccc;
  text-decoration: none;
}

a:hover 
{
  color: red;
  background-color: #ccc;
  text-decoration: underline;
}

a:active 
{
  color: Blue;
  background-color: transparent;
  text-decoration: underline;
}
</style>

HOW TO MAKE ID:


Below is some css example

<style>
#katutorial {
  background-color: red;
  color: black;
  padding: 35px;
  text-align: center;
} 
</style>

<h1 id="katutorial">My Header</h1>

What difference between class and ID?

<style>
/* There are some elements with ID "katutorial" */
#katutorial{
  background-color: red;
  color: black;
  padding: 35px;
  text-align: left;
}

/* there are some elements with class name "katutorial" */
.katutorial2{
  background-color: white;
  color: black;
  padding: 20px;
} 
</style>

<h1 id="katutorial">My Cities</h1>


<h3 class="katutorial2">London</h3>
<p>London is the capital of England.</p>

<h3 class="katutorial2">Paris</h3>
<p>Paris is the capital of France.</p>

<h3 class="katutorial2">Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>


No comments

Post Bottom Ad

ad728