# <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