CSS Introducing for How to make a website look attractive using CSS

CSS Introducing

My first article was talking about how to create simple website using html language. There I tried to give you an idea of how to build a website in a short time. But you may have noticed that there is something missing. It is Cascading Style Sheets.CSS experts use various methods and use beautiful styles to make their websites look attractive. Specially web designers in particular use this variety CSS in different methods to beauty their webpages. They also use CSS styles to create different navigations bars . Web designers use CSS  for develop prominent and attractive websites in coding world. The beauty of  website is one of main reasons why a website is popular with the online world.  This article teach you how to make a website look attractive using CSS basic methods.CSS is the language we use to style a web page. Do you use platforms like WordPress, GoDaddy,  to create a website for your business ? Your website have a look attractive may be a reason to increase your website traffic.

I hope to in this short guide, introduce CSS, demonstrate CSS syntax, explain how CSS works, show how to add CSS markup to an HTML document.CSS Introducing for  How to make a website look attractive using CSS

What is CSS?

CSS is the language that defines the presentation of a web page, It is used to add color, background images, and textures, and to arrange elements on the page.

How is CSS Different From HTML?

The first thing to understand when approaching the topic of CSS is when to use styling language like CSS and when to use a markup language such as HTML

  • All critical website content should be added to the website using a markup language such as HTML,
  • Presentation of the website content should be defined by a styling language such CSS

Blog posts, page headings. video. audio, and pictures that are not part of the web page presentation should all be added to the web page with HTML. Background images and colors. borders. font size. typography. and the position of items on a web page should all be defined by CSS It is important to make this distinction because tailing to use the right language make it difficult to make changes to the website in the future and create accessibility and usability issues tor website using a text-only browser or screen reader.

CSS Syntax

website look attractive using CSS
Introducing of CSS syntax




The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.

Example

In this example all<p> elements will be center-aligned, with a red text color:

p {

color: green;

text-align: center;

}

Example Explained

  • p is a selector in CSS(it points to the HTML element you want to style:<p>).
  • color is a property, and green is the property value
  • text-align is a property, and center is the property value

How to Add CSS

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.

There are three way to inserting a style sheet, but I used internal CSS method to my study. I think this is an easy and clear way to learn CSS for beginners as my knowledge.

Internal CSS

An internal style sheet may be used if one single page has a unique style.
The internal style is defined inside the <style> element, inside the head section

Example

Internal styles are defined within the <style>element, inside the <head> section of an HTML page:

<! DOCTYPE html>
<html>
<head>
<style>
body  {
    background-color: green;
}
h1  {
      color: red;
      margin-left: 40px;
}
</style>
</head>
<body>
<h1>this is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>


How to change background color of webpage?

The background color property specifies the background color of an element.

Example

The background color of a page is set like this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgreen;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>techeidemtips.blogspot.com</p>
<p>This page has a  green background color!</p>

</body>
</html>

Then you can see below page when you open with Google chrome.




You can use various color for your background color.


How to change your web page text color using CSS?

The color property is used to set the color of the text.
Text color of a page is set like this:

<html>
<head> 
<style> 
h1{
color: red; 
text-align: center;
} 
p{
color: green; 
text-align: center;
} 
</style>
</head> 
<body> 
<h1>This heading is red text</h1>
<p>techeidemtips.blogspot.com</p> 
<p>These paragraphs are styled with CSS.</p>
</body> 
</html> 

Then you can see below page when you open with Google chrome.

How to create table borders using CSS

To specify table borders in CSS , use the border property.

The example below specifies a black border for <table>, <th>, and <td> elements:

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}

table {
  width: 100%;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Let the borders collapse</h2>
<p>techeidemtips.blogspot.com</p>

<table>
 
  <tr>
    <td>Row 1 -column 1 </td>
 <td>Row 1 -column 2 </td>
 <td>Row 1 -column 3 </td>
   
  </tr>
  <tr>
    <td>Row 2 -column 1 </td>
 <td>Row 2 -column 2 </td>
 <td>Row 2 -column 3 </td>
 
  </tr>
</table>

</body>
</html>

Then you can see below table when you open with Google chrome.





I hope that this article will help to you take basic knowledge about CSS. Develop your knowledge and share it with society.


















Comments

Post a Comment

Hello guys, if you will resolve your tech problems using our blog posts, please comments for us. Think differently, doing new things and share it with world. Enjoy every moment of your life.

Popular posts from this blog

How you can free up space without resetting your pc?

Image
Lack of hard disk space in your pc can cause a lot problems for your as well as your desktop. You will not be able to download the required software's, files ,videos, on your computer because not enough storage your pc. If you are using a windows operation system and your computer doesn't have minimum  storage on your device to get new update provided , your computer will be slow , causing freezes and crashes. There are various reasons for the lack of space on hard drive. Downloading apps, software ,files, pictures and videos over period will cause for hard drive to runout of space. The major causes for hard drive completely full are various malware and virus. How to check  hard drive space you're using? When you are running slow, you don't need reset your pc. This article helps to you find out how much space you have been using easily  clear out files that you are longer need. yo can use various methods for how you can free up space your hard drive. Try and follow thes...
Read more

What can we do, when get a message as "your AdSense account close by Google"

Image
 what can we do, when get a message as "your AdSense account close by Google" I saw a dream , when i stared my tech blog . It is "I'll get succeed AdSense approval process with blogger free domain". I was able to  eligible for AdSense sign up process with free blog domain. But I failed AdSense approval process more than 10 times various reason .So I tried hard to publish quality post and fixed some technical errors my posts. Finally I won AdSense approval process before about week. But every thing is not ok. When I click earning tab I saw message below. I don't have a experience before what can I do . Because it was my first time to face it. If you will  see this message ,don't worry about that. Follow the steps below. First click on earning tab and go to AdSense home  page .Next click on "account colures" .Read it carefully. next go to your email and click on "our appeal process" Now you can see "google AdS...
Read more