CSS Notes PDF

**[CSS ]** - CSS stands for "Cascading Style Sheets". - "Cascading" refers to the procedure that determines which style will apply to a certain section, if you have more than one style rule. - The "style" is referred to the look of a certain part of your page. The "sheets" are like...

**[CSS ]** - CSS stands for "Cascading Style Sheets". - "Cascading" refers to the procedure that determines which style will apply to a certain section, if you have more than one style rule. - The "style" is referred to the look of a certain part of your page. The "sheets" are like templates, or a set of rules, for determining how the webpage will look. **[What is CSS ?]** CSS describes the style of an HTML document. CSS is a styling language that contains a set of rules to tell browsers how your webpage should look. It is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. It provides a powerful control over the presentation of an HTML document on screen, on paper, or in other media. You can use CSS to control the colour of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the WWW Consortium (W3C) created CSS. CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation. **[Advantages of CSS :]** - CSS saves time : Styles defined for the HTML elements in a CSS file can be applied to as many web pages as you want. - Pages load faster : Just write one CSS rule of a tag and apply it to all the occurrences of that tag in HTML document. So, less code; means faster download times. - Easy maintenance : To make a global change, simply change the style, and all the elements in all the web pages will be updated automatically. - Superior styles to HTML : CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. - Multiple Device Compatibility Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for hand-held devices such as PDAs and mobile-phones or for printing. **[CSS Syntax]** A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of two parts, (1) Selector, and (2) Declaration CSS selector [Selector ] A selector is an HTML element you want to add style to. This could be any like \\ or \ etc. [Declaration ] The declaration is the statement of style for that element. It is made up of property and value. - Property: A property is the aspect of an element you want to change; for eg. color, border, font, etc. Put simply, all the HTML attributes are converted into CSS properties. - Value: Value is the exact setting for the property. For example, color property can be set to value red or the font-size can be set to 30px, and so on. [CSS Style Rule Syntax is as follows: ] Example (1) : h1{text-align:center;} In this example,\is a selector, text-align is a property and center is the value of the property. Example (2): body{background-color:green;Margin-left:2cm;} When you add more properties to the style rule, the same are separated by semi-colon. (;). In the above example, background-color, and Margin-left are separated by semicolon. **[Ways of inserting a style sheet:]** 1. Inline style 2. Internal style sheet 3. External style sheet 4. Multiple Style sheets 1. Inline Styles An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. 2. Internal Style Sheet An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the \ element, inside the \ section of an HTML page. 3. External Style Sheet With an external style sheet, you can change the look of an entire website by changing just one file. Each page must include a reference to the external style sheet file inside the \ element. The \ element goes inside the \ section. 4. Multiple Style Sheets If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used.  **[CSS Comments]** Comments are used to explain the code, and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment starts with /\* and ends with \*/. Comments can also span multiple lines: Example : p { color: red;\     /\* This changes the color of paragraph contents to red\*/ } **[CSS Selectors]** CSS selectors are used to \"find\" (or select) HTML elements based on their element name, id, class, attribute, and more. 1. The element Selector The element selector selects elements based on the element name. You can select all \ elements on a page like this Example : p { 2. The ID 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. Eg : \#black {color:black;} 3. The Class 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. Eg :.center {\     text-align: center;\     color: red;} In the example below, only \ elements with class=\"center\" will be center-aligned: p.center {\     text-align: center;\     color: red;} **[Grouping Selectors]** If you have elements with the same style definitions, It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma. h1, h2, h3 { color:pink; letter-spacing: 4 ; margin-bottom:1 ; text-transform:lowercase; } [Multiple Style Rules ] You may need to define multiple style rules for a single element. These rules can be combined with multiple properties and corresponding values into a single block. Here all the property and value pairs are separated by a semicolon (;). Eg. : h1 { color:blue; font-weight:normal; letter-spacing:.4em; margin-bottom:1em; text-transform:lowercase; } **[CSS PROPERTIES]** [Color] Color property is used to set the color of the text/element. Color is often specified by : A Hex value like \-\-- "\#ff0000" An RGB value like \-\-- "rgb(255,0,0)" A color name like -- "red" [Text Color] -You can set the color of text ------------------------------------------------------- Eg. \Hello World\ [Border Color]\--You can set the color of borders: -------------------------------------------------------------- Eg. \Hello World\ [Background Color]\--You can set the background color for HTML elements ----------------------------------------------------------------------------------- Eg. \ Today is a beautiful day...\ [Background Image] \-- The background-image property specifies an image to use as the background of an element. --------------------------------------------------------------------------------------------------------------------------- [CSS Border Properties] The CSS border properties allow you to specify the style, width, and color of an element\'s border. [Property] [Description] ---------------------------------------------------------------------- --------------------------------------------------- [border](https://www.w3schools.com/cssref/pr_border.asp) Sets all the border properties in one declaration [border-style](https://www.w3schools.com/cssref/pr_border-style.asp) Sets the style of the four borders [border-color](https://www.w3schools.com/cssref/pr_border-color.asp) Sets the color of the four borders [border-width](https://www.w3schools.com/cssref/pr_border-width.asp) Sets the width of the four borders [CSS Margins] The CSS margin properties are used to create space around elements, outside of any defined borders.With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). +-----------------------------------+-----------------------------------+ | **[Property]** | **[Description]** | +===================================+===================================+ | [margin](https://www.w3schools.co | A shorthand property for setting | | m/cssref/pr_margin.asp) | the margin properties in | | | | | | one declaration | +-----------------------------------+-----------------------------------+ | [margin-bottom](https://www.w3sch | Sets the bottom margin of an | | ools.com/cssref/pr_margin-bottom. | element | | asp) | | +-----------------------------------+-----------------------------------+ | [margin-left](https://www.w3schoo | Sets the left margin of an | | ls.com/cssref/pr_margin-left.asp) | element | +-----------------------------------+-----------------------------------+ | [margin-right](https://www.w3scho | Sets the right margin of an | | ols.com/cssref/pr_margin-right.as | element | | p) | | +-----------------------------------+-----------------------------------+ | [margin-top](https://www.w3school | Sets the top margin of an element | | s.com/cssref/pr_margin-top.asp) | | +-----------------------------------+-----------------------------------+ **[CSS EXERCISES]** **[EXERCISE-1 : Inline Styling]** \ \ \ Inline styling \ \ \ \ INLINE STYLE \ \ Inline style is used to apply unique styles for a single element \ \ \ **[EXERCISE-2 : Internal Style Sheet]** \ \ \ Internal Style Sheet \ \ h1 {color: maroon; margin-left: 40px;} body {background-color: linen;} p {color:darkorchid; font-size:16;} \ \ \ \Internal Style Sheet\ \Internal style sheet is used to apply unique style in the current page \ \ \ **[EXERCISE-3 : External Style Sheet ]** \ \ \ External Style Sheet \ \ \ \ \External Style Sheet\ \External style sheet method calls the style rules from a separately stored CSS file \ \ \ **[CSS FILE : mystyle.css ]** body {background-color: lightblue;} h1 {color: navy;} margin-left: 20px;} p {color:green; font-size:16;} **[EXERCISE 4(1) : Multiple Style sheets (Putting \"mystyle.css\"before style)\>]** \ \ \ Multiple Style Sheet \ \ \ h1 {color: orange;} \ \ \ CSS Syntax\ \ A selector is an HTML element you want to add style to. \ \ The declaration is the statement of style for that element.\ \ \ **[EXERCISE 4(2) : Multiple Style sheets (Putting \"mystyle.css\" after style)\>]** \ \ \ Multiple Style Sheet \ \ h1 { color: orange;} \ \ \ \ Multiple Style Sheet\ \This is a paragraph.\ \This is another paragraph.\ \ \ **[EXERCISE-5 : Id Selector]** \ \ \ ID SELECTOR \ \ \#head2{text-align: center; color: red;} \#para1 {text-align: center; color: green;} \ \ \ \ID SELECTOR \ \ You can define style rules based on the id attribute of the elements. \All the elements having that id will be formatted according to the defined rule. \ \ \ **[EXERCISE-6 : Class Selector]** \ \ \ \ Class Selector \ \.colortext {text-align: center; color: red;} \ \ \ \Class Selector\ \The style rules defined in the class selector can be applied to any element using class attribute for the element.\ \ \ **[EXERCISE 7: Grouping Selectors]** \ \ \ \ Grouping Selectors \ \ h1, h2, p { text-align: center; color: red;} \ \ \ \CSS Selectors\ \Grouping Selectors \ \If you have elements with the same style definitions, It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.\ \ \ **[EXERCISE 8 : BACKGROUND COLOR ]** \ \ \ \ BACKGROUND COLOR\ \ h2 {color:blue; border:2px solid Tomato; background-color: pink;} p { color:green; background-color:yellow;} \ \ \ \CSS background-color example!\ \This exercise explains the color property of CSS.\ \ \ **[EXERCISE 9 : BACKGROUND IMAGE]** \ \ \ \ BACKGROUND IMAGE & FONT-FAMILY\ \ body {background-image: url(\"field.jpg\");} H1{color:blue;font-family:Arial black;} P{ color:red; font-size:20; font-family:verdana;} \ \ \ \FONT-FAMILY\ \This tag sets the face of the font.Different values can be used \ If browser does not support the first font, it tries the next font\ \ \ **[EXERCISE 10 : BORDERS]** \ \ \ \ BORDERS \ \ h1 {border-style: dotted; border-width: 4px; border-color: red;} p {border: 10px solid green; } \ \ \ \This is a Heading\ \This is a paragraph.\ \ \ **[EXERCISE 11 : MARGINS]** \ \ \ \ h1 { background-color: lightblue; margin-left: 20px;} h2 {background-color: lightpink; margin: 50px 25px;} p {background-color: lightblue; width: 300px; margin: auto;} \ \ \ \This is a Heading\ \This is a second Heading\ \This is a paragraph.\ \ \