CSS Notes

CSS Introduction

What is CSS?

CSS is an acronym for Cascading Style Sheet.
CSS is a language used for styling the html structure of a web page.
CSS is used for designing the structure of the websites.
CSS describes how html will display on the screen, it saves a lot of work.
Adding colours, designs to the html content is only possible through only by css.

Features of CSS

It is platform independent language.
It saves time, as written once can be reused.
To make any global change simply change the style it will be automatically updated in all web pages.
It is easy to understandby uuser as well as browser.
It have multiple styles superior than html attribute styles.
It doesn't require internet to see changes in a CSS file , it can be seen at local storage.

History of CSS

CSS was proposed on 10 october 1994 by Hakon Wium Lie.
It was developed by World Wide Web Consortium.
It was first released on 17th of Dec 1996 as CSS 1 and Bert Bos was the co-creator of the CSS.
CSS2 was created in earlys 1997 and then published as a W3C recommendation on May 12, 1998.
In 1999, CSS3 was launched with some more features.
In 2004, with some more improvements in CSS2 , CSS 2.1 had been launched.
CSS 4 had been launched in the year 2007 with features like responsiveness and CSS Pro.

CSS Linking Methods

How many types of linking methods of CSS?

CSS is used to design the layout of web pages.
CSS have some specific rules. It can control multiple web pages at once.
CSS usually linked with the html page by three ways:-

• Inline CSS
• External CSS
• Internal CSS

INLINE CSS

Inline CSS is when the css rules are written inside the html tag.
Style attribute is used to write all styles inside the opening tag of html element.
Inline CSS always prioritize over other CSS.

Example : <p style= " color: blue; font-size: 12px;"> I'm a 12 pixel blue Text. </p>

EXTERNAL CSS

External CSS is written into a separate file with the extension of .css.
This CSS file linked through the <link> tag inside the head part of the html document.
It have the least priority over all forms of CSS.

For Example: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"; href="style.css"; >
</head>
<body>
...
</body>
</html>

INTERNAL CSS

Internal CSS is written using style tag inside the head element.
Style Tag is a closing tag.
Internal CSS have less priority than Inline CSS but greater than External CSS.

For Example: <!DOCTYPE html>
<html>
<head>
   <style>
       .container{
          Background:"red;"
          font-size: 11px;
}    </style>
</head>
<body>
...
</body>
</html>

CSS SYNTAX

SYNTAX:

selector { property : value }

CSS syntax usually consist of:
• A Selector
• Property
• Value

SELECTOR

• A selector is the way to select the html elements which you want to style .
• Property and value combinedly called Declaration. Every Declaration should be seperated by commas.
• Declaration must be surrounded by curly braces.

PROPERTY

• The property is the style which we want to set for a html element.
• Properties can be color, font-size, background-image etc.

VALUE

• It is the value assigned to the property.

CSS SELECTORS

• Types Of Selectors

Example: Here below the code for the ::before selector , that means something will appear before the main content.

OUTPUT: /output

HTML TAGS

Types of HTML Tags

Closing Tags:

The tags in which the closing of tags is mandatory, as they will not work if not closed.
For Example: <html> </html>

Unclosing Tags:

The tags which do not requires any closing tag.
For Example: <br> and <hr>

Meta Tags:

Meta Tags are the tags which are used for display the meta data i.e; data of data.
For Example:
<meta name="description" content="Web Development tutorial">
<meta name="keywords" content="HTML, CSS, JavaScript">

Text Tags:

These are the tags which are used for displaying text over the browser.
For Example:
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

Link Tags:

The tags which are used for linking colors, pages or any section to that page.
It is represented by <a> tag.

List Tags:

List tags are the tags which are used to display the data in the form of list. Tags like <ul>, <ol>, <li>, <dl>, <dt>, <dr> are used to define any list.

Image and Object Tags:

Tags which are used to display images and objects in the page.
<img> used for displaying the images in the page.
It has attributes like src and alt.

Table Tags:

Table Tags are used to display the data into tabular form.
<table>, <td> etc. tags are used for making table in HTML.

Form Tags:

Form tag is the tag which is used to define a form. <form> tag is used to make a form . Form has different type attributes like submit, text, radio etc.

HTML Attributes

ATTRIBUTES

• Attributes are the special properties for the elements.
• They provide additional information about an element.
• The syntax of attribute is name=”value”.
• NAME is the property used to set for an element.
• VALUE used to set the value for the property of that element.

The SRC Attribute

The SRC attribute is used for specifying the path of an image in img tag. It represents the source of the file which will be embedded in the image tag.

For Example: <img src="image_name.jpg">

There are two types of URLs in src attribute ::
1. ABSOLUTE URL:
• It is the URL which is provided in the form of "https://www.istockphoto.com/search/2/image?phrase=india" which is linked to any external website page.
• That external page maybe under any copyright which will seem illegal to use without permission.
• This will be a complete address starting with http:// or https:// . It is not good to use Absolute URL because the address may get changed of that image .
2. RELATIVE URL:
• It is the URL which belongs to the same page or website.
• It do not starts with https , just started with a slash or without slash if it belongs to the current page.
• Their URLs do not contains the domain name .

The HREF Attribute

The HREF attribute is used in <a> tag for specifying the link to another go to page.

For Example: <a href="https://www.cheentee.com/"> cheentee Blogs </a>

The ALT Attribute

The alt attribute is used with <img> tag , as it indicates the alternate name we provided for the image if image is not get displayed on screen due to any reason.

For Example: <img src="image_name.jpg" alt="This is image">

The width and height Attribute

The width and height attribute is used with <img> tag, for setting width and height of an image.
It is good to use only height for a image to be in original aspet ratio because width may strech the image sometimes.

For Example: <img src="image_name.jpg" height="100px" width="100px">

The style Attribute

Style attribute is used inside an element for define internal styling. It is also known as the form of Internal CSS.
<style> is used inside the element for applying styles.

For Example: <img src="image_name.jpg" style="height:100px width:100px">

The lang Attribute

Lang attribute is used inside the <html> tag for defining the language that will display on the web browser.

For Example: <!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

The title Attribute

The title attribute is used to define the title.
The value of the title will be shown on hovering the mouse tip.

For example:<p title="Title is here">This is a title.</p>

HTML Paragraphs

Paragraph Tag

• The Paragraphs in HTML are written in <p> tag .
• Paragraphs have display block which means they will start from a new line everytime written.
• It can be nested with other tags like h, ul etc..
• There should be no space between opening and closing of p tag.
• It is used to write sentences, paragraphs in a HTML Document.
• Browser automatically add some space(margin) after and before a paragraph.
• To remove this margin use "clear=all".

For Example: <p> This is paragraph tag. <p>

How Paragraph Tag display content ?

• There is no effect of adding more spaces between words in the code of HTML because browser automatically removes all the spaces. It will display whole content in a single line , when the whole space got filled then it will move to next line .

For Example: <p> This
is our paragraph
which gives all the information about
the paragraph tag. </p>

IMPORTANT:

They both will give the same output , as whole sentence will display in a single line and all the extra spaces will also removed by the browser. For breaking lines you should use break tag and for adding pre tag which we will discuss here further.

HTML Headings

Heading Tags

Headings are the titles or subtitles that are used for displaying on the browser. There are six types of heading tags available in HTML :

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

Example: <h1>This is h1 heading.</h1>
<h2>This is h2 heading.</h2>
<h3>This is h3 heading.</h3>
<h4>This is h4 heading.</h4>
<h5>This is h5 heading.</h5>
<h6>This is h6 heading.</h6>

Headings fron h1 to h6 is in the decreasing order of font size and importance. It is suggested that there should be only one h1 in the HTML code but there can be multiple h2, h3, h4, h5, h6.

HTML Formatting

What is Formatting?

Text Formatting means to diaplay the text in a special form or any specific style.
HTML uses following elements for Text Formatting :-

<b> - It is used for bold text.
<strong> - It is used for important text.
<i> - It is used for Italic text.
<em> - It is used for emphasize text.
<small> - It is used for small text.
<mark> - It is used for mark text.
<sub> - It is used for subscript text.
<sup> - It is used for superscript text.
<ins> - It is used for inserted text.
<del> - It is used for deleted text.

HTML <b> and <strong> Tags

The difference between these two tags are that strong has more importance than b .
The content inside these element is displayed with extra weight.

<Bold Tag> will display bold text with no importance.

Example: <b>This is bold element.</b>

<Strong Tag> will display bold text with extra importance.

Example: <strong>This is strong element.</strong>

HTML <i> and <em> Tag

The difference between these two tags are that em has less importance than i , but it can be combined with other tag like <br> Tag.

<Italic Tag> will display Italic text with texts like paraphrase from another Language.

Example: <i>This is Italic element.</i>

<Emphasize Tag> will display Italic text with extra importance.

Example: <em>This is emphasize element.</em>

HTML <small> Tag

<small Tag> is used to display the text in small font size than regular font size.

Example : <small> This is small Text.</small>

HTML <mark> Tag

<mark Tag> is used to display the text which will be highlighted or marked.

Example : <mark> This is highlighted Text.</mark>

HTML <sub> Tag

<sub Tag> is the subscript tag which usually appears below the normal line of a word as like in chemical formulas.

Example : <p>This is <sub>subscript</sub> Text.</p>

HTML <sup> Tag

<sup Tag> is the superscript tag which usually appears below the normal line of a word as like in chemical formulas.

Example : <p>This is <sup>subscript</sup> Text.</p>

HTML <ins> Tag

<ins Tag> is the tag which usually display the text in it with an underline.

Example : <p>This is <ins>inserted</ins> Text.</p>

HTML <del> Tag

<del Tag> usually display the text in it with a line through the text.

Example : <p>This is <del>subscript</del> Text.</p>

HTML CSS

CASCADING STYLE SHEET

CSS is used to design the layout of web pages.
CSS have some specific rules. It can control multiple web pages at once.
CSS usually linked with the html page by three ways:-

• Inline CSS
• External CSS
• Internal CSS

INLINE CSS

Inline CSS is when the css rules are written inside the html tag.
Style attribute is used to write all styles inside the opening tag of html element.
Inline CSS always prioritize over other CSS.

Example : <p style= " color: blue; font-size: 12px;"> I'm a 12 pixel blue Text. </p>

EXTERNAL CSS

External CSS is written into a separate file with the extension of .css.
This CSS file linked through the <link> tag inside the head part of the html document.
It have the least priority over all forms of CSS.

For Example: <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"; href="style.css"; >
</head>
<body>
...
</body>
</html>

INTERNAL CSS

Internal CSS is written using style tag inside the head element.
Style Tag is a closing tag.
Internal CSS have less priority than Inline CSS but greater than External CSS.

For Example: <!DOCTYPE html>
<html>
<head>
   <style>
       .container{
          Background:"red;"
          font-size: 11px;
}    </style>
</head>
<body>
...
</body>
</html>

HTML Links

HYPERLINKS

A link is defined into an "achor tag" and it is represented by <a>.
Links make you able to jump over other documents upon clicking them.
A Link can be a image , text , or any other HMTL Document.

SYNTAX: <a href="www.cheentee.com"> Click Here! </a>

In the above example, a link get created means when "Click Here!" will be clicked then it will jump on the page "www.cheentee.com"

By default :

Unvisited Link: Underline with blue colour.
Visited Link: Underline with purple colour.
Active Link: Underline with red colour.

Attributes of LINKS

The HREF Attribute

The "href" attribute is used to link the other web pages or other document to any text,image or other elements.

SYNTAX: <a href="www.cheentee.com"> Click Here!</a>

The TARGET Attribute

The "Target" attribute is used to specify that where the linked document will appear.
The Target attribute can have following specific values :

_blank: Opens the document in a new tab.
_self: Opens the document in a same/existing tab.
_parent: Opens the document in a parent frame.
_top: Opens the document in the full body of window.

SYNTAX: <a href="www.cheentee.com"> target="_blank"> Click Here!</a>

Image as a Link

An image can be used inside anchor tag for using image as a link.

SYNTAX: <a href="www.cheentee.com"> target="_blank"><img src="/assests/pic.png"></a>

HTML IMAGES

IMG TAG

Img tag is used to display images over the web pages.
It usually enhace the visuals of a website.

SYNTAX: <img src="/assests/photos/hiimage" alt= HelloImage>

Images are not technically inserted into the web page , they are just linked with the web pages.
The <img> tag have two attributes:

src
alt

The SRC Attribute

This attribute is used to specify the location of the image or the source of the image. It contains Relative URL or Absolute URL.

SYNTAX: <img src="/assests/photos/hiimage">

The ALT Attribute

This attribute is used to specify the name of the image which will display when picture not gey displayed due to any reason.

SYNTAX: <img src="/assests/photos/hiimage" alt= HelloImage>

Sizing Images

Images can be resized by using height and width attributes of styling.
It is good to use only height for a image to be in original aspect ratio because width may strech the image sometimes.

For Example: <img src="image_name.jpg" height="100px" width="100px">

Background Images

Background Images can be inserted by using style attribute.
Background-image property is used to display the image by providing the url of the image.

SYNTAX: style{

background-image: url(/assests/photos/cheentee);

}

HTML META TAGS

EXAMPLE: <meta charset = "UTF-8">
<meta name = "description" content = "Web Development ">
<meta name = "keywords" content = "HTML, CSS, JS">
<meta name = "author" content = "Charlie Anderson">
<meta name = "viewport" content = "width=devide-width, initial-scale=1.0">

Meta data means data about data.
Meta tags are always lies inside the head tag of the html document.
These tags do not displayed by the browser.
Meta tags are only for the machine understanding.

Meta Description Tag

Meta Description Tag is used to describe the page means what information does the page contains.
For Example, here the page contains the information about the Web Development.
<meta name = "description" content = "Web Development">

Meta Keywords

Meta keywords are the different possible words which can be typed during searching the website.
For example,
<meta name = "keywords" content = "HTML, CSS, JS">

Meta Author

Defines the author of the page.
For example,
<meta name = "author" content = "Charlie Anderson">

Meta Viewport

It make sure that your website looks good in all devices.

HTML Title Tag

<TITLE> Tag

<title> tag is used to display the title of the page which usually renders in the browser's tab.

For Example: <!DOCTYPE html>
<html>
<head>
<title> A title tag tutorial. </title>
</head>
<body>
...
</body>
</html>

Title Tag usually describes the meaning of the page content that indicates that what information is lying inside the Page.
Title is most important when it comes to the SEO.

HTML Favicon

Favicon is a logo which usually appears before the title of any web page.

How to add a favicon on page?

For Example: <link rel="shortcut-icon" href="favicon.png" type="image/x-icon">

The favicon of the page will appear on the left side of the title in the browser box.

Favicon usually linked through link tag in the head element after title tag.