# 4. Introduction to CSS ###### tags: `Web Applications` ## Why CSS? HTML defines the structure of the different elements of a given document or resources. **CSS** is used to customize the **visual properties** and rendering of these elements. ## CSS and a HTML document For a CSS stylesheet to be used within an HTML document, we have to explicitly link it inside the `<head>` tag of the document. We can either link a local file, define it directly in the HTML document, or call a link to a file with css contesnts. For specific elements we can insert them at the `<body>` of the document. ```html <link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" title="no title" charset="utf-8"> ``` This approach as several benefits for example: unified and concise style among several websites, single point of modification, higher modularity and better HTTP resource caching. ## CSS selectors Selectors define the scope of parts of a given CSS property or a given set of CSS properties for an HTML page, delimiting its effects among its parts. Selectors are tags inside HTML elements that are used by CSS to apply styles to certain parts of a webpage ```html <img class="centerImg" src="myImage.png"> ``` Selectors can be set using the `class` and `id` identifiers. The difference between both is that `id` be shared by several elements whereas the latter is unique to the whole document. ### List of selectors #TODO: List of selectors (slide 14 and 17) `input[name]` stands for `<input name="...">` `input[name="color"]` stands for `<input name="color">` #### Pseudoclasses #TODO: List of pseudoclasses. ## CSS properties ### Lengths ### Colors Colors in CSS can be described in three ways - Using standart names: `aqua`, `black` , `blue` , `purple` , `transparent` , etc. ### Fonts When dealing with text fonts in CSS we might be interested in the following properties: - `font-family` - `font-size` - `font-style` - `font-variant` - `font-weight` ### Text formatting ## CSS boxes ![](https://i.imgur.com/iklO85a.png) ### Border properties ### Padding properties ### Margin properties ### Content size properties ### Background properties