basics CSS 🐾

CSS stand for cascading style sheets.
cascading style sheet(CSS) describe how documents are presented on screens in print.
cascadind style sheets provide easy and effective alternatives to specify various attributes for the HTML tags.

Advantages of CSS

CSS saves time	you can write CSS once and then reuse the same sheet in multiple HTML pages. you can define a style for each HTML element and apply it to as many web pages as you want.
pages load faster	if you are using CSS, you do not need to write HTML tag, attributes every time. just write one CSS rule of a tag and apply to all the occurrences of that tag. so less code means faster download times.
easy maintenance	to make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
superior style to HTML	CSS has a much wider array of attributes than HTML page in comparison of HTML attributes.
multiple device compatibility	style sheets allow content to be optimized for more than one type of device. by using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
global web standards	now HTML attributes are being deprencated and it is being recommnded to use CSS. so its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

Example

<!doctype html>

<html>

<head>

<title>CSS example</title>

</head>

<body>

<p><font color=”red” size=”8″>CSS examples</font></p>

</body>

</html>

note: the <font> tag was used in HTML 4 to specify the font face, font size, and color of the text.

you can use CSS in three ways in HTML document.

external style sheet: defines style sheet rules in a separate CSS file and the include that file in your HTML document using HTML <link> tag.
internal style sheet: define style sheet rules in header section of the HTML documnet using <style> tag.
inline style sheet: defines style sheet rules directly along with the HTML elements using style attribute.

note

The <link> tag defines the relationship between the current document and an external resource. The <link> tag is most often used to link to external style sheets or to add a favicon to your website. The <link> element is an empty element, it contains attributes only

The <style> tag is used to define style information (CSS) for a document. Inside the <style> element you specify how HTML elements should render in a browser.

CSS properties

selector: a selector is an HTML tag at which style will be applied. this could be any tag like <h1> or <table>
property: a property is a type of attribute of HTML tag. put simply, all the HTML attributes are converted into CSS properties. they could be color or border ect.
value: value are assigned to properties. for example color property can have value either red or #f1f1f1 etc.

selector {property: value}

table{border:1px solid #c00;}

The types of selectors

Types of selectors	examples
The universal selector	{color:#ffffff}
The descendant selector	ul em {color:#f0f0f0}
The class selector	h2.black{color:#000000;}
The Id selector	#black{color:#000000;}
The child selector	body>p{color:#ffffff}
The attribute selector	input[type=”text”]{color:#000000}