CSS style connect in web pages.

Style and style sheet:

Diversity and prosperity of design and how much each page is different and could be advanced design which overview you will be delighted yourself, It will be possible only due to the style sheet. When the browser displays the page, it will follow that style rule and show it accordingly.

First style sheet:

It is attached in the document by using the <style> element and it only applies to that document. This style element must be attached to the document’s head element and it will contain the attributes of a type that will mark the style element’s content as “text/css”. “text / css” is currently the only conventional value.

Markup document:

Markup creates a document’s structure which are often called structural layers. The presentation layer is applied to this structural layer. The central theme of the style sheet is the concept of the underlying relationship of the structure and element of the document.

Example:

<head>
<title>Required documnet title here</title>
<style type= "text/css"/>
h1{color:green;}
p{font-size:small; font-family: sans-serif;}
</style>
</head>

If you do not see the desired results in the browser by changing or adding some style sheets, check whether there is a mistake somewhere or whether a bracket or semicolon is dropped.

CSS style connects in web pages.

CSS style sheet can be applied in web pages by using HTML Style elements. There are three ways for it.

Example:

css style sheet
1. In-line CSS.
2. Internal or Embedded Styles.
3. External Styles.

In-line (attribute style):

Inline CSS style sheet selectors, style, property and the value of this is consists of four parts. Look at the image below to understand the syntax.

inline style sheet

You can use the style attribute in a single element and in that element can put a lot of properties and values.

For examples:

<h1 style="color: blue">introduction</h1>

Many of the properties for setting up only put them separating by semicolon.

For examples:

<h1 style="color: blue; margin-top: zem">introduction</h1>

Inline styles can be applied with multiple elements such as heading, body and Para etc.

For examples:

<p style="color: blue; margin-left: 150 px">This is a paragraph</p>

Inline or only style between the lines used to apply a unique style for a single element. Inline styles should be avoided as much as possible, If not, they have no embedded or external style sheets to remove any files that are not needed very much.

Example:1

HTML Code:

<html>
<head>
<title>Example</title>
</head>
	  <body style="background-color: orange;">
	 		<p>This is a orange page</p>
	  </body>
</html>

 

Display in Browser:

inline css style sheet

Example:2

HTML Code:

<!doctype html>
<html>
<head>
<title>Inline Css Example</title>
</head>
<body style="width:650px; background:green;
color:#FFF; font: 12px sans-serif;">
<h2 style="color:red; font-size:24px;">
This heading is using inline CSS </h2>
<p style="color:white; font-size:20px;">
This paragraph is using inline CSS</p>
<div style="color:orange; font-size:28px;">This division is using inline CSS</div>
</body>
</html>

Display in Browser:

internal style sheet

Internal style sheet:

Internal style sheet is also called embedded style sheet. It is included in the main HTML or web document. Style sheet is inside the tag of <style></style> in a web page and style properties are listed between these tags. Style tag is written between <head></head> tags.

Example:1

HTML Code:

<html>
<head>
<title>Example</title>
<style type="text/css">
	  body {background-color: green;}
</style>
</head>
	  <body>
		<p>This is a green page</p>
	  </body>
</html>

Display in Browser:

internal css

Example:2

HTML Code:

<!doctype html>
<html>
<head>
<title>Embedded CSS Demo</title>
<style type="text/css">
	  body {font-family: Georgia; background-color: #3b5998;}
	  h1{color:#fff;}
	  p{color:#fff;}
</style>
</head>
	  <body>
	  <h1>Facebook</h1>
		<p>Facebook was founded by Mark Zukerberg in the Harvard Dorm.</p>
		<p>It in net worth $50 billion in just 9 years</p>
	  </body>
</html>

 

Display in Browser:

internal style sheet

External (link to a style sheet):

An external style sheet is a separate file which contains a number of style rules and where you can declare all the styles that you want to use on your website. At the end of the filename must be added dot css (.css) as an extension. Then CSS document is linked with one or more (X) HTML documents. In this method, all the files in a Web site to share the same style sheet. It is a most powerful and preferred method to add a style sheet to any document or content.

For example: If you create a large site where the page will be about 4000-5000. In that case the external style sheets can be used.

external style sheet

There are four ways to add CSS in HTML and external is one of them. External CSS is the most important because it is the most clean and effective.

Leave a Reply

Your email address will not be published. Required fields are marked *