Css Introduction

Card image cap

CSS Introduction ?

CSS stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages and for its designing purposes. CSS helps to define the presentation of HTML elements as a separate file known as CSS file having .css extension. CSS helps to change formatting of any HTML element by just making changes at one place. All changes made would be reflected automatically to all of the web pages of the website in which that element appeared.


cascading style sheets provide a central location in which information about what various fonts, foreground colors, background colors, italicization and emphasization should be applied to various HTML elements within a webpage.

Cascading style sheets can also control how various parts of a page, such as the header, footer, body, article content, sections and asides, are laid out on the page.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

While CSS is great for creating text styles, it is helpful for formatting other aspects of Web page layout as well.

Advantage of CSS

Easy Manage: CSS with you can better manage whole web-page. CSS allow to manage entire site elements looks and formatting in single style sheet file.

Global Change: CSS Style Sheet changes apply to global change for all web-page. When Style Sheet appear with web-page it's know as Cascading Style Sheet.

Save time: When we create HTML document, we define separate set attributes value in each element. but it is limited use. But, CSS give a lot of flexibility to set properties and values either group of element or single element. So it's benefit to avoid same code write again and again.

Easy Maintain/Update: CSS style sheet maintain easier and anytime you can edit elements properties and values.

3 way to write CSS: You can write CSS styles 3 way in-line element line (scope is only that element), Internal style write in header section (scope is only that web-page), or External style sheets write in external .css extension files. External style sheets enable you to change the elements and layout style of all the pages in a Web site, just by editing one single file.

Page Load Faster: Web-page with stylesheets take a bit of second to load very fastly.

Syntax :

  • Selector{property: value;}
  • Selector is HTML element to which CSS rule is applied.
  • Property specifies the attribute that the user wants to change corresponding to the selector.
  • Property can take specified value.
  • Property and Value are separated by a colon(:).
  • Each declarations separated by semi colon(;).

Example 1:

p {
	color:red;
}

Example 2:

h1{
color: green;
font-style: italic
}	

Example 3:

	body{
	color: cyan;
	font-family: Arial;
	font-style: 16pt;
}

Comments Example:

    	/* Header style start from here */    
#header {
   color:purple;  /* Default header color */
   margin-left:20px;
}
#header .logo {
   font-size:16px;
   background-color:#FF6633;
    

Type of Cascading style sheets?


(i) Inline Style Sheets:

Inline Style Sheets are included with HTML element i.e they are placed inline with the element to add inline CSS, we have to declare style attribute which can contain any CSS property.

An inline CSS is used to apply a unique style to a single HTML element

An inline CSS uses the style attribute of an HTML element.

An inline CSS style applies to a single element. The CSS code is written in the 'style' attribute of the HTML element that you want to apply that style to. For example, if you want your <h1> element to be in a blue color, you will write the inline CSS as follows:

Example 1:

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

	 

This is a Blue Heading


Example 2:

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS</title>
   </head>	
   <body>
      <p><font color = "green" size = "5">aimtocode, Tutorial!</font></p>
   </body>
</html>

Output :


aimtocode, Tutorial!


(ii) Internal Style sheets:

Internal Style Sheets are used to apply same appearance to all occurrence of a specific element. these are defined in element by using the <style> element. the <style> element must include type attribute. The value of type attribute specifies what type of syntax it includes when rendered by the browsers.

An Internal (or) Embedded style sheets refer to when you embed style sheet information into an HTML document using the <style> element. You do this by embedding the style sheet information within <style> </style> tags in the head of your document.

Syntax :

	<style>
   p {
        font-family: georgia, serif; 
        font-size: x-small;
    }
   hr {
        color: #ff9900; 
        height: 1px; 
    }
   a:hover {
        color: #ff0000; 
        text-decoration: none;
    }
</style>

Example 1:

	 <!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</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.


Example 2:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
  font-family: georgia, serif; 
  font-size: x-large;
  color:#ff9900;
  }
a:hover {
  color: LimeGreen; 
  text-decoration: none;
  }
</style>
</head>
<body>
<p>This paragraph tag has been preset using embedded style sheets. Same for 
the horizontal rule below and the hyperlink under that. </p>
<p>See Also <a href="inline-css.html" target="_blank">Inlinne style sheets</a></p>
<p>See Also <a href="external-css.html" target="_blank">External style sheets</a></p>
</body>
</html>

Output :


This paragraph tag has been preset using embedded style sheets.
Same for the horizontal rule below and the hyperlink under that.

See Also Inline style sheets

See Also External style sheets


(iii) External Style sheets:

External Style Sheets are the separate .css files hat contain the CSS rules. These files can be linnked to any HTML documents using <link> tag with rel attribute.

An external style sheet is a separate file where you can declare all the styles that you want to use on your website. You then link to the external style sheet from all your HTML pages.

This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.

Syntax :

	body {
    background-color: darkslategrey;
    color: azure;
    font-size: 1.1em;
}
h1 {
    color: coral;
}
#intro {
    font-size: 1.3em;
}
.colorful {
    color: orange;
}

Example 1:

Step 1: Create the Style Sheet :

body {
    background-color: darkslategrey;
    color: azure;
    font-size: 1.1em;
}
h1 {
    color: coral;
}
#intro {
    font-size: 1.3em;
}
.colorful {
    color: orange;
}

Step 2: Link the Style from the HTML Documents


<!DOCTYPE html>
<html>
    <head>
        <title>My Example</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>External Styles</h1>
        <p id="intro">Allow you to define styles for the whole website.</p>
        <p class="colorful">This has a style applied via a class.</p>
    </body>
</html>

Output :

External Styles

Allow you to define styles for the whole website.

This has a style applied via a class.

Card image cap