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

p {
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

· 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
outline	A shorthand property for setting outline-width, outline-style, and outline-color in one declaration
outline-color	Sets the color of an outline
outline-offset	Specifies the space between an outline and the edge or border of an element
outline-style	Sets the style of an outline
outline-width	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

Bootstrap Icons

Google 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
bottom	Sets the bottom margin edge for a positioned box
clip	Clips an absolutely positioned element
left	Sets the left margin edge for a positioned box
position	Specifies the type of positioning for an element
right	Sets the right margin edge for a positioned box
top	Sets the top margin edge for a positioned box
z-index	Sets the stack order of an element

There are five different position values:

static
relative
fixed
absolute
sticky

⟰⬆￪⇧↿↾↑↟⇈

Overflow

Property	Description
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

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

⟰⬆￪⇧↿↾↑↟⇈
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
content	Used with the ::before and ::after pseudo-elements, to insert generated content
counter-increment	Increments one or more counter values
counter-reset	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) " ";
}

⟰⬆￪⇧↿↾↑↟⇈

Website Layout

⟰⬆￪⇧↿↾↑↟⇈

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

⟰⬆￪⇧↿↾↑↟⇈

AI Stha

CSS: Cascading Style Sheets

No comments

Search

Facebook

Follow us

Popular Posts

Random Posts

Categories

Popular Posts

Introduction	Syntax	How To	Colors
Backgrounds	Borders	Margins	Padding
Height/Width	Box Model	Outline	Text
Fonts	Icon	Links	Lists
Tables	Display	Max-Width	Position
Overflow	Float	Inline-Block	Align
Combinators	Pseudo-Class	Pseudo-Elements	Opacity
Navigation-Bar	Dropdowns	Image Gallary	Image Sprites
Attr Selectors	Forms	Counters	Website Layout
Units	Specificity