CSS CODES

What are CSS codes? (Cascading Style Sheets)

Css is a markup language used to style the Html pages we have prepared. As you know, pages created with Html are created without any style (except for the default Css values of the HTML tags). We need to write Css codes to improve the visibility of these pages, such as coloring, styling, etc.

Css stands for "Cascading Style Sheets". That is, more than one style can be given gradually to a label.

What are the Benefits of CSS for Us?

It offers the opportunity to make special changes for different browsers and devices of different sizes (Tablet, Mobile, etc.). Thus, your site shows compatibility for all sizes.

You can ensure regularity by keeping the CSS codes you will write in a single file. This makes it much easier to find a code or a line of code, both during construction and later on.

It allows us to attract more users by adding color, layout and flexibility to our site.

Instead of styling a tag (for example, all the p tags on the page) one by one, we can style all the p tags by opening a single tag with CSS.

In short, we can save time with CSS and move our site to the highest levels in terms of design and flexibility.

ALL CSS CODES

CSS LINK FEATURES

a : The state of the link before it is clicked or hovered when the page is opened.

a:hover : The state of the link when the cursor is hovered.

a:active : The state of the link at the time it was clicked.

a:visited : The status of the link after it is clicked.

CSS FORMATTING PROPERTIES

color: Sets the color of the link.

background-color: Sets the background color of the link.

background-image: Adds an image to the background of the link (This can also be animated-gif.)

text-decoration: Top, bottom, etc. of the link. Determines whether it is striped or not.

font-weight: Determines the thickness or thinness of the text.

border: Adds a border around the link.

display: The cell, row, etc. containing the link. Allows the desired area to be selected.

CSS LIST PROPERTIES

disk: Makes the list format as disk (filled circle).

circle : Makes the list form a circle.

square : Makes the list format square.

decimal : Allows the list format to consist of numbers.

lower-roman : Allows the list format to be made up of small roman numerals such as i, ii, iii.

upper-roman : Allows the list format to be composed of capital Roman numerals such as I,II,II.

lower-alpha : Makes the list format lower case a,b,c.

upper-alpha : Allows the list format to be capitalized as A,B,C.

none : Makes the list iconless.

inside : Makes the second line of the list start from the far left.

Outside : Makes the second line of the list start at the same place as the first line.

list-style-image : Makes the list format an image.

CSS LAYER PROPERTIES

position: Determines the location of the layer.

absolute: Allows the layer to be located based on the window.

relative: Allows the layer to be located based on the previous layer.

static: Allows the layer to be statically located (the default is the upper left corner).

top: Determines how far below the top the layer should be.

left: Determines how far inside the layer should be from the left.

width: Determines how wide the layer will be.

height: Determines the height of the layer.

overflow: Determines what happens to the part of the layer that does not fit the specified height and width.

auto: It is determined automatically.

scroll: Makes it appear by adding a scroll bar.

visible : Makes areas that don't fit appear by overlaying the layer beyond the specified dimensions.

hidden: Hides places that do not fit.

visibility: Sets the visibility of the layer.

visible : Makes the layer visible.

hidden: Hides the layer.

z-index : Determines the order in which the layers will be displayed from bottom to top. A value of 1 indicates that the layer will be at the bottom.

CSS FONT FEATURES

font-family: It determines the font type (such as Arial , Verdana.)

font-style: Allows the text to be normal or italicized.

font-variant: Allows the text to be normal or all capital letters.

font-weight: Determines the thickness-thinness of the text.

font-size: Determines the size of the text.

CSS TEXT FEATURES

word-spacing : Determines the space to be left between words.

letter-spacing : Specifies the space to be left between letters.

text-decoration : Under, over, etc. of the word. Determines whether it is drawn or not.

underline : It makes the word underline (under the line).

overline : It ensures that the word is underlined (over the line).

line-through : Makes it underline in the middle of the word.

blink : Makes the word blink (for Netscape)

vertical-align : Determines how the text is aligned horizontally.

text-transform: Allows words to be uppercase or lowercase.

capitalize : Makes the first letters of words capitalized.

uppercase : Makes all letters of the words capitalized.

lowercase : Makes all letters of words lowercase.

none : Makes words appear as in the original text.

text-align: Determines how the text is vertically aligned.

left : Justifies the text to the left.

right : Justifies the text to the right.

center : Centers the text.

justify : Justify text.

text-indent : Determines how far the first line of text starts from the left.

line-height : Adjusts the height of the line. (When a high value is given, the spacing between the lines increases.)

first-line : Allows the first line of text to be formatted.

first-letter : Formats the first letter of the text.

CSS CURSOR PROPERTIES

crosshair: Makes the cursor look like a crosshair.

auto: Makes the cursor look like a vertical line in the text and a regular arrow in a blank space.

default: Makes the cursor look like a regular arrow in both text and blank space.

hand: Makes the cursor be in the form of a hand, as in the link.

move: Makes the cursor be in the shape of a move sign.

ne-resize: Makes the cursor become a normal arrow pointing to the right.

nw-resize: Makes the cursor become a normal left-pointed arrow.

se-resize: Makes the cursor become a normal arrow pointing to the right and from top to bottom.

sw-resize: Makes the cursor become a normal arrow pointing upwards and to the left.

n-resize: Makes the cursor look like a thin arrow from bottom to top.

s-resize: Makes the cursor look like a thin arrow from top to bottom.

w-resize: Makes the cursor look like a thin arrow to the left.

e-resize: Makes the cursor look like a thin arrow to the right.

text: Makes the cursor appear as it is in the text, both in the text and in the blank space.

wait: Makes the cursor change to a busy animation.

help: Makes the cursor change into a help-question mark.

CSS FLOOR PROPERTIES

background-color: Sets the color of the background.

color : Color name.

transparent: Makes the background transparent.

background-image: Allows placing an image on the floor.

url: The address of the image placed on the floor.

background-repeat: Determines how the image placed on the floor will spread.

repeat : Allows the picture to spread over the entire floor.

repeat-x : It makes the picture spread from left-top to right-top.

repeat-y : Makes the picture spread from left-top to left-bottom.

no-repeat: Makes the image appear in its original size without spreading.

background-attachment: Determines the state of the background image when the page is moved with the scroll bar.

scroll : It makes the floor scroll when the page is moved.

fixed: Keeps the floor stable even if the page is scrolled

background-position: Allows the image on the floor to be placed as desired.

top : Places the image up.

center : Centers the picture.

bottom : Places the image down.

left : Positions the image to the left.

right: Positions the image to the right.

…px : Allows the picture to be inset from the left to the desired extent.

CSS TABLE PROPERTIES

margin : Specifies the space to be left between the table and the edges of the window.

margin-top : Specifies the space to be left between the table and the top of the window.

margin-right : Specifies the space to be left between the table and the right edge of the window.

margin-bottom : Specifies the space to be left between the table and the bottom edge of the window.

margin-left : Specifies the space to be left between the table and the left edge of the window.

padding : It determines the space to be left between the table edges and the table content (Text, etc.).

padding-top : Specifies the space to be left between the top of the table and the table content.

padding-right : Specifies the space to be left between the right edge of the table and the table content.

padding-bottom : Specifies the space to be left between the bottom edge of the table and the table content.

padding-left : Specifies the space to be left between the left edge of the table and the table content.

border : Allows the edges of the table to be shaped.

border-top : Allows the top edge of the table to be shaped.

border-left : Allows the left edge of the table to be shaped.

border-bottom : Allows the bottom edge of the table to be shaped.

border-right : Allows the right edge of the table to be shaped.

border-width : Determines the thickness of the edges of the table.

border-top-width : Specifies the thickness of the top edge of the table.

border-right-width : Determines the thickness of the right edge of the table.

border-bottom-width : Determines the thickness of the bottom edge of the table.

border-left-width : Determines the thickness of the left edge of the table.

border-style : Specifies the border type of the table.

border-top-style : Specifies the top border type of the table.

border-right-style : Specifies the right border type of the table.

border-bottom-style : Specifies the bottom border type of the table.

border-left-style : Specifies the left border type of the table.

border-color : Specifies the color of the table's borders.

border-top-color : Specifies the color of the top edge of the table.

border-right-color : Specifies the color of the right border of the table.

border-bottom-color : Specifies the color of the bottom border of the table.

border-left-color : Specifies the color of the left edge of the table.

color : Determines the color of the text in the table.

width : Determines the width of the table.

height : Determines the height of the table.