Introduction to CSS

 Introduction to CSS :-

•  CSS stands for Cascading Style Sheets. Cascading Style Sheets are used to beautify a HTML page and provide consistent look and feel for web pages of a web site.
• The same can be possible using formatting tags of HTML tags as well. but we were working on a website project of around 25 pages having different content to present of the same company website then we cannot have different design and color for each page, rather the website should look symmetric and consistent
• It can be made possible by copying and pasting the same designs and color formats on every page, but is it really worth? Let us explore and provided an alternative and easier way to do so.
• The worst situation would occur when you need to change formatting e.g. color of headers/content/links for the entire project. It would be next to impossible with a website having complex structure with more than 25 pages.
• CSS solves this problem by providing styling tags to control formatting of web documents and in addition also provides additional features to maintain consistent styling throughout the web site.
• CSS is a file which stores the styling part of the entire website at one central location.
• All we need to do is that simply call the CSS styles to be applied for a web page using <link> tag in the header section of the HTML document.CSS would render corresponding effects for the web page pages without having to copy styles for all documents.
• Also it solves the effort while editing the website style; we simply need to edit one single CSS file and effects are so reflected in all documents using the said CSS.

Some challenges that the designer may face while designing a web page are,

• HTML documents use a lot of mark-up to style the pages.
• There can be very complex structures of tables, nested frames, invisible pixel images for layout, etc.
• This makes HTML page difficult to render for the browser 

Advantages of using CSS are,

• Code : CSS is the standard for coding in HTML, CSS is compatible with most browsers. CSS reduces the length of the codes of web page, which decreases the page size, making it easy and fast to load in browsers
• Design : Use of CSS makes the design simple. CSS makes the management of the entire website easy to maintain by just changing the CSS file which contains the style details.
• Bandwidth : CSS reduces the HTML coding and page size. This reduces the bandwidth usage.
• Consistency : It is easy to maintain, handle and control the whole website made on CSS based HTML. eg : Suppose we want to change the background of the entire website, we just need to change the background of the single page in the style sheet and the background of the whole website will change. CSS allows for much richer document appearances than simple HTML. It helps to reduce workload by centralizing commands for visual appearance allowing to use same style on multiple pages and reducing download time.

Basics of CSS

• Cascading : Multiple style an overlap in order to specify a range of style from a whole website down to a unique element. Which style gets applied pertain to the rules of CSS cascading logic.
• Style : CSS deals specifically with the presentation domain of designing a web page color, font, layout, etc).
• Sheet: Normally, CSS is a file separate from the HTML file-linked to the HTML file through its cheddar's (sometime CSS is included in HTML page itself).
• Set of Rules to be implemented for using CSS:
• A CSS rule has 2 parts: a selector, and one or more declarations
• The selector is the HTML element that we want to style. The property is the attribute we want to change. Each attribute has a value.
• CSS property names are separated by dashes when they are multiple words for example, font-face, font-size, line-height, and so on.

Formatting paragraphs using CSS

The Style sheets are collections of style information that are applied to web pages. There are different approaches to style sheets. The CSS recommendation supports three ways of including style information in a document. These approaches include:

1. Linked or External Styles (Global styles) - Style information is read from a separate file (.CSS) that is specified in the <LINK> tag. This file can be used by multiple HTML documents so called global styles.

2. Embedded Styles (Page specific style) - Style information is defined in the document head using the <STYLE> and </STYLE> tags.
3. Inline Styles (Tag specific style) - Style information is placed inside an <HTML> tag and applies to all content between that tag and its companion closing tag using the <STYLE> attribute. One can use multiple approaches together for implementing stylesheets in an HTML document.

To create a CSS file,

1. Open a notepad and write a CSS code :

2.Save the file with CSS extension :

3. Create a HTML document. and attached the CSS file to HTML using tags given below: <link rel="style sheet" type="text/css" href="myfirst.css">

4. The output would like Inline

Linked or External style sheet

• The style sheet is separate file linked to the HTML page using <LINK> tag.
• We will first have to set style information in external style sheet file so we create. CSS file as follows:

Myfirststyle.css
   .p1 {font-face:Arial; color:blue; font-style:italics}
   .p2 {latter-spacing:5pt; color:red; font-style: oblique}

We must including Myfirststyle.css in our webpage using <LINK> tag
At the beginning of the page in the head section will insert following line:

         <HEAD>
         <LINK REL="stylesheet" HREF="Myfirststyle.css">
         </HEAD>

• Now we can use both class pl and p2 in all the pages that includes the above <LINK> tag. Style information once creating in Mystyle.css can be used in almost pages of website.
• You can set style information that is uniform in all pages for margin, text, alignment, table layout, etc. in this approach.

Syntax for specifying a style characteristic has the form :
    Characteristic: value) Semicolons should separate multiple characteristics / value pair.
    Example :pl (font: 12 pt Times New Roman; line-height: 20pt; color: black)

 Embedded Style Information using<style> tag

• After creating a "CSS" file that will be useful to all the web pages of your web site, now concentrate on page specific style.
• This type of page specific information can be provided using <STYLE> tag in head section of HTML document.

Example: After linking Myfirststyle.css in your website's "myfirstfile.html", you want the table in this page should have different layout then you can use embedded approach.

<HEAD>
<STYLE>
.table1 {border-color:yellow; background-image:photo.png; border-style:dotted}
</STYLE>
</HEAD>

Class table1 can be applied to any/multiple table(s) in myfirst.html

<BODY>
<TABLE CLASS=table1 >
</TABLE>
<TABLE CLASS=table1>
</TABLE>
</BODY>

Inline Style Sheets

• Inline Styles override both linked style sheets and style information embedded in the document head with style <STYLE> tag.
• Styles defined in the document head override linked style sheets.
• Linked style sheets override browsers default.

<P STYLE="align=center; word-spacing:5pt">

content of the paragraph</p>

This style is specific to only one instance of <p>tag.

• Selectorn are patterns and to meet the needs) you want to apply style Description with example intre Selects all elements with an intro

.class                 .intro selects all element(s) you want to apply style .
#id                    #fl10 Selects the element with id="fl10"

• The following CSS STYLE declaration puta border around every Helmet in the document and centers it on the page:

<HEAD
<STYLE TYPE="text/css">
 H3 (border-width :2;  border: solid;  text align: center)
 </STYLE>
</ HEAD>

• To specify that thin style information should only apply to H1 elements ofa specific elass,we modify it as follows:

<HEAD>
<STYLE TYPE="text/css>
Hi.myclass { border-width: 1; border:solid: text-align: center)
</STYLE>
</ HEAD >
<BODY >
<HI CLASS-"myclass"> This H1 is affected by our style </H1>
<H1>This one is not affected by our style </H1>
</BODY>

• To limit the scope of the style information to a single instance of P, set the id attribute:

<HEAD>
<STYLE TYPE="text/css">
#myid (border-width: 1: border solid; text-align: center}

</STYLE >
</HEAD>
<BODY >
<P ID="my id This paragraph is affected by style </H1>
</BODY>

• If you want all three kinds of links i.e., unvisited, visited, and active to be rendered in the same style:

         A:link (font-size: 10pt; color: 00FF00; font-decoration: underline)
         A:visited (font-size: 10pt; color: 00FF00; font-decoration:underline)
         A:active (font-size: 10pt; color: 00FF00; font-decoration:underline)

or

        A:link A:visited A:active (font-size: 10 pt; color: 00FF00; font- decoration:underline)

Thank you for visiting my site