WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML Styles - CSS


CSS = Styles and Colors

Manipulate Text
Colors,  Boxes


Styling HTML with CSS

CSS was started in HTML 4 and was introduced for better rendering of HTML elements.

CSS can be added to HTML in the following ways:

  • Inline style-use the "style" attribute in HTML elements
  • External references- files with external CSS

The best way is to externally reference the CSS file.


Inline Styling (Inline CSS)

When special styles need to be applied to individual elements, inline styles can be used. The way to use inline styles is to use style attributes in related tags. Style attributes can contain any CSS attributes. The following example shows how to change the color and left margin of a paragraph.

Example

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

Internal Styling (Internal CSS)

The background-color property defines the background color of an 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)

When styles need to be applied to many pages, external style sheets are the ideal choice. With external style sheets, you can change the look of your entire site by changing one file.

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 »

When a single file requires special styles, internal style sheets can be used. You can define internal stylesheets in the <head» section with the <style» tag:

body {
    background-color: lightgrey;
}

h1 {
    color: red;
}

p {
    color:green;
}

CSS Fonts

CSS color property depict content color to be utilized for the HTML element.

CSS font-family property depict textual style to be utilized for the HTML element.

CSS font-measure property portray content size to be utilized for the HTML element.

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    textual style family: verdana;
    text dimension: 300%;
}
p  {
    color: red;
    textual style family: courier;
    text dimension: 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 component has a container around it, regardless of whether you can't see it.

The CSS border property characterizes a noticeable color around a HTML element:

Example

p {
    color: 1px strong green;
}
Try it Yourself »

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

Example

p {
    color: 1px strong black;
    padding: 10px;
}
Try it Yourself »

The CSS margin property characterizes an margin (space) outside the border:

Example

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

The id Attribute

Next step,we find out about id quality

id attribution is style for one element.:

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

eg. style for components with id

Example

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

The class Attribute

style for class of component we can include class attribute:

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

we can utilize diverse style for components :

Example

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

Chapter Summary

  • Use the HTML style property for inline styling
  • Use the HTML <style> component to characterize inside CSS
  • Use the HTML <link> component to allude to an outer CSS file
  • Use the HTML <head> component to store <style> and <link> elements
  • Use the CSS color property for content colors
  • Use the CSS font-family property for content fonts
  • Use the CSS font-size property for content sizes
  • Use the CSS border property for noticeable component 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 data for a HTML document
<link> Defines a connection between an archive and an outside asset