PROGRAMMING LANGUAGES(HTML, C ,C++ ,JAVA,.NET,PHP,SQL etc): CSS

Showing posts with label CSS. Show all posts

Thursday, 26 June 2014

C.S.S. for Text

C.S.S. For Text

C.S.S. for text means how to design our text, what will be the color of text ,what will be the font , what will be the size of text.

Text color

The color property is used to set the color of the text.

It can be done as

body {
    color: blue;
          }

         h1 {
   color: #00ff00;
                }

The color can be specified by three ways

With CSS, a color is most often specified by:

a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)" here RGB means Red, Green, Blue

a color name - like "red"

Text Alignment

The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}

Text Decoration

The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
   a {
    text-decoration: none;
}

It can also be used to decorate text:-

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text.
It can be done as

p {
text-indent: 50px;
}

CSS Basics

The basic need of the CSS are:-

1.Previous knowledge of HTML.

2.A Web browser to view your your web page.

3.A text editor ex notepad which come with windows . Sublime , Web Matrix, Dreamweaver are also text editor they are recommended because they have some built in codes, suggestions which are used regularly by coders. .

HTML was never intended to contain tags for formatting a document basically it is used for writing the content and to make content attractive we use CSS.

HTML was intended to define the content of a document, like:

<h1>Heading of the page</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.It takes lot of time and energy to do that
to solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.

All browsers support CSS today.

How CSS Is Used

CSS is used in three ways which are:-

Inline CSS (styling is done in same line)
Internal CSS|(styling is done on the same page)
External CSS(styling is done in different page saved as .css extension)

We can use CSS only by three ways which are mentioned above.

Example of Inline CSS

this is an example of the Inline CSS.

Example of Internal CSS

To give you a proper understanding of Internal CSS I have to write the full HTML code .

<html>

<head>

<title>CSS Basics</title>

div{

font-weight:bold;

}

span{

font-style: italic;

}

</style>

</head>

<body>

<div>This will show the use of the Internal CSS</div>

this will show the use of <span>Internal CSS</span>

</body>

</html>

External CSS

To use external CSS we have to make a file in which all code of CSS is written there.

Then this file should be saved with extension of .css.

Then we have to give reference to our .css file it should be done as

<rel="stylesheet"type="text/css href="name of the .css file>

This is done to connect HTML page with CSS page without it styling that we have done in our page will not change anything on the HTML page.

Wednesday, 25 June 2014

HTML with CSS

Introduction to CSS

C.S.S. is Casacading Style Sheet. CSS is used to style our webpages .It gives design to our webpage as we like, the CSS is involved in the design phase of an website .CSS is used to design webpages .
It has HTML like syntax, the syntax which is used in CSS is like HTML hence the person who has knowledge of HTML can understand it easily.
CSS is very easy to understand and implement anybody can use CSS very easily . Basicaly CSS is used by the web designers to design the website.We can easily say that CSS is more like an art it depends on Imagination skills of the web designers to create a good web page design using CSS .Anybody can learn CSS but not anyone can make a good web page design. But there are lots of templates for the websites ,only thing you have to do is select a good template make changes as your needs and your website is ready to go. But to understand that template and make changes without
creating error in the code you have to learn CSS.
This is just introduction to CSS to make you understand why it is important to learn CSS.