HTML CSS

HTML CSS


Styling HTML with CSS CSS stands for Cascading Style Sheets Styling can be added to HTML elements in 3 ways: Inline - using a style attribute in HTML elements Internal - using a <style> element in the HTML <head> section External - using one or more external CSS files The most common way to add styling, is to keep the styles in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.

CSS Syntax

CSS styling has the following syntax:
element { property:value; property:value }

Inline Styling (Inline CSS) Inline styling is useful for applying a unique style to a single HTML element: Inline styling uses the style attribute. This inline styling changes the text color of a single heading


<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue">This is a Blue Heading</h1>

</body>
</html>

Output:
This is a Blue Heading

Internal Styling (Internal CSS) An internal style sheet can be used to define a common style for all HTML elements on a page. Internal styling is defined in the <head> section of an HTML page, using a <style> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

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

</body>
</html>

Output;
This is a heading

This is a paragraph.

External Styling (External CSS) External style sheet are ideal when the style is applied to many pages. With external style sheets, you can change the look of an entire web site by changing one file. External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page:

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

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

</body>
</html>
Output:
This is a heading

This is a paragraph.

CSS Fonts The CSS color property defines the text color to be used for the HTML element. The CSS font-family property defines the font to be used for the HTML element. The CSS font-size property defines the text size to be used for the HTML element.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color:blue;
    font-family:verdana;
    font-size:300%;

}
p  {
    color:red;
    font-family:courier;
    font-size:160%;
}
</style>
</head>
<body>

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

</body>
</html>

Output:
This is a heading

This is a paragraph.

The CSS Box Model Every HTML element has a box around it, even if you cannot see it. The CSS border property defines a visible border around an HTML element:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border:1px solid grey;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

Output:
This is a heading

This is a paragraph.

This is a paragraph.

This is a paragraph.

The CSS padding property defines a padding (space) inside the border:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border:1px solid grey;
    padding:10px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>


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

</body>
</html>

Output:
This is a heading

This is a paragraph.

This is a paragraph.

This is a paragraph.

The CSS margin property defines a margin (space) outside the border:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border:1px solid grey;
    padding:10px;
    margin:30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

The id Attribute All the examples above use CSS to style HTML elements in a general way. To define a special style for one special element, first add an id attribute to the element:

 <p id="p01">I am different</p> 

then define a different style for the (identified) element:

<!DOCTYPE html>
<html>
<head>
<style>
p#p01 {
    color: blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>

Output:
This is a paragraph.

This is a paragraph.

This is a paragraph.

I am different.

The class Attribute To define a style for a special type (class) of elements, add a class attribute to the element: Example

<p class="error">I am different</p>

ow you can define a different style for all elements with the specified class:

<!DOCTYPE html>
<html>
<head>
<style>
p.error {
    color:red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

</body>
</html>

Output:
This is a paragraph.

This is a paragraph.

I am different.

This is a paragraph.

I am different too.