├── index.html └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 |

This is First Css Assignment

15 |

16 |

What is CSS?

17 | 18 |

19 |

CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
Css is not neccesary CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files.

25 |

26 | 27 |

CSS can be added to HTML documents in 3 ways:

28 |

29 |

Inline - by using the style attribute inside HTML elements
Internal - by using a style element in the head section
External - by using a link element to link to an external CSS file.
The most common way to add CSS, is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate, and easier for you to try it yourself.

35 |

36 |

37 | When comparing CSS class vs ID, the difference is that CSS class applies a style to multiple elements. ID, on the other hand, applies a style to one unique element. ID is also special in that you can use a special URL to link directly to an element and it's used by JavaScript. 38 | 39 |

40 |

41 | In CSS, selectors are used to target a specific element or range of elements on a web page. Once an element has been targeted, a style or set of styles can be applied to the element. 42 |

43 |

44 | There is a wide range of selectors available. Two of the most commonly used are class and ID. Both are used to target elements to which a style should be applied. 45 |

46 | prepbytes Home 47 | 48 | 49 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | color: red; 3 | } 4 | 5 | h2{ 6 | font-style: italic; 7 | color: rgba(255, 68, 0, 0.805); 8 | font-size: 30px; 9 | } 10 | 11 | ol { 12 | color: #714c49; 13 | font-size: 20px; 14 | 15 | } 16 | 17 | .container{ 18 | margin-left: 20px; 19 | line-height: 50px; 20 | } 21 | 22 | .Linethrough{ 23 | text-decoration: line-through; 24 | } 25 | 26 | .Bg-color{ 27 | background-color: yellow; 28 | font-weight: bold; 29 | } 30 | .underline{ 31 | text-decoration: underline; 32 | font-style: italic; 33 | } 34 | .contanier1{ 35 | color: #804442; 36 | font-size: 20px; 37 | letter-spacing: 4px; 38 | } 39 | 40 | a { 41 | font-size: 20px; 42 | font-style: italic; 43 | color: rgb(146, 79, 62); 44 | background-color: yellow; 45 | text-decoration: none; 46 | } 47 | 48 | p { 49 | color: #9f7158; 50 | font-size: 18px; 51 | line-height: 20px; 52 | } 53 | --------------------------------------------------------------------------------