CSS

CSS

Cascading Style Sheet (CSS) is a style sheet language used for presentation of the document written i a markup language like HTML. CSS is designed to diferenciate the presentation and content, including layout, colors and fonts. This dieefences improves the content accessibility, provide more flexibilty and controls the specification of presentation characteristics, joins multiple web pages to formatting the relevant CSS in a seperate, css file.

CSS Color

Border color

<h1 style="border:2px solid Tomato;">Welcome World</h1>

<h1 style="border:2px solid DodgerBlue;">Welcome World</h1>

<h1 style="border:2px solid Violet;">Welcome World</h1>

Color value

RGB Value

RGB defines as red, green, blue and shows out the intensity of the color 0 to 225.

HEX Value

#rrggbb

rr(red), gg(green), bb(blue) are hexadecimal value between 00 to ff.

HSL Value

HSL(hue, saturation, lightness)

hue is degree of color, saturation the percentage value, light is also percentage

Hue

RGBA Value

RGBA(red, green, blue, alpha)

They are extension of RGB color value.

HSLA Value

HSLA(hue, saturation, lightness, alpha)

They are extension of HSL color value.

CSS Backgrounds

Background color

the <h1>, <p>, and <div> elements have different background colors:

h1 {
background-color: green;}

div {
background-color: lightblue;}

p {
background-color: yellow;

}

Background-image

Background-image property allows an image to use as the background image of an element.

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

}

Background image- Repeat horizontally or vertically

If images should be repeated only horizontally or vertically, or they will look strange, like this:

body {

If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

body {

Background image- Set position and no-repeat

Background image only once is also specified by the background-repeat property:

body {

Here, We want to change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;}

Background image- Fixed position

If the background image should be fixed, use the background-attachmentproperty:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;}

Background image- Shorthand

To short the code, it is also to consider all the background properties at a single property. This is named as shorthand property.

The shorthand property for background is background.

body {
    background: #ffffff url("img_tree.png") no-repeat right top;}

CSS Border properties

CSS border property allows you to judge the style, width, and color of an element's border.

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border

p.dotted {border-style: dotted;}

dashed - Defines a dashed border

p.dashed {border-style: dashed;}

solid - Defines a solid border

p.solid {border-style: solid;}

double - Defines a double border

p.double {border-style: double;}

groove - Defines a 3D grooved border. The effect depends on the border-color value.

p.groove {border-style: groove;}

ridge - Defines a 3D ridged border. The effect depends on the border-color value

p.ridge {border-style: ridge;}

inset - Defines a 3D inset border. The effect depends on the border-color value.

p.inset {border-style: inset;}

outset - Defines a 3D outset border. The effect depends on the border-color value

p.outset {border-style: outset;}

none - Defines no border

p.none {border-style: none;}

hidden - Defines a hidden border.

p.hidden {border-style: hidden;}

p.mix {border-style: dotted dashed solid double;}

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Border Width

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

Border color

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

Border- shorthand property

border property is a shorthand property for following single property;

p {
    border: 5px solid red;}

Rounded borders

border-radius is used to add rounded borders to an element.

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

CSS Margins

margin-top
margin-bottom
margin-left
margin-right

margin: 25px 50px 75px 100px;

top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px

p {
margin: 25px 50px 75px 100px;}

margin: 25px 50px 75px;

top margin is 25px

right and left margins are 50px

bottom margin is 75px

p {
margin: 25px 50px 75px;}

margin: 25px 50px;

top and bottom margins are 25px

right and left margins are 50px

p {
margin: 25px 50px;}

auto value used to center the element within its container.

margin: auto;

css padding

padding-top

padding-bottom

padding-left

padding-right

padding: 25px 50px 75px 100px;

top padding is 25px
right padding is 50px
bottom padding is 75px
left padding 100px

p {
padding: 25px 50px 75px 100px;}

padding: 25px 50px;

top and bottom margin: 25px 50px 75px;

top padding is 25px
right and left padding are 50px
bottom padding is 75px

p {
margin: 25px 50px 75px;}

margin: 25px 50px;

top and bottom padding are 25px

right and left padding are 50px

p {

margin: 25px 50px;}

CSS 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 {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0; }

CSS Outline

CSS has the following outline properties:

outline-style

outline-color

outline-width

outline-offset

outline

Outline-style

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

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

Outline-color

outline-color property is used to set the color of the outline.

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 (which ensures that the outline is visible, regardless of color background)

p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;}

Outline-width

outline-width property specifies the width of the outline, and can have one of the following values:

thin (typically 1px)
medium (typically 3px)
thick (typically 5px)
A specific size (in px, pt, cm, em, etc)

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
outline-width: thin;}

p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
  outline-width: medium;}

p.ex3 {
  border: 1px solid black;
outline-style: solid;
outline-color: red;
  outline-width: thick;}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
outline-color: red;
outline-width: 4px;}

Outline-shorthand property

outline property is a shorthand property for setting the following individual outline properties:

outline-width
outline-style (required)
outline-color

p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}

p.ex3 {outline: 5px solid yellow;}

p.ex4 {outline: thick ridge pink;}

Outline-offset

outline-offset property adds space between an outline and the edge/border of an element. The space between an element and its outline is transparent.

p {
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;}

CSS Text

Text color

color property is used to set the color of the text. The color is specified by:

a color name - like "red"
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"

body {
color: blue;}

Text alignment

text-align property is used to set the horizontal alignment of a text.

h1 {
text-align: center;}

h2 {
text-align: left;}

h3 {
text-align: right;}

Text decoration

text-decoration property is used to set or remove decorations from text.

a {
text-decoration: none;}

text-decoration values are used to decorate text:

h1 {
text-decoration: overline;}

h2 {
text-decoration: line-through;}

h3 {
text-decoration: underline;}

Text transformation

text-transform property is used to specify uppercase and lowercase letters in a text.

p.uppercase {
  text-transform: uppercase;}

p.lowercase {
  text-transform: lowercase;}

p.capitalize {
  text-transform: capitalize;}

Text indentation

text-indent property is used to specify the indentation of the first line of a text:

p {
text-indent: 50px;}

Letter spacing

letter-spacing property is used to specify the space between the characters in a text.

h1 {
letter-spacing: 3px;}

Line-height

line-height property is used to specify the space between lines:

p.small {
line-height: 0.8;}

Text direction

direction property is used to change the text direction of an element:

p {
direction: rtl;}

Word spacing

word-spacing property is used to specify the space between the words in a text.

h2 {
word-spacing: -5px;}

Text shadow

text-shadow property adds shadow to text.

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

css fonts

font family of a text is set with the font-family property.

p {
font-family: "Times New Roman", Times, serif;}

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.normal {
font-style: normal;}

p.italic {
font-style: italic;}

p.oblique {
font-style: oblique;}

font-size property sets the size of the text.

h1 {
font-size: 40px;}

font-weight property specifies the weight of a font:

p.normal {
font-weight: normal;}

p.thick {
font-weight: bold;}

font-variant property specifies whether or not a text should be displayed in a small-caps font.

p.normal {
font-variant: normal;}

p.small {
font-variant: small-caps;}

CSS 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;}

/* visited link */
a:visited {
color: green;}

/* mouse over link */
a:hover {
color: hotpink;}

/* selected link */
a:active {
color: blue;}

CSS Lists

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;}

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

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

list-style-position property specifies the position of the list-item markers (bullet points).

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

list-style property is a shorthand property. It is used to set all the list properties in one declaration:

ul {
list-style: square inside url("sqpurple.gif");}

CSS Table

border-collapse property sets whether the table borders should be collapsed into a single border:

vertical-align property sets the vertical alignment (like top, bottom, or middle) of the content in <th> or <td>.

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

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

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

 border-bottom property to <th> and <td> for horizontal dividers:

th, td {
  border-bottom: 1px solid #ddd;}

CSS Position

position property specifies the type of positioning method used for an element.

There are five different position values:

static

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

div.static {
position: static;
border: 3px solid #73AD21;}

relative

position: relative; is positioned relative to its normal position.

div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;}

fixed

position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;}

absolute

position: absolute; is positioned relative to the nearest positioned ancestor

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;}

sticky

position: sticky; is positioned based on the user's scroll position;

div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;}

z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;}

life@uki4

No comments

Popular Posts

Tags

About Me