What is CSS?

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
 CSS saves a lot of work. It can control the layout of multiple web pages all at once
 External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts and
color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

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.

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.

CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.

 element Selector: The element selector selects elements based on the element
name.
 id selector: selects elements based on the element id.
 class selector: To select elements with a specific class, write a period (.) character,
followed by the name of the class. Example “.center”

Grouping Selectors

To group selectors, separate each selector with a comma.

h1, h2, p {
text-align: center;
color: red;
}

CSS Comments
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:

How to insert CSS?

There are three ways of inserting a style sheet:

 External style sheet

 Internal style sheet
 Inline style

COLORS
Colors are specified using predefined color names, or RGB,
HEX, HSL, RGBA, HSLA values.

CSS Backgrounds

The CSS background properties are used to define the background

effects for elements.

CSS background properties:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element's
border.

Border Style
The border-style property specifies what kind of border to display.

The following values are allowed:

 dotted - Defines a dotted border

 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color value
 none - Defines no border
 hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border,
bottom border, and the left border).

Example
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined
borders.

With CSS, you have full control over the margins. There are properties for setting the margin
for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

All the margin properties can have the following values:

 auto - the browser calculates the margin

 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent element

Note: Negative values are allowed.

CSS Padding
The CSS padding properties are used to generate space around an element's content, inside
of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the
padding for each side of an element (top, right, bottom, and left).

adding - Individual Sides

CSS has properties for specifying the padding for each side of an element:
  padding-top
 padding-right
 padding-bottom
 padding-left

All the padding properties can have the following values:

 length - specifies a padding in px, pt, cm, etc.

 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width can be set to auto (this is default. Means that the browser calculates the
height and width), or be specified in length values, like px, cm, etc., or in percent (%) of the
containing block.

Setting max-width
The max-width property is used to set the maximum width of an element.

The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the
containing block, or set to none (this is default. Means that there is no maximum width).

The problem with the <div> above occurs when the browser window is smaller than the
width of the element (500px). The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small
windows.

Note: Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!

All CSS Dimension Properties

Property Description
height Sets the height of an element
max-
Sets the maximum height of an element
height
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout. The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders, padding, and the actual content.

Box Model different parts:

 Content - The content of the box, where text and images appear
 Padding - Clears an area around the content. The padding is transparent
 Border - A border that goes around the padding and content
 Margin - Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between
elements.

Assume we want to style a <div> element to have a total width of 350px:

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

Calculation: 320px (width)

+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

ALSO LOOK IN TO TEXT FORMATTING, TEXT ALLINGMENT, FONTS, LINKS AND ICONS.

Four links states are:

 a:link - a normal, unvisited link

 a:visited - a link the user has visited
  a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

CSS Lists
UNORDERED LIST AND ORDERED LIST.

In HTML, there are two main types of lists:

 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items

Different List Item Makers

list-style-type

list-style-image

list-style-position

list-style-type: none; : This property can also be used to remove the markers/bullets. Note that the
list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:

CSS Tables
<!DOCTYPE html>

<html>

<head>

<style>

#customers {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

border-collapse: collapse;

width: 100%;

#customers td, #customers th {

 border: 1px solid #ddd;

padding: 8px;

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {

padding-top: 12px;

padding-bottom: 12px;

text-align: left;

background-color: #4CAF50;

color: white;

</style>

</head>

<body>

<table id="customers">

<tr>

<th>Company</th>

<th>Contact</th>

<th>Country</th>

</tr>

<tr>

<td>Alfreds Futterkiste</td>

<td>Maria Anders</td>

<td>Germany</td>

</tr>

<tr>
 <td>Berglunds snabbköp</td>

<td>Christina Berglund</td>

<td>Sweden</td>

</tr>

<tr>

<td>Centro comercial Moctezuma</td>

<td>Francisco Chang</td>

<td>Mexico</td>

</tr>

<tr>

<td>Ernst Handel</td>

<td>Roland Mendel</td>

<td>Austria</td>

</tr>

<tr>

<td>Island Trading</td>

<td>Helen Bennett</td>

<td>UK</td>

</tr>

<tr>

<td>Königlich Essen</td>

<td>Philip Cramer</td>

<td>Germany</td>

</tr>

<tr>

<td>Laughing Bacchus Winecellars</td>

<td>Yoshi Tannamuri</td>

<td>Canada</td>

</tr>

<tr>

<td>Magazzini Alimentari Riuniti</td>

 <td>Giovanni Rovelli</td>

<td>Italy</td>

</tr>

<tr>

<td>North/South</td>

<td>Simon Crowther</td>

<td>UK</td>

</tr>

<tr>

<td>Paris spécialités</td>

<td>Marie Bertrand</td>

<td>France</td>

</tr>

</table>

</body>

</html>

The border-collapse property sets whether the table borders should be collapsed into a
single border:

Table Width and Height

Width and height of a table are defined by the width and height properties.

The example below sets the width of the table to 100%, and the height of the <th> elements
to 50px:

Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content
in <th> or <td>. By default, the content of <th> elements are center-aligned and the content
of <td> elements are left-aligned.

Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or middle) of the
content in <th> or <td>. By default, the vertical alignment of the content in a table is middle
(for both <th> and <td> elements).

Table Padding
To control the space between the border and the content in a table, use the padding
property on <td> and <th> elements:

Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:

Striped Tables
For zebra-striped tables, use the nth-child() selector and add a background-color to all even (or odd)
table rows:

Responsive Web Design - Grid-View

What is a Grid-View?
Many web pages are based on a grid-view, which means that the page is divided into
columns: Using a grid-view is very helpful when designing web pages. It makes it easier to
place elements on the page

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink
and expand as you resize the browser window.

Building a Responsive Grid-View

First ensure that all HTML elements have the box-sizing property set to border-box. This makes
sure that the padding and border are included in the total width and height of the elements.

Add the following code in your CSS:

*{
box-sizing: border-box;
}
The CSS box-sizing property allows us to include the padding and border in an element's total width
and height.
However, we want to use a responsive grid-view with 12 columns, to have more control
over the web page. First we must calculate the percentage for one column: 100% / 12
columns = 8.33%.

Then we make one class for each of the 12 columns, class="col-" and a number defining how
many columns the section should span:

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

What is a Media Query?

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

@media only screen and (max-width: 600px) {

body {
background-color: lightblue;
}
}

HTML code

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {

background-color: lightgreen;

@media only screen and (max-width: 600px) {

body {

background-color: lightblue;

</style>

</head>

<body>

<p>Resize the browser window. When the width of this document is 600 pixels or less, the
background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>

</html>

Add a Breakpoint
In case a web page made with rows and columns, and it was responsive, but it did not look
good on a small screen. Media queries can help with that. We can add a breakpoint where
certain parts of the design will behave differently on each side of the breakpoint.

You can add as many breakpoints as you like. We can also insert a breakpoint between
tablets and mobile phones.

* For mobile phones: */

[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {

/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
 .col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

For desktop: The first and the third section will both span 3 columns each. The middle
section will span 6 columns.

For tablets: The first section will span 3 columns, the second will span 9, and the third
section will be displayed below the first two sections, and it will span 12 columns:

<div class="row">
<div class="col-3 col-s-3">...</div>
<div class="col-6 col-s-9">...</div>
<div class="col-3 col-s-12">...</div>
</div>

Typical Device Breakpoints

There are tons of screens and devices with different heights and widths, so it is hard to
create an exact breakpoint for each device. To keep things simple you could target five
groups:

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {...}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

HTML CODE

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

.example {

padding: 20px;

color: white;

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {

.example {background: red;}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {

.example {background: green;}

}
/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {

.example {background: blue;}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {

.example {background: orange;}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {

.example {background: pink;}

</style>

</head>

<body>

<h2>Typical Media Query Breakpoints</h2>

<p class="example">Resize the browser window to see how the background color of this paragraph
changes on different screen sizes.</p>

</body>

</html>