CSS

kamil.maksudov

CSS - Cascading Style Sheets

CSS defines exactly how HTML looks like
HTML is content
CSS is style

3 options connect css with an HTML document.

CSS code inside an HTML tag
<p style="font-size: 120%">
CSS code inside an HTML document
<style>
p{
font-size: 120%;
}
</style>
CSS code in external file
p{
font-size: 120%;
}

Starting to make our webpage pretty text

Our code must be clean. The principle DRY! Don't Forget!

In Brackets I can use an external link css without going into a style.css. Just point a tag and make a combi of keys CTRL + E.

Colors in CSS

The RGB (Red Green Blue) Model
#RRGGBB

For each color:
Min: 0 (hex 0)
Max: 255 (hex ff)

The difference between hex and rgb doesn't exist, but designers get used using the hex model for print establishment than rgb and the rgb model is used for digital applications like laptop, tv... RGB consits of approximately 1,6*10^6 colors (256*256*256 = because three colors are included). RGBA (Red Green Blue Alpha).

Tipps: Go to a color picker in CSS just paste the combo of keys CTRL + E.

Classes and ID's

It is more useful to use classes than ids because classes can be added as much as you want to. Id is more specific and is used one time.

The CSS Box Model

Content: text, images etc
Padding: transparent area around the content, inside of the box
Border: goes around the padding and the content
Margin: space between boxes

The margin property defines the space around an HTML element. It is possible to use negative values to overlap content. The values of the margin property are not inherited by the child element

With box-sizing: border-box in CSS, we can define the height and the width for an entire box, rather than just for the content

We used an Universal Selector - *{}. Here is the difference with body

A CSS Layout

For a CSS layout can be used a float property. Float has got such values left, rigth, bottom, top.

float: left;
How can we get rid of unwilling divs connecting after using float property, when the rest goes after? The solutions is
we should add a new tag div with the class clearfix and specify it with values like:
.clearfix:after{

content: " ";
display: table;
clear: both;
}

Position CSS

A position property get used to placing a tag in a position where it shoud be apropo a design layout. E.x:
positin: releativ; - to the parent element
position: absolute; - to the element that shoud be placed into the right position
top: 20px; a margin-top property
right: 30px, a margin-right property

CSS