CSS and Class Tools Validating Your CSS http

CSS and Class Tools

Validating Your CSS � http: //jigsaw. w 3. org/css-validator/

Formatting CSS � http: //codebeautify. org/css-beautify-minify

Autochecker � http: //www. comp 101. xyz/

CSS Box Model

Every element is in box � With very few exceptions, every element in HTML has a box that it is held in � Can make it visible with background and border

Box Model Margin – clears an area around the border. Does not have a background color – it is transparent � Border – a border that goes around the padding and content. Affected by the background color of the box. � Padding – clears an area around the content. Affected by background color of the box � Content – the content of the box, where text appears. �

Content Padding Border Margin

No padding or border Rounded borders No padding borders or margins

Box Model Allows us to place borders, and space elements in relation to other elements Remember that border must have size, color and style Here’s where Inspect Element starts being important!

Box Model & Inspect Element � Using Chrome tools helps you see the different parts

Centering centering the TEXT (within the box) text-align: center; centering the BOX Need to tell it to treat as a block display: block; Must have a width (px or %) display: table; computes it for you center using margin-left: auto; margin-right: auto;

Centering list items � One of the areas with browser differences � In some cases (Firefox), centering text centers the bullet � In other cases (Chrome), centering text does not center the bullet � Solution: list-style-position: inside; bullets INSIDE the list item’s formatting

A cool new feature Rounded corners on boxes � border-radius: 15 px; � New with the latest version of CSS � If not supported by a browser, you get square corners! �