CSS

CSS:  Cascading Style Sheets

Basic:






Introduction


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

⟰⬆↑⇧↿↾↑↟⇈
Syntax


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


  selector { property:value; property:value }
                    declaration           declaration


The element Selector
{
    text-align
: center;
    color
: red;
}

The id Selector
#para1 {
    text-align
: center;
    color
: red;
}

The class Selector
.center {
    text-align: center;
    color
: red;
}
p.center {
    text-align
: center;
    color
: red;
}

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

CSS Comments
/* This is a single-line comment */


/* This is
a multi-line
comment */

⟰⬆↑⇧↿↾↑↟⇈
How To


Ways to Insert CSS
·         External style sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
·         Internal style sheet
<head>
<style>
body 
{
    background-color
: linen;
}

h1 
{
    color
: maroon;
    margin-left
: 40px;
}
</style>
</head>
·         Inline style
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
  
Cascading Order
  • Inline style (inside an HTML element)
  • External and internal style sheets (in the head section)
  • Browser default


⟰⬆↑⇧↿↾↑↟⇈
Colors


Color Names: red, blue, green, yellow, orange
Background Color: <tagname style=”background-color:color_name;”></tagname>
Text Color: <tagname style=” color:color_name;”></tagname>
Border Color: <tagname style=” border: ?px solid/?  color_name;”></tagname>
Color Values:
RGB Value: rgb(red, green, blue) 
HEX Value: #rrggbb
HSL Value: hsl(hue, saturation, lightness)
RGBA Value: rgba(red, green, blue, alpha)

HSLA Value: hsla(hue, saturation, lightness, alpha)

⟰⬆↑⇧↿↾↑↟⇈
Backgrounds


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

CSS background properties:

·         background-color
background-color: lightblue;
·         background-image
background-image: url("paper.gif");
·         background-repeat
background-image: url("gradient_bg.png");
background-repeat
: repeat-x;
·         background-attachment
background-attachment: fixed;
·         background-position

background-position: right top;


Property
Description
background
Sets all the background properties in one declaration
background-attachment
Sets whether a background image is fixed or scrolls with the rest of the page
background-clip
Specifies the painting area of the background
background-color
Sets the background color of an element
background-image
Sets the background image for an element
background-origin
Specifies where the background image(s) is/are positioned
background-position
Sets the starting position of a background image
background-repeat
Sets how a background image will be repeated
background-size
Specifies the size of the background image(s)

⟰⬆↑⇧↿↾↑↟⇈
Borders


Property
Description
border
Sets all the border properties in one declaration
border-color
Sets the color of the four borders
border-radius
Sets all the four border-*-radius properties for rounded corners
border-style
Sets the style of the four borders
border-width
Sets the width of the four borders
border-top/bottom/left/right
Sets all the t/b/l/r  border properties in one declaration
border-t/b/l/r-color
Sets the color of the t/b/l/r  border
border- t/b/l/r -style
Sets the style of the t/b/l/r  border
border- t/b/l/r -width
Sets the width of the t/b/l/r  border

⟰⬆↑⇧↿↾↑↟⇈
Margins


Property
Description
margin
A shorthand property for setting the margin properties in one declaration
margin-bottom
Sets the bottom margin of an element
margin-left
Sets the left margin of an element
margin-right
Sets the right margin of an element
margin-top
Sets the top margin of an element


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: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px



⟰⬆↑⇧↿↾↑↟⇈
Padding


Property
Description
padding
A shorthand property for setting all the padding properties in one declaration
padding-bottom
Sets the bottom padding of an element
padding-left
Sets the left padding of an element
padding-right
Sets the right padding of an element
padding-top
Sets the top padding of an element


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
·         padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px




⟰⬆↑⇧↿↾↑↟⇈
Height/Width


Property
Description
height
Sets the height of an element
max-height
Sets the maximum height of an element
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 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.


⟰⬆↑⇧↿↾↑↟⇈
Box Model


·         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

div {

    height: 400px;
    width
: 300px;
    border
: 25px solid green;
    padding
: 25px;
    margin
: 25px;
}

⟰⬆↑⇧↿↾↑↟⇈
Outline


Property
Description
A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
Sets the color of an outline
Specifies the space between an outline and the edge or border of an element
Sets the style of an outline
Sets the width of an outline


The outline-style property specifies the style of the outline, and can have one of the following values:
·         dotted - Defines a dotted outline
·         dashed - Defines a dashed outline
·         solid - Defines a solid outline
·         double - Defines a double outline
·         groove - Defines a 3D grooved outline
·         ridge - Defines a 3D ridged outline
·         inset - Defines a 3D inset outline
·         outset - Defines a 3D outset outline
·         none - Defines no outline
·         hidden - Defines a hidden outline

Outline Color
·         name - specify a color name, like "red"
·         RGB - specify a RGB value, like "rgb(255,0,0)"
·         Hex - specify a hex value, like "#ff0000"
·         invert - performs a color inversion
Outline Width
·         thin (typically 1px)
·         medium (typically 3px)
·         thick (typically 5px)
·         A specific size (in px, pt, cm, em, etc)



⟰⬆↑⇧↿↾↑↟⇈
Text


Property
Description
color
Sets the color of text
direction
Specifies the text direction/writing direction
letter-spacing
Increases or decreases the space between characters in a text
line-height
Sets the line height
text-align
Specifies the horizontal alignment of text
text-decoration
Specifies the decoration added to text
text-indent
Specifies the indentation of the first line in a text-block
text-shadow
Specifies the shadow effect added to text
text-transform
Controls the capitalization of text
text-overflow
Specifies how overflowed content that is not displayed should be signaled to the user
unicode-bidi
Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align
Sets the vertical alignment of an element
white-space
Specifies how white-space inside an element is handled
word-spacing
Increases or decreases the space between words in a text

⟰⬆↑⇧↿↾↑↟⇈
Fonts


Property
Description
font
Sets all the font properties in one declaration
font-family
Specifies the font family for text
font-size
Specifies the font size of text
font-style
Specifies the font style for text
font-variant
Specifies whether or not a text should be displayed in a small-caps font
font-weight
Specifies the weight of a font

⟰⬆↑⇧↿↾↑↟⇈
Icon


Font Awesome Icons
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Bootstrap Icons
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Google Icons

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

⟰⬆↑⇧↿↾↑↟⇈
Links


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
/* unvisited link */
a:link 
{
    color
: red;
    text-decoration: none;
    background-color: yellow;
}

/* visited link */
a:visited 
{
    color
: green;
    text-decoration: none;
    background-color: cyan;
}

/* mouse over link */
a:hover 
{
    color
: hotpink;
    text-decoration: underline;
    background-color: lightgreen;
}

/* selected link */
a:active 
{
    color
: blue;
    text-decoration: underline;

    background-color: hotpink;
}

⟰⬆↑⇧↿↾↑↟⇈
Lists


Property
Description
list-style
Sets all the properties for a list in one declaration
list-style-image
Specifies an image as the list-item marker
list-style-position
Specifies the position of the list-item markers (bullet points)
list-style-type
Specifies the type of list-item marker

⟰⬆↑⇧↿↾↑↟⇈
Tables


Property
Description
border
Sets all the border properties in one declaration
border-collapse
Specifies whether or not table borders should be collapsed
border-spacing
Specifies the distance between the borders of adjacent cells
caption-side
Specifies the placement of a table caption
empty-cells
Specifies whether or not to display borders and background on empty cells in a table
table-layout
Sets the layout algorithm to be used for a table

⟰⬆↑⇧↿↾↑↟⇈
Display


Property
Description
display
Specifies how an element should be displayed
visibility
Specifies whether or not an element should be visible

⟰⬆↑⇧↿↾↑↟⇈
Max-Width


div.ex1 {
    width
: 500px;
    margin
: auto;
    border
: 3px solid #73AD21;
}

⟰⬆↑⇧↿↾↑↟⇈
Position


Property
Description
Sets the bottom margin edge for a positioned box
Clips an absolutely positioned element
Sets the left margin edge for a positioned box
Specifies the type of positioning for an element
Sets the right margin edge for a positioned box
Sets the top margin edge for a positioned box
Sets the stack order of an element

There are five different position values:
  • static
  • relative
  • fixed
  • absolute
  • sticky

⟰⬆↑⇧↿↾↑↟⇈
Overflow


Property
Description
Specifies what happens if content overflows an element's box
Specifies what to do with the left/right edges of the content if it overflows the element's content area
Specifies what to do with the top/bottom edges of the content if it overflows the element's content area

The overflow property has the following values:
  • visible - Default. The overflow is not clipped. It renders outside the element's box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content
  • auto - If overflow is clipped, a scrollbar should be added to see the rest of the content



⟰⬆↑⇧↿↾↑↟⇈

Float


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
The clear property can have one of the following values:
  • none - Allows floating elements on both sides. This is default
  • left - No floating elements allowed on the left side
  • right- No floating elements allowed on the right side
  • both - No floating elements allowed on either the left or the right side
  • inherit - The element inherits the clear value of its parent


Property
Description
box-sizing
Defines how the width and height of an element are calculated: should they include padding and borders, or not
clear
Specifies what elements can float beside the cleared element and on which side
float
Specifies how an element should float
overflow
Specifies what happens if content overflows an element's box
overflow-x
Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y
Specifies what to do with the top/bottom edges of the content if it overflows the element's content area


⟰⬆↑⇧↿↾↑↟⇈
Inline-Block


Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

display: inline-block;


⟰⬆↑⇧↿↾↑↟⇈
Align


Center Align Elements
.center {
    margin
: auto;
    width
: 50%;
    border
: 3px solid green;
    padding
: 10px;
}
Center Align Text
.center {
    text-align
: center;
    border
: 3px solid green;
}
Center an Image
img {
    display
: block;
    margin-left
: auto;
    margin-right
: auto;
    width
: 40%;
}
Left and Right Align - Using position
.right {
    position
: absolute;
    right
: 0px;
    width
: 300px;
    border
: 3px solid #73AD21;
    padding
: 10px;
}
Left and Right Align - Using float
.right {
    float
: right;
    width
: 300px;
    border
: 3px solid #73AD21;
    padding
: 10px;
}
The clearfix Hack
.clearfix {
    overflow
: auto;
}
Center Vertically - Using padding
.center {
    padding
: 70px 0;
    border
: 3px solid green;
}
Center Vertically - Using line-height
.center {
    line-height
: 200px;
    height
: 200px;
    border
: 3px solid green;
    text-align
: center;
}
Center Vertically - Using position & transform

.center {
    height
: 200px;
    position
: relative;
    border
: 3px solid green;
}

.center p 
{
    margin
: 0;
    position
: absolute;
    top
: 50%;
    left
: 50%;
    transform
: translate(-50%, -50%);
}


⟰⬆↑⇧↿↾↑↟⇈
Combinators


There are four different combinators in CSS:
  • descendant selector (space)
div p {
    background-color
: yellow;
}
  • child selector (>)
div > p {
    background-color
: yellow;
}
  • adjacent sibling selector (+)
div + p {
    background-color
: yellow;
}
  • general sibling selector (~)
div ~ p {
    background-color
: yellow;
}



⟰⬆↑⇧↿↾↑↟⇈
Pseudo-Class


A pseudo-class is used to define a special state of an element.
For example, it can be used to:
  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus


Selector
Example
Example description
:active
a:active
Selects the active link
:checked
input:checked
Selects every checked <input> element
:disabled
input:disabled
Selects every disabled <input> element
:empty
p:empty
Selects every <p> element that has no children
:enabled
input:enabled
Selects every enabled <input> element
:first-child
p:first-child
Selects every <p> elements that is the first child of its parent
:first-of-type
p:first-of-type
Selects every <p> element that is the first <p> element of its parent
:focus
input:focus
Selects the <input> element that has focus
:hover
a:hover
Selects links on mouse over
:in-range
input:in-range
Selects <input> elements with a value within a specified range
:invalid
input:invalid
Selects all <input> elements with an invalid value
:lang(language)
p:lang(it)
Selects every <p> element with a lang attribute value starting with "it"
:last-child
p:last-child
Selects every <p> elements that is the last child of its parent
:last-of-type
p:last-of-type
Selects every <p> element that is the last <p> element of its parent
:link
a:link
Selects all unvisited links
:not(selector)
:not(p)
Selects every element that is not a <p> element
:nth-child(n)
p:nth-child(2)
Selects every <p> element that is the second child of its parent
:nth-last-child(n)
p:nth-last-child(2)
Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)
p:nth-last-of-type(2)
Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)
p:nth-of-type(2)
Selects every <p> element that is the second <p> element of its parent
:only-of-type
p:only-of-type
Selects every <p> element that is the only <p> element of its parent
:only-child
p:only-child
Selects every <p> element that is the only child of its parent
:optional
input:optional
Selects <input> elements with no "required" attribute
:out-of-range
input:out-of-range
Selects <input> elements with a value outside a specified range
:read-only
input:read-only
Selects <input> elements with a "readonly" attribute specified
:read-write
input:read-write
Selects <input> elements with no "readonly" attribute
:required
input:required
Selects <input> elements with a "required" attribute specified
:root
root
Selects the document's root element
:target
#news:target
Selects the current active #news element (clicked on a URL containing that anchor name)
:valid
input:valid
Selects all <input> elements with a valid value
:visited
a:visited
Selects all visited links


⟰⬆↑⇧↿↾↑↟⇈
Pseudo-Elements


A CSS pseudo-element is used to style specified parts of an element.
For example, it can be used to:
  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element

Selector
Example
Example description
::after
p::after
Insert something after the content of each <p> element
::before
p::before
Insert something before the content of each <p> element
::first-letter
p::first-letter
Selects the first letter of each <p> element
::first-line
p::first-line
Selects the first line of each <p> element
::selection
p::selection
Selects the portion of an element that is selected by a user

⟰⬆↑⇧↿↾↑↟⇈
Opacity


The opacity property specifies the opacity/transparency of an element.
Transparent Image
img {
    opacity
: 0.5;
    filter
: alpha(opacity=50); /* For IE8 and earlier */
}
Transparent Hover Effect
img {
    opacity
: 0.5;
    filter
: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover 
{
    opacity
: 1.0;
    filter
: alpha(opacity=100); /* For IE8 and earlier */
}
Transparent Box
div {
    opacity
: 0.3;
    filter
: alpha(opacity=30); /* For IE8 and earlier */
}
Transparency using RGBA
div {
    background
: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

⟰⬆↑⇧↿↾↑↟⇈
Navigation-Bar


A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:
<ul>
  
<li><a href="default.asp">Home</a></li>
  
<li><a href="news.asp">News</a></li>
  
<li><a href="contact.asp">Contact</a></li>
  
<li><a href="about.asp">About</a></li>
</ul>

  • list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
  • Set margin: 0; and padding: 0; to remove browser default settings
  • display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
  • width: 60px; - Block elements take up the full width available by default. We want to specify a 60 pixels width
·         Add text-align:center to <li> or <a> to center the links.
·         Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:
  • display: inline; - By default, <li> elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line
  • float: left; - use float to get block elements to slide next to each other
  • display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
  • padding: 8px; - Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good
  • background-color: #dddddd; - Add a gray background-color to each a element



⟰⬆↑⇧↿↾↑↟⇈
Dropdowns


Dropdown Menu

<style>
/* Style The Dropdown Button */
.dropbtn 
{
    background-color
: #4CAF50;
    color
: white;
    padding
: 16px;
    font-size
: 16px;
    border
: none;
    cursor
: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown 
{
    position
: relative;
    display
: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content 
{
    display
: none;
    position
: absolute;
    background-color
: #f9f9f9;
    min-width
: 160px;
    box-shadow
: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index
: 1;
}

/* Links inside the dropdown */
.dropdown-content a 
{
    color
: black;
    padding
: 12px 16px;
    text-decoration
: none;
    display
: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover 
{background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content 
{
    display
: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn 
{
    background-color
: #3e8e41;
}
</style>

<div class="dropdown">
  
<button class="dropbtn">Dropdown</button>
  
<div class="dropdown-content">
    
<a href="#">Link 1</a>
    
<a href="#">Link 2</a>
    
<a href="#">Link 3</a>
  
</div>
</div>

⟰⬆↑⇧↿↾↑↟⇈
Image 
Gallary


<html>
<head>
<style>
div.gallery 
{
    margin
: 5px;
    border
: 1px solid #ccc;
    float
: left;
    width
: 180px;
}

div.gallery:hover 
{
    border
: 1px solid #777;
}

div.gallery img 
{
    width
: 100%;
    height
: auto;
}

div.desc 
{
    padding
: 15px;
    text-align
: center;
}
</style>
</head>
<body>

<div class="gallery">
  
<a target="_blank" href="fjords.jpg">
    
<img src="5terre.jpg" alt="Cinque Terre" width="300" height="200">
  
</a>
  
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

⟰⬆↑⇧↿↾↑↟⇈
Image Sprites


An image sprite is a collection of images put into a single image.
A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

⟰⬆↑⇧↿↾↑↟⇈
Attr Selectors


·         CSS [attribute] Selector
a[target] {
    background-color
: yellow;
}
·         CSS [attribute="value"] Selector
a[target="_blank"] {
    background-color
: yellow;
}
·         CSS [attribute~="value"] Selector
[title~="flower"] {
    border
: 5px solid yellow;
}
·         CSS [attribute|="value"] Selector
[class|="top"] {
    background
: yellow;
}
·         CSS [attribute^="value"] Selector
[class^="top"] {
    background
: yellow;
}
·         CSS [attribute$="value"] Selector
[class$="test"] {
    background
: yellow;
}
·         CSS [attribute*="value"] Selector
[class*="te"] {
    background
: yellow;
}


⟰⬆↑⇧↿↾↑↟⇈
Forms


·         Styling Input Fields
input { width: 100%; }
§  input[type=text] - will only select text fields
§  input[type=password] - will only select password fields
§  input[type=number] - will only select number fields

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

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

·         Colored Inputs

input[type=text] {
    background-color
: #3CBC8D;
    color
: white;
}

·         Focused Inputs

input[type=text]:focus {
    background-color
: lightblue;
}

input[type=text]:focus {
    border
: 3px solid #555;
}

·         Input with icon/image

input[type=text] {
    background-color
: white;
    background-image
: url('searchicon.png');
    background-position
: 10px 10px;
    background-repeat
: no-repeat;
    padding-left
: 40px;
}

·         Animated Search Input

input[type=text] {
    -webkit-transition
: width 0.4s ease-in-out;
    transition
: width 0.4s ease-in-out;
}

input[type=text]:focus 
{
    width
: 100%;
}

·         Styling Textareas

textarea {
    width
: 100%;
    height
: 150px;
    padding
: 12px 20px;
    box-sizing
: border-box;
    border
: 2px solid #ccc;
    border-radius
: 4px;
    background-color
: #f8f8f8;
    resize
: none;
}

·         Styling Select Menus


select {
    width
: 100%;
    padding
: 16px 20px;
    border
: none;
    border-radius
: 4px;
    background-color
: #f1f1f1;
}

⟰⬆↑⇧↿↾↑↟⇈
Counters


Property
Description
Used with the ::before and ::after pseudo-elements, to insert generated content
Increments one or more counter values
Creates or resets one or more counters

·         Automatic Numbering With Counters

body {
    counter-reset
: section;
}

h2::before 
{
    counter-increment
: section;
    content
: "Section " counter(section) ": ";
}

·         Nesting Counters

body {
    counter-reset
: section;
}

h1 
{
    counter-reset
: subsection;
}

h1::before 
{
    counter-increment
: section;
    content
: "Section " counter(section) ". ";
}

h2::before 
{
    counter-increment
: subsection;
    content
: counter(section) "." counter(subsection) " ";
}




⟰⬆↑⇧↿↾↑↟⇈
Units


Unit
Description       
cm
centimeters
mm
millimeters
in
inches (1in = 96px = 2.54cm)
px *
pixels (1px = 1/96th of 1in)
pt
points (1pt = 1/72 of 1in)
pc
picas (1pc = 12 pt)
em
Relative to the font-size of the element (2em means 2 times the size of the current font
ex
Relative to the x-height of the current font (rarely used)
ch
Relative to width of the "0" (zero)
rem
Relative to font-size of the root element
vw
Relative to 1% of the width of the viewport*
vh
Relative to 1% of the height of the viewport*
vmin
Relative to 1% of viewport's* smaller dimension
vmax
Relative to 1% of viewport's* larger dimension
%
Relative to the parent element




















⟰⬆↑⇧↿↾↑↟⇈
Specificity


If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
There are four categories which define the specificity level of a selector:
Inline styles - An inline style is attached directly to the element to be styled. 
Example: <h1 style="color: #ffffff;">.
IDs - An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.


·         Equal specificity: the latest rule counts

h1 {background-color: yellow;}
h1 
{background-color: red;}

·         ID selectors have a higher specificity than attribute selectors

div#a {background-color: green;}
#a 
{background-color: yellow;}
div[id=a] 
{background-color: blue;}

·         Contextual selectors are more specific than a single element selector

From external CSS file:
#content h1 
{background-color: red;}

In HTML file:
<style>
#content h1 
{
    background-color
: yellow;
}
</style>

·         A class selector beats any number of element selectors 

.intro {background-color: yellow;}
h1 
{background-color: red;}


·         The universal selector and inherited values have a specificity of 0


⟰⬆↑⇧↿↾↑↟⇈




1 comment: