Selectors content

The information are for the beginner and also for those, who know something about CSS.
I try to describe everything as crearly as possible.

*SELECTOR - the name of an element in CSS and HTML code.
*CONTENT OF SELECTORS - it's a content that it's written into selectors to design an element.

I'll show you on the example of a square, which will be editing. It's obvious that the content of selectors can be added into every selector.

BACKGROUND
background color
There's a few possibilities to add the background color:
.page1 {background: #f16f9e;}
.page2 {background-color:#f16f9e;}
If there is only one color of a page, it's no difference if we add {background: #color;} or {background-color: #color;}
.page3 {background: pink;}
.page4 {background: #ddd;} (if in the value of color there are the same letters or numbers, we can shorten it into only three signs.)
page 1
page 2
page 3
page 4
BACKGROUND IMAGE
.page1 {background: url(http://funkyimg.com/i/Sc3B.jpg);}
.page2 {background-image: url(http://funkyimg.com/i/Sc3B.jpg);}
The same as with colors: if we add only background image, there's no difference if we use {background: url();} or {background-image: url();}
page 1
page 2
BACKGROUND COLOR AND BACKGROUND IMAGE
We can mix color and background image, but we need to be caferul to add two values like that: {background-image:url();} and {background-color: #color-name;}.
.page1 {background-image: url(http://funkyimg.com/i/HoxP.png);
background-color: #f16f9e;}

the second way:
.page1 {background-image: url(http://funkyimg.com/i/HoxP.png);
background: #f16f9e;}

page 1
SEVERAL BACKGROUND IMAGES
We can use it when we want to add the image only on the top or on the bottom of the element (we need to use background position, which is explained below) or if we want to apply several background images.
REMEMBER: THE IMAGE, WHICH IS FIRST, IS THE MOST VISIBLE AND OBSCURES THE REST BACKGROUNDS, SO THE ORDER IS IMPORTANT.
In the page 2 I applied the same values, but I positioned the background for you to see that two images are imposed on each other.
.page1 {background-image: url(http://funkyimg.com/i/GwJ8.png), url(http://funkyimg.com/i/Sc3B.jpg);}
page 1
page 2
BACKGROUND POSITION
We use this image: http://funkyimg.com/i/Srgg.png
.page1 {background-position: left top;}
.page2 {background-position: top;}
.page3 {background-position: left bottom;}
.page4 {background-position: right center;}
page 1
page 2
page 3
page 4

.page1 {background-position: 20px 40px;}
.page2 {background-position: -20px -10px;}
.page3 {background-position: 20px -10px;}
.page4 {background-position: -20px 40px;}
The first value with (+) moves our background in right, and with (-) in left (we don't have to add +);
The second value with (+) moves our background to the bottom, and with (-) to the top.
page 1
page 2
page 3
page 4
BACKGROUND REPEAT
We use this image again: http://funkyimg.com/i/Srgg.png
.page1 {background-repeat: repeat;}
.page2 {background-repeat: no-repeat;}
.page3 {background-repeat: repeat-y;}
.page4 {background-repeat: repeat-x;}
*the default value is {background-repeat: repeat;}
page 1
page 2
page 3
page 4
BACKGROUND ATTACHEMENT
I used the selector ".body", because we can use "background attachement" only in this selector (as I know, if I'm wrong, correct me). The code makes that the background scrolls with the page or stays fixed.
*the default value is {background-attachment: scroll;}
.body {background-attachment: fixed;}
.body {background-attachment: scroll;}
USE ALL VALUES TOGETHER
I'm going to show the code with using all background values together. You can change values as you want.
.page1{
background-image: url(http://funkyimg.com/i/Srgg.png), url(http://funkyimg.com/i/Sc3B.jpg);
background-repeat: no-repeat, repeat;
background-position: left bottom, center;}

I applied two background images, the first: http://funkyimg.com/i/Srgg.png and the second: http://funkyimg.com/i/Sc3B.jpg. The first isn't repeated, but the second is. The first image is in the left, bottom corner, the second is in the center.
page 1
BORDERS
BORDER STYLE
I advise not to mix a few border styles in one element, because blogspot displays it wrong and it doesn't look good.
.page1 {border-style: none;}
.page2 {border-style: hidden;}
.page3 {border-style: solid;}
.page4 {border-style: dotted;}
.page5 {border-style: dashed;}
.page6 {border-style: double;}
.page7 {border-style: groove;}
.page8 {border-style: ridge;}
.page9 {border-style: inset;}
.page10 {border-style: outset;}
page 1
page 2
page 3
page 4
page 5
page 6
page 7
page 8
page 9
page 10
BORDER COLOR
*the default border color is text color of the element.
.page1 {border-color: #d9bfc4;}
.page2 {border-color: grey;}
page 1
page 2
BORDER SIZE
.page1 {border-width: thin;}
.page2 {border-width: medium;}
.page3 {border-width: thick;}
.page4 {border-width: 1px;}
.page5 {border-width: 4px;}
.page6 {border-width: 9px;}
page 1
page 2
page 3

page 4
page 5
page 6
BORDERS OF INDIVIDUAL SIDES OF AN ELEMENT
I advise not to mix a few border styles in one element, because blogspot displays it wrong and it doesn't look good.
.page1 {border-bottom-style: solid;}
.page2 {border-top-style: solid;}
.page3 {border-right-style: solid;}
.page4 {border-left-style: solid;}
.page5 {border-style: solid;}
page 1
page 2
page 3
page 4
page 5
BORDER RADIUS
.page1 {border-radius: 50px;}
.page2 {border-radius: 50%;}
page 1
page 2
USE ALL BORDER VALUES TOGETHER
I'm going to show the code with using all border values together.
We've got two ways of using the values I've showen above.
You can change values as you want.
.page1{
border-style: solid;
border-color: #888;
border-width: 3px;}

Or the easier way:
.page2 {border: solid 2px #d9bfc4;}
page 1
page 2
TEXT
FONT FAMILY
.page1 {font-family:arial;}
.page2 {font-family:times new roman;}
page 1
page 2
TEXT COLOR
.page1 {color: white;}
.page2 {color: #888;}
page 1
page 2
TEXT ALIGN
.page1 {text-align: center;}
.page2 {text-align: left;}
.page3 {text-align: right;}
.page4 {text-align: justify;}
page 1
page 2
page 3

page 4 page 4 page 4
TEXT DECORATION
.page1 {text-decoration:none;}
.page2 {text-decoration:underline;}
.page3 {text-decoration:line-through;}
.page4 {text-decoration:overline;}
page 1
page 2
page 3
page 4
TEXT TRANSFORM
.page1 {text-transform:capitalize;}
.page2 {text-transform:uppercase;}
.page3 {text-transform:lowercase;}
page one
page two
page three

FONT STYLE
.page1 {font-style:normal;}
.page2 {font-style:italic;}
page 1
page 2
FONT SIZE
We can use pixels (px) or points (pt). There is a difference in both sizes.
.page1 {font-size:10px;}
.page2 {font-size:10pt;}
page 1
page 2
SPACING
1. Letter spacing;
2. Word spacing;
3. line spacing.
.page1 {letter-spacing: 3px;}
.page2 {word-spacing:30px;}
.page3 {line-height:180%;}
page one
page two page two
page three page three page three
USE ALL TEXT VALUES TOGETHER
I'm going to show the code with using all text values together.
You can change values as you want.
.page1 {color: #888;
font-family: times new roman;
text-align: center;
font-size: 10pt;
letter-spacing: 2px;
text-decoration:underline;
font-style:italic;
text-transform:lowercase;}

page 1
SHADOW
TEXT SHADOW
There's three pixels values. The last value is the shadow color.
1. The first value with (+) responds for moving shadow to the right, and with (-) to the left;
2. The second value with (+) responds for moving shadow to bottom, with (-) to top;
3. The third value responds for shadow dispersal. The value is higher, the shadow is more blurry.
.page1 {text-shadow: 0px 0px 10px #000;}
.page2 {text-shadow: 0px 0px 2px #000;}
.page3 {text-shadow: 5px 0px 5px #000;}
.page4 {text-shadow: -5px 0px 5px #000;}
.page5 {text-shadow: 0px -5px 5px #000;}
.page5 {text-shadow: 0px 5px 5px #000;}
page 1
page 2
page 3
page 4
page 5
page 6
AN ELEMENT SHADOW
There's three pixels values. The last value is the shadow color.
1. The first value with (+) responds for move shadow right, and with (-) in left;
2. The second value with (+) responds for move shadow to bottom, with (-) to top;
3. The third value responds for shadow dispersal. The value is higher, the shadow is more blurry.
.page1 {box-shadow: 0px 0px 10px #000;}
.page2 {box-shadow: 0px 0px 2px #000;}
.page3 {box-shadow: 5px 0px 5px #000;}
.page4 {box-shadow: -5px 0px 5px #000;}
.page5 {box-shadow: 0px -5px 5px #000;}
.page6 {box-shadow: 0px 5px 5px #000;}
.page7 {box-shadow: inset 0px 5px 5px #000;}
.page8 {box-shadow: inset -5px 0px 15px #000;}
Shadow which is inside the element works the same as outside shadows, but we need to add "inset" value before the rest of values. (page 8 and page 9)
page 1
page 2
page 3
page 4
page 5
page 6
page 7
page 8
USE ALL SHADOW VALUES TOGETHER
We can use shadows how much we want to, but we need to remember that shadow code has to be written in continuation and every next shadow we have to add after a comma, not in the new 'box shadow' section. It works with 'inset' and with 'outset' as well. I'm going to show it on two different examples, you can change values as you want.
.page1 {box-shadow: inset -5px 0px 2px #000, inset -15px 0px 2px #ddd, inset 0px 5px 2px #fff,inset -20px -5px 2px #888, inset -25px -5px 2px #000, inset -35px -5px 2px #fff, 0px 10px 3px #000;}
.page2 {box-shadow: inset 0px 3px 2px #ddd, inset 0px -3px 2px #fff, 20px -5px 2px #999, inset -25px -10px 2px #888, inset -35px -5px 2px #fff, 0px 10px 3px #000;}
How you can see - "inset" can be mixed with "outset" as long as you write it in a continuation of code, not in the new section.
page 1
page 2

Followers

Template made by Robyn Gleams