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
- 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
- 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
- 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
- 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 |
---|---|
|
1. Selects all SPAN elements. 2. Apply color and font weight properties to selected SPAN elements. |
|
1. Selects all elements where CSS class (‘group-one’) is attached. 2. Apply color and font size properties to selected elements. |
|
1. Selects element with ID = ‘item-one’. 2. Apply font weight, color and background color properties to selected elements. |
|
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! |