Introduction to CSS

What is CSS?

CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed.

★ CSS stands for Cascading Style Sheets.
★ CSS defines how HTML elements are to be displayed. .
★ CSS saves a lot of work. It can control the layout of multiple web pages all at once .
★ CSS contains all styling information: where HTML elements should go, what color they should be, how big they should be, and more.

CSS Syntax

A CSS rule set consists of a selector and a declaration block:

★ The selector points to the HTML element you want to style.
★ The declaration block contains one or more declarations separated by semicolons .

♣ The importance of semicolons

☆ As you start adding more and more property-value pairs for each CSS selector, it’s important to remember to put a semicolon (;) at the end of each line.
☆ The semicolon tells CSS that one property-value pair is over and it’s time to move on to the next one.
☆ Without semicolons, it’ll become confused and your page won’t look right.

★ Each declaration includes a CSS property name and a value , separated by a colon .
★ A CSS declaration always ends with a semicolon , and declaration blocks are surrounded by curly braces .

Example Explained:

♣ h1 is a selector in CSS (it points to the HTML element you want to style: <h1>
♣ color is a property, and blue is the property value
♣ font-size is a property, and 12px is the property value

CSS How To ...

When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. There are three ways of inserting a style sheet:

♣ Inline style.
♣ Internal style sheet.
♣ External style sheet.

Inline style

♣ An inline style may be used to apply a unique style for a single element.
♣ To use inline styles, add the style attribute to the relevant tag.
♣ The style attribute can contain any CSS property.
♣ Note : An inline style loses so many of the advantages of a style sheet(by mixing content with presentation). Use this method sparingly.

			<p>This is a paragraph.</p>
<p style="color: #b31fb5;text-align: center; font-size: 40px;">This is a paragraph with inline style</p>

This is a paragraph.

This is a paragraph with inline style

Internal Style Sheet

♣ An internal style sheet may be used if one single page has a unique style.
♣ Internal styles are defined within the <style> element, inside the head section of an HTML page.

	<style>
    	p{ 
        color: #b31fb5;
        text-align: center;
	font-size: 40px;
      	}
    	</style>

External Style Sheet

♣ With an external style sheet, you can change the look of an entire website by changing just one file!
♣ Each page must include a reference to the external style sheet file inside the <link> element.
♣ The <link> element goes inside the <head> section in HTML.

♣ In HTML:

♣ In Site.css file:

    	p{ 
        color: #b31fb5;
        text-align: center;
	font-size: 40px;
      	}

♣ Make sure HTML file can see the external CSS information by putting a <link> tag between the <head>...</head> tags of the HTML page. Your <link> tag needs three attributes:

★ A type attribute that should be always be equal to "text/css".
★ A rel attribute that should be always be equal to "stylesheet". It is used to define the relationship between the linked file and the HTML document.
★ A href attribute that should point to the web address of your CSS file.

♣ Note that:

★ An external style sheet can be written in any text editor.
★ The file should not contain any html tags.
★ The style sheet file must be saved with a .css extension.

Cascading Order

★ What style will be used when there is more than one style specified for an HTML element?
★ Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number 1 has the highest priority:

♣1. Inline style (inside an HTML element).
♣2. External and internal style sheets (in the head section)
♣3. Browser default

★ An inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or a browser default value.
★ The priority of internal and external style is determined by their order in <head></head> tag. The later one will overwrite the earlier one .

CSS color

★ Colors in CSS are most often specified by:

♣ a valid color name - like red.
♣ an RGB value - like rgb(255, 0, 0).
♣ a HEX value - like #ff0000.

★ Color name : HTML/CSS suport 140 standard color names: https://www.w3schools.com/colors/colors_names.asp
★ RGB : RGB color values can be specified using this formula: rgb(red, green, blue): https://www.w3schools.com/colors/colors_rgb.asp
★ Hexadecimal Colors : RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255): https://www.w3schools.com/colors/colors_hexadecimal.asp
★ HTML Color Picker: https://www.w3schools.com/colors/colors_picker.asp

Text alignment

★ The text-align property is used to set the horizontal alignment of a text.
★ A text can be left or right aligned, centered, or justified.
★ The following example shows center aligned, and left and right aligned text:

Font family

★ The font-family property sets the font family of the text.
★ Most computers will understand popular fonts like Verdana, Courier, and Garamond, but each individual computer has different fonts installed on it.
★ font-family backup values:

♣ You don’t have to jump straight to a default value like cursive or sans-serif: you can tell CSS to try several, going from one to the next if the one you want isn’t available.
♣ For example, if you write:

					p{ font-family: Tahoma, Verdana, sans-serif; }

♣ CSS will first try to apply Tahoma to your paragraphs. If the user’s computer doesn’t have that font, it will try Verdana next, and if that doesn’t work, it will show a default sans-serif font.

CSS Background

★ The CSS background properties are used to define the background effects for elements.
★ CSS background properties:

♣ background-color
♣ background-image
♣ background-repeat
♣ background-position
♣ background-attachment

★ CSS background-color:

♣ The background-color property specifies the background color of an element .

body{
    background-color: lightblue;
}
h1{
    background-color: red;
}
h2
{
    background-color: green;
}
h3
{
    background-color: blue;
}

★ CSS background-image:

♣ The background-image property specifies an image to use as the background of an element .
♣ By default, the image is repeated so it covers the entire element.

body{
    background-image: url("mtsu.png");
}

♣ Note that: Do not use a background image that disturbs the text.

★ CSS background-repeat:

♣ By default, the background-image property repeats an image both horizontally and vertically.
♣ To repeat an image horizontally, set background-repeat: repeat-x
♣ To repeat an image vertically, set background-repeat: repeat-y
♣ No repeat, set background-repeat: no-repeat:

★ CSS background-position:

♣ The position of the image is specified by the background-position property.

body{
background-image: url("mtsu.png");
background-repeat: no-repeat;
background-position: top right;
}

♣ When you use the bottom position, make sure you have enough elements in the body.
♣ You can also specify the position by px.

body{
background-image: url("mtsu.png");
background-repeat: no-repeat;
background-position: bottom 7px right 5px;
}

★ CSS background-attachment:

♣ To specify that the background image should be fixed (will not scroll with the rest of the page), use background-attachment: fixed.
♣ To Specify that the background image should scroll with the rest of the page, use background-attachment: scroll.

Comment

★ Comments are used to explain the code, and may help when you edit the source code at a later date.
★ Comments are ignored by browsers.
★ A CSS comment starts with /* and ends with */ . Comments can also span multiple lines.

HTML block

★ A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
★ One of the most versatile structure tags available to you is the <div> </div> tag. Short for "division".
★ <div> allows you to divide your page into containers (that is, different pieces). This will come in handy when you begin learning CSS.
★ CSS Division (div) is a container element and it is used to group related items together. Whenever there is a situation that you need to collect various objects into a larger container for scripting or styling purposes, div is the best solution. The use of < div> tag is straightforward.

Examples

			<div>
  			<p>A paragraph inside div</p>
			</div>

    <div style="width: 50px; height: 50px; background-color: red"></div>
    <div style="width: 50px; height: 50px; background-color: green"></div>
    <div style="width: 50px; height: 50px; background-color: blue"></div>
    <div style="width: 50px; height: 50px; background-color: yellow"></div>

★ As you can probably guess, the smart use of <div> will eventually allow you to create visual HTML objects like sidebars, menus, and more.
★ You can make <div> clickable by wrapping them in tags. Do not forget the https:// for the url.

				<a href="https://www.google.com" target="_blank">
				<div style="width: 100px; height: 50px; background-color: pink"></div>
				</a>

Spantastic

★ While block allows you to divide your webpage up into pieces you can style individually, <span></span> allows you to control styling for smaller parts of your page, such as text.
★ For example, if you always want the first word of your paragraphs to be red, you can wrap each first word in <span></span> tags and make them red using CSS!

			<p>This paragraph is black, except for the word <span style="color:red">red</span>!</p>

This paragraph is black, except for the word red!

★ Color is just one attribute you can selectively change with tags; you can also change font size, font family, and any other style attribute you can think of!

Reference

https://www.w3schools.com/html/html_intro.asp