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

Why Use CSS?

CSS is used to define styles for our web pages, including

 the design,

 layout and variations in display for different devices and screen sizes.

CSS Syntax
A CSS rule consists of a selector and a declaration block.

 The selector points to the HTML element that we want to style.

 The declaration block contains one or more declarations separated by semicolons.

 Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.

 p {color: red; text-align: center;}

How to Insert CSS?
 There are three ways of inserting a style sheet:
 1. Inline CSS
 An inline style may be used to apply a unique style for a single element.

2. Internal CSS
 An internal style sheet may be used if one single HTML page has a unique style.

 The internal style is defined inside the <style> element, inside the head section.

3. External CSS
 With an external style sheet, you can change the look of an entire website by changing just
one file!

 Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.

 An external style sheet can be written in any text editor, and must be saved with a .css
extension.

Multiple Style Sheets

 If some properties have been defined for the same selector (element) in different style sheets,
the value from the last read style sheet will be used.

CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements that we want to style.

We can divide CSS selectors into several categories:

 Simple selectors (select elements based on name, id, class)

The CSS element Selector

 The element selector selects HTML elements based on the element name.

p { text-align: center;
color: red;
}
The CSS id Selector
 The id selector uses the id attribute of an HTML element to select a specific element.

 The id of an element is unique within a page, so the id selector is used to select one
unique element.

 To select an element with a specific id, write a hash (#) character, followed by the id of
the element.

 #first {text-align: center; color: red;}

The CSS class Selector

 The class selector selects HTML elements with a specific class attribute.

 To select elements with a specific class, write a period (.) character, followed by the class
name.

 HTML elements can also refer to more than one class.

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

*{
text-align: center;
color: blue;
}

The CSS Grouping Selector

 The grouping selector selects all the HTML elements with the same style definitions.

 h1 {text-align: center; color: red;}

 h2 { text-align: center; color: red;}

p { text-align: center; color: red;}

 It will be better to group the selectors, to minimize the code.

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

CSS Comments
 Comments are ignored by browsers and used to explain the code, and may help when you
edit the source code at a later date.

 A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

 /* This is a single-line comment */

CSS Color
In CSS, a color can be specified by using a predefined color name:

<p style="color:DodgerBlue;">Hello World </p>

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

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

CSS background-image
 The background-image property specifies an image to use as the background of an element.

 body { background-image: url("paper.gif");}

CSS background-repeat
 By default, the background-image property repeats an image both horizontally and vertically.

 Some images should be repeated only horizontally or vertically,

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

 If the image above is repeated only horizontally (background-repeat: repeat-x;)

CSS background-repeat: no-repeat
 Showing the background image only once is also specified by the background-repeat property:

 background-repeat: no-repeat;

CSS background-position
 The background-position property is used to specify the position of the background image.

 background-position: right top;

CSS background-attachment
 The background-attachment property specifies whether the background image should scroll or
be fixed (will not scroll with the rest of the page):

 background-attachment: fixed;

CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single property.
This is called a shorthand property.

When using the shorthand property the order of the property values is:

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

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

CSS 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.
 ridge - Defines a 3D ridged border.
 inset - Defines a 3D inset border.
 outset - Defines a 3D outset border.
 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).

CSS Border Width

The border-width property specifies the width of the four borders.

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}
p.four {
border-style: dotted;
border-width: thick;
}

CSS Border Color

The border-color property is used to set the color of the four borders.

Note: If border-color is not set, it inherits the color of the element.

CSS Border - Individual Sides

 In CSS, there are also properties for specifying each of the borders (top, right, bottom, and
left):p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
CSS Border - Shorthand Property
 To shorten the code, it is also possible to specify all the individual border properties in one
property.

 The border property is a shorthand property for the following individual border properties:

 p { border: 5px solid red;}

CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

p { border: 2px solid red; border-radius: 5px;}

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

Margin - Individual Sides

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

Margin Collapse
 Top and bottom margins of elements are sometimes collapsed into a single margin that is
equal to the largest of the two margins.

 h1 { margin: 0 0 50px 0;} h2 { margin: 20px 0 0 0;}

CSS Padding
 The CSS padding properties are used to generate space around an element's content, inside of
any defined borders.
 CSS has properties for specifying the padding for each side of an element(top, right, bottom
& left):
 All the padding properties can have the following values(length, % and inherit):

CSS Setting height and width

 The height and width properties are used to set the height and width of an element.
 The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.
 The height and width properties may have the following values:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm, etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value.

CSS Texts
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.

Text Decoration
In this chapter you will learn about the following properties:

 text-decoration-line
 text-decoration-color
 text-decoration-style
 text-decoration-thickness
 text-decoration

Add a Decoration Line to Text

The text-decoration-line property is used to add a decoration line to text.
h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p{
text-decoration-line: overline underline;
}

Text Transformation
 The text-transform property is used to specify uppercase and lowercase letters in a text.

 It can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word:

 text-transform: uppercase;

 text-transform: lowercase;

 text-transform: capitalize;

Text Spacing
 text-indent
 letter-spacing
 line-height
 word-spacing
 white-space

Text Indentation
 The text-indent property is used to specify the indentation of the first line of a text:

 p { text-indent: 50px;}
Letter Spacing
 The letter-spacing property is used to specify the space between the characters in a text.

 h1 { letter-spacing: 5px;}

Line Height
The line-height property is used to specify the space between lines

p { line-height: 0.8;}
p { line-height: 1.8;}

Text Shadow
The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

h1 {
text-shadow: 2px 2px;
}
h1 {
text-shadow: 2px 2px red;
}

Font Families
 All the different font names belong to one of the generic font families.
 Specify some different fonts for three paragraphs:
 .p1 { font-family: "Times New Roman", Times, serif;}

Font Style
 The font-style property is mostly used to specify italic text.

This property has three values:

 normal - The text is shown normally

 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
 p { font-style: normal;}
Font Size
 The font-size property sets the size of the text.
 The font-size value can be an absolute, or relative size.

Absolute size:

 Sets the text to a specified size

 Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
 Absolute size is useful when the physical size of the output is known

Relative size:

 Sets the size relative to surrounding elements

 Allows a user to change the text size in browsers

Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background,

a { color: hotpink;}

The 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

When setting the style for several link states, there are some order rules:

 a:hover MUST come after a:link and a:visited

 a:active MUST come after a:hover

Text Decoration
 The text-decoration property is mostly used to remove underlines from links:

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}

CSS Tables
Table Borders
 To specify table borders in CSS, use the border property.

 table, th, td {
border: 1px solid;
}

Table Width and Height

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

table { width: 100%;}

th { height: 70px;}

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.

 To center-align the content of <td> elements as well, use text-align: center:

 td { text-align: center;}

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).

td {
height: 50px;
vertical-align: bottom;
}

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

Example
th, td {
padding: 15px;
text-align: left;
}

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

tr:hover {background-color: coral;}

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

Table Color
The example below specifies the background color and text color of <th> elements:

th {
background-color: #04AA6D;
color: white;
}

CSS List Properties

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 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 Markers

The list-style-type property specifies the type of list item marker.

ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

ul {
list-style-image: url('sqpurple.gif');
}

Remove Default Settings

The list-style-type:none 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>:

ul { list-style-type: none; margin: 0; padding: 0;}

The display Property
The display property is used to specify how an element is shown on a web page.

Every HTML element has a default display value, depending on what type of element it is. The
default display value for most elements is block or inline.

The display property is used to change the default display behavior of HTML elements.

Block-level Elements
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).

Examples of block-level elements:

 <div>
 <h1> - <h6>
 <p>
 <form>
 <header>
 <footer>
 <section>

Inline Elements
An inline element DOES NOT start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

 <span>
 <a>
 <img>
The float Property
The float property is used for positioning and formatting content e.g. let an image float left to the text
in a container.

The float property can have one of the following values:

 left - The element floats to the left of its container

 right - The element floats to the right of its container
 none - The element does not float (will be displayed just where it occurs in the text). This is
default
 inherit - The element inherits the float value of its parent

Center Align Elements

To horizontally center a block element (like <div>), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally
between the two margins:

This div element is centered.

Example
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}

Center Align Text

To just center the text inside an element, use text-align: center;

This text is centered.

Example
.center {
text-align: center;
 border: 3px solid green;
}

CSS Forms
Styling Input Fields
Use the width property to determine the width of the input field:

input {
width: 100%;
}

specific input type, you can use attribute selectors:

 input[type=text] - will only select text fields

 input[type=password] - will only select password fields
 input[type=number] - will only select number fields
 etc..

Padded Inputs
Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin, to add
more space outside of them:

input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}

Bordered Inputs
Use the border property to change the border size and color, and use the border-radius property to add
rounded corners:

input[type=text] {
border: 2px solid red;
 border-radius: 4px;
}

CSS Border Images

With the CSS border-image property, you can set an image to be used as the border around an element.

CSS border-image Property

The CSS border-image property allows you to specify an image to be used instead of the normal
border around an element.

The property has three parts:

1. The image to use as the border

2. Where to slice the image

#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}