What is CSS?

CSS (Cascading Style Sheet) is a layered stylesheet language used to create layouts, decorations, set background colors, text colors, sizes... for web pages.

Why learn CCS?

Without CSS, every web page would be drab plain text and images that flowed straight down the page. With CSS, you can add color and background images and change the layout of your page — your web pages can feel like works of art!

How To Add CSS?

Write CSS in Separate Files

Write CSS in Separate Files

  • CSS code can be written in its own files to keep it separate from the HTML code. The extension for CSS files is .css. These can be linked to an HTML file using a <link> tag in the <head> section.

Write CSS in HTML File

Write CSS in HTML File

  • CSS code can be written in an HTML file by enclosing the code in <style> tags. Code surrounded by <style> tags will be interpreted as CSS syntax.

Inline Styles

Inline Styles

  • CSS styles can be directly added to HTML elements by using the style attribute in the element’s opening tag. Each style declaration is ended with a semicolon. Styles added in this manner are known as inline styles.

Basic Selectors

CSS Structure

  • Selectors : Are learned HTML tags like div, h2, body, span, a, or class (starts with a dot like .heading, .item, .header), or id (starts with a # as #header, #container...)
  • Property : These are the CSS properties that we will learn next
  • Value : Is the corresponding value of Property

Example:

CSS style Meaning 
span {
 color:red;
 font-weight:bold;
 }

1. Selects all SPAN elements.

2. Apply color and font weight properties to selected SPAN elements.

 
.group-one {
 color:green;
 font-size:large;
 }

1. Selects all elements where CSS class (‘group-one’) is attached.

2. Apply color and font size properties to selected elements.

 
#item-one {
 font-weight:bold;
 color:white;
 background-color:blue;
 }

1. Selects element with ID = ‘item-one’.

2. Apply font weight, color and background color properties to selected elements.

 
div p {
 font-weight:bold;
 color:green;
 }

1. Select all P elements under the DIV elements.

2. Apply font weight and color properties to selected elements.

Following table shows different CSS Selectors.

Name Selector Description Example
Universal Selector
 * Selects all child elements under the parent element. *{color:blue;}
Class Selectors
 .ClassName Selects specified CSS class (.ClassName) applied elements on the page. .divClass {color:blue;}
ID Selectors
 #id Selects element which has specified ID (#id) name. #name{color:blue;}
Element Selectors
 Element Selects elements based on element type. p{color:blue;}
Descendant Selectors
 Element1 Element2 Selects all specified descendant child elements (Element2) under the parent element (Element1). div p{color:blue;}
Child Selectors
 Elemente1 > Element2 Selects all specified immediate child elements (Element2) under the parent element (Element1). div > p{color:blue;}
pseudo-classes Element:link Selects unvisited link elements. a:link{color:blue;}
pseudo-classes Element:visited Selects visited link elements. a:visited{color:yellow;}
pseudo-classes Element:active Selects active link elements. a:active{color:blue;}
pseudo-classes Element:hover Selects element when mouse over it. a:hover{color:green;}
pseudo-classes Element:focus Selects element when focus on it. p:focus{color:blue;}
Adjacent Sibling Selectors
 Element1 + Element2 Selects specified elements (Element2) which are immediate to an adjacent element (Element1). div + p{color: green;}
General Sibling Selectors
 Element1 ~ Element2 Selects all specified elements (Element2) which are siblings to an adjacent element (Element1). div ~ p {color: green;}
Attribute Selectors
 Element[attribute] Selects elements which have specified attribute. a[title] {color: red;}
Attribute Selectors
 Element[attribute = value] Selects elements which have specified attribute and attribute value. a[title = “first”]
Attribute Selectors
 Element[attribute ~= value Selects elements which have specified attribute and value contains specified word. a[title ~= “first”]
Attribute Selectors
 Element[attribute |= value] Selects elements which have specified attribute and attribute value. Attribute value can have exactly equal to specified value or specified value immediately followed by “-“(hyphen). a[title |= “first”]
Attribute Selectors
 Element[attribute ^= value] Selects elements which have specified attribute and attribute value starts with specified value. a[title ^= “first”]
Attribute Selectors
 Element[attribute $= value] Selects element which have specified attribute and attribute value ends with specified value. a[title $= “link”]
Attribute Selectors
 Element[attribute *= value] Selects element which have specified attribute and attribute value contains specified value. a[title *= “section”]

Basic Properties

Text Properties

Property Description Values
color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between lines normal, number, length, %
letter-spacing Increase or decrease the space between characters normal, length
text-align Aligns the text in an element left, right, center, justify
text-decoration Adds decoration to text none, underline, overline, line-through
text-indent Indents the first line of text in an element length, %
text-transform Controls the letters in an element none, capitalize, uppercase, lowercase

List Properties

Property Description Values
list-style Sets all the properties for a list in one declaration list-style-type, list-style-position, list-style-image, inherit
list-style-image Specifies an image as the list-item marker URL, none, inherit
list-style-position Specifies where to place the list-item marker inside, outside, inherit
list-style-type Specifies the type of list-item marker none, disc, circle, square, decimal, decimal-leading-zero,
armenian, georgian, lower-alpha, upper-alpha, lower-greek,
lower-latin, upper-latin, lower-roman, upper-roman, inherit

Border Properties

Property Description Values
border Sets all the border properties in one declaration border-width, border-style, border-color
border-bottom Sets all the bottom border properties in one declaration border-bottom-width, border-bottom-style, border-bottom-color
border-bottom-color Sets the color of the bottom border border-color
border-bottom-style Sets the style of the bottom border border-style
border-bottom-width Sets the width of the bottom border border-width
border-color Sets the color of the four borders color_name, hex_number, rgb_number, transparent, inherit
border-left Sets all the left border properties in one declaration border-left-width, border-left-style, border-left-color
border-left-color Sets the color of the left border border-color
border-left-style Sets the style of the left border border-style
border-left-width Sets the width of the left border border-width
border-right Sets all the right border properties in one declaration border-right-width, border-right-style, border-right-color
border-right-color Sets the color of the right border border-color
border-right-style Sets the style of the right border border-style
border-right-width Sets the width of the right border border-width
border-style Sets the style of the four borders none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit
border-top Sets all the top border properties in one declaration border-top-width, border-top-style, border-top-color
border-top-color Sets the color of the top border border-color
border-top-style Sets the style of the top border border-style
border-top-width Sets the width of the top border border-width
border-width Sets the width of the four borders thin, medium, thick, length, inherit

Font Properties

Property Description Values
font Sets all the font properties in one declaration font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar, inherit
font-family Specifies the font family for text family-name, generic-family, inherit
font-size Specifies the font size of text xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %, inherit
font-style Specifies the font style for text normal, italic, oblique, inherit
font-variant Specifies whether or not a text should be displayed in a small-caps font normal, small-caps, inherit
font-weight Specifies the weight of a font normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
Careful, many of these are not supported!