---
# System prepended metadata

title: <center>CSS(Cascading Style Sheets)</center>

---

# <center>CSS(Cascading Style Sheets)</center>

<center>CSS is a language that describes the style of an HTML document.

CSS describes how HTML elements should be displayed.</center>

---
## Reference

[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)

[CSS-Tricks](https://css-tricks.com/almanac/)

---
## Developer Tool

### Google Chrome

The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. Use the DevTools to iterate, debug and profile your site. Learn more about [Chrome DevTools here](https://developers.google.com/web/tools/chrome-devtools/).

To open Chrome DevTools, either right-click on any page element and select Inspect or open the Chrome settings menu in the top-right corner of your browser window and select More Tools > Developer Tools. Alternatively, you can use the shortcuts:

    Command + Option + i (Mac)
    Ctrl + Shift + i (Windows/Linux).

---
## Example

```css=
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
```

---
## Selector

#### tag Selector
The element selector selects elements based on the element name.

You can select all```<p>``` elements on a page like this (in this case, all ```<p>``` elements will be center-aligned, with a red text color):
```css = 
h1 {
  color: green;
}
```

#### class Attribute Selector
The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:
```css = 
.book-summary {
    color: blue;
}
```

#### id attribute selector
The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

The style rule below will be applied to the HTML element with id="para1":
```css =  
#site-description {
    color: red;
}
```
---

## How to Link to a Stylesheet

Before your webpage can use the stylesheet, you need to link to it. To do this, you'll need to create a ```<link>``` to your stylesheet in your HTML. To create a link, simply type the following inside the ```<head>``` of your HTML.
```html =
<link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">
```
The href attribute specifies the path to the linked resource (you can link to other resources besides stylesheets, more on this later) and the ```rel``` attribute names the relationship between the resource and your document. In this case, the relationship is a stylesheet. When you're done, it will look something like this...
```html=
<head>
  <title>My Webpage</title>
  <!-- ... -->
  <link href="path-to-stylesheet/stylesheet.css" rel="stylesheet">
  <!-- ... -->
</head>
```

---
Source : 
https://classroom.udacity.com/courses/ud001
https://www.w3schools.com/css/default.asp