WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML Styles - CSS


CSS = Styles and Colors

Manipulate Text
Colors,  Boxes


Styling HTML with CSS

CSS full form of Cascading Style Sheets

We can Style HTML Page by adding to HTML elements in 3 ways:

  • Inline - In this method style attribute in HTML elements
  • Internal - In this method <style> element in the HTML <head> section
  • External - In this method one or more external CSS files such as .CSS extension

In this chapter we learn simple method of Inline CSS


Inline Styling (Inline CSS)

Inline styling is used only unique style to a single HTML element:

Inline styling uses the style attribute.

example text color of the <h1> element to green:

Example

<h1 style="color:green;">This is a green Heading</h1>
Try it Yourself »

Internal Styling (Internal CSS)

It is a use style for one HTML page.

Internal styling can be use in the <head> section of an HTML page, within a <style> element:

Example

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

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

</body>
</html>
Try it Yourself »

External Styling (External CSS)

It is a use the style for many pages.

you can use external style sheet, add a link to it in the <head> section of the HTML page:

Example

<!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>
Try it Yourself »

The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the "styles.css" looks:

body {
    background-color: lightgrey;
}

h1 {
    color: red;
}

p {
    color:green;
}

CSS Fonts

CSS color property describe text color to be used for the HTML element.

CSS font-family property describe font to be used for the HTML element.

CSS font-size property describe text size to be used for the HTML element.

Example

<!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>
Try it Yourself »

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:

Example

p {
    border: 1px solid green;
}
Try it Yourself »

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

Example

p {
    border: 1px solid black;
    padding: 10px;
}
Try it Yourself »

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

Example

p {
    border: 1px solid black;
    padding: 10px;
    margin: 30px;
}
Try it Yourself »

The id Attribute

Next step,we learn about id attribute

id attribution is style for one element.:

<p id="p01">Never be the same</p>

eg. style for elements with id

Example

#p01 {
    color: green;
}
Try it Yourself »

The class Attribute

style for class of element we can add class attribute:

<p class="error">Never be the same</p>

we can use different style for elements :

Example

p.error {
    color: green;
}
Try it Yourself »

Chapter Summary

  • Use the HTML style attribute for inline styling
  • Use the HTML <style> element to define internal CSS
  • Use the HTML <link> element to refer to an external CSS file
  • Use the HTML <head> element to store <style> and <link> elements
  • Use the CSS color property for text colors
  • Use the CSS font-family property for text fonts
  • Use the CSS font-size property for text sizes
  • Use the CSS border property for visible element borders
  • Use the CSS padding property for space inside the border
  • Use the CSS margin property for space outside the border


HTML Style Tags

Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource