CSS Summary PDF

Summary (INTRODUCING CASCADING STYLE SHEETS) CSS CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. CSS describes how elements must be rendered on screen, on paper, or in other media. What is CSS?  CSS stands for Cascading Style Sheets  CS...

Summary (INTRODUCING CASCADING STYLE SHEETS) CSS CSS is a stylesheet language that describes the presentation of an HTML (or XML) document. CSS describes how elements must be rendered on screen, on paper, or in other media. What is CSS?  CSS stands for Cascading Style Sheets  CSS describes how HTML elements are to be displayed on screen, paper, or in other media  CSS saves a lot of work. It can control the layout of multiple webpages all at once  External style sheets are stored in CSS files Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.  CSS Syntax: A CSS rule-set consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. Three Ways to Insert CSS Styling can be added to HTML elements in 3 ways:  Inline - using a style attribute in HTML elements  Internal - using a element in the HTML section  External - using one or more external CSS files The most common way to add styling, is to keep the styles in separate CSS files. Inline Styling (Inline CSS) Inline styling is used to apply a unique style to a single HTML element: Inline styling uses the style attribute. This example changes the text color of the element to blue: Example This is a Blue Heading Internal Styling (Internal CSS) Internal styling is used to define a style for one HTML page. Internal styling is defined in the section of an HTML page, within a element: Example body {background- color:lightgrey;} h1 {color:blue;} p {color:green;} This is a heading This is a paragraph.  External Styling (External CSS) An external style sheet is used to define the style for many pages. With an external style sheet, you can change the look of an entire web site by changing one file! To use an external style sheet, add a link to it in the section of the HTML page: Example This is a heading This is a paragraph. An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a.css extension. Here is how the "styles.css" looks: body { background-color: lightgrey; } h1 { color: blue; } p { color:green; } What is a div? 1. is an HTML element used to group other elements together. 2. It allows you to apply styles or layouts to a section of the webpage. What is a CSS Class? 1. A CSS class is a way to style specific elements on a webpage. 2. Classes are reusable, meaning you can apply the same style to multiple elements. How to Use a Class in HTML? 1. You add a class to an HTML element using the class attribute. 2. Example: This is a centered div How to Style a Class in CSS? 1. Define the class in your CSS file using a. (dot) before the class name. 2. Example:.center { text-align: center; } Example Explained (1):  1. HTML Code:...... o The center class centers the text. o The underline class underlines the text. o The blue class changes the text color to blue. 2. CSS Code: css Copy code.center { text-align: center; }.underline { text-decoration: underline; }.blue { color: blue; } o You can combine multiple classes in one element like this: class="center underline blue". 3. Result: o The with class="center" will center its content. o The with class="center underline blue" will center, underline, and turn the text blue. Example Explained (2): 1. HTML Code:......... o The header_nav and social elements use an ID instead of a class for unique styling. o The center underline element combines two classes for shared styles (centering and underlining). 2. CSS Code:.center { text-align: center; }.underline { text-decoration: underline; } #header_nav { background-color: blue; } #social { font-size: small; } o IDs (#) are unique and apply to one specific element, while classes (.) are reusable for multiple elements. 3. Result: o The header_nav has a blue background. o The center underline div centers and underlines its content. o The social section has small text. Key Points to Remember: 1. Use div to group content for styling and layout purposes. 2. Use classes to apply reusable styles to multiple elements. 3. Combine classes by listing them together: Example: class="center underline blue". 4. CSS Syntax: o Classes:.classname {... } o IDs: #idname {... }. Example 3:.myDiv { border: 5px outset red; background-color: lightblue; text-align: center; } The div element This is a heading in a div element This is some text in a div element. This is some text outside the div element. What Does This Code Do? This code creates a div element styled with CSS to make it look distinct. The groups a heading and some text, with styles applied to make it stand out. Step-by-Step Explanation: 1. HTML Structure: o The element is used to group content. o Inside the , there’s:  An heading.  A paragraph. 2. CSS Styles: o A class named myDiv is created to style the element. o The styles applied to myDiv:  Border: A thick red border (5px) with an "outset" design.   Background color: Light blue.  Text alignment: The content is centered. 3. How It Works: o The uses the class="myDiv" attribute to apply the styles defined in CSS. o Any content inside this will have the myDiv styles. Example 3:.main_div { display:flex; }.first-green { height: 400px; width: 20%; background-color: green; }.white { height: 400px%; width: 60%; background-color: navy; }.second-green { height: 400px; width: 20%; background-color: red; } What Does This Code Do? This code creates a layout using the CSS flex property, with three sections side by side. Each section has a specific height, width, and background color. Step-by-Step Explanation: 1. HTML Structure:  A element with the class main_div acts as the container for three inner elements: o first-green (green section) o white (blue/navy section) o second-green (red section) Purpose: The inner elements are styled to display as columns, sitting next to each other inside the main_div. 2. CSS Styles: a).main_div:  display: flex;: This turns main_div into a flex container. All the child elements (first-green, white, and second-green) are displayed in a row (side by side) by default. b).first-green:  height: 400px;: Sets the height of this section to 400 pixels.  width: 20%;: Sets the width of this section to 20% of the total width of the parent container (main_div).  background-color: green;: Fills this section with a green color. c).white:  height: 400px;: Sets the height to 400 pixels.  width: 60%;: Sets the width to 60% of the total width of the parent container.  background-color: navy;: Fills this section with a navy (blue) color. d).second-green:  height: 400px;: Sets the height to 400 pixels.  width: 20%;: Sets the width to 20% of the total width of the parent container.  background-color: red;: Fills this section with a red color. 3. How It Works:  The flexbox layout in main_div automatically arranges the three child elements in a row.  Each is given a specific width percentage: o First Section: 20% (green). o Second Section: 60% (navy). o Third Section: 20% (red).  All sections share the same height of 400px. Example 4 : Create simple menu: Simple Menu body { font-family: Arial, sans-serif; background-color: #f0f0f0; } nav { background-color: #333; }.menu { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; }.menu li { margin: 0 15px; What Does This Code Do? }.menu li a { This code creates a horizontal navigation menu with text-decoration: none; the following features: color: white; padding: 14px 20px; 1. A dark background for the navigation bar. display: block; 2. Centered menu items. } 3. Interactive hover effect: When the user hovers over a menu item, its background changes color,.menu li a:hover { and the corners become rounded. background-color: #575757; border-radius: 5px; } Home About Services Contact Example 5: Simple Menu with Submenu Simple Menu with Submenu body { font-family: Arial, sans-serif; background-color: #f0f0f0; }.menu { list-style-type: none; margin: 0; padding: 0; display: flex; justify-content: center; }.menu li { position: relative; margin: 0 15px; }.menu li a { text-decoration: none; color: white; padding: 14px 20px; display: block; }.menu li a:hover { background-color: #575757; border-radius: 5px; }.submenu { display: none; position: absolute; top: 100%; left: 0; list-style-type: none; background-color: #333; padding: 0; margin: 0; min-width: 150px; }.submenu li { margin: 0; }.submenu li a { padding: 10px 20px; white-space: nowrap; }.menu li:hover.submenu { display: block; } Home About Services Web Design SEO Marketing Contact Example 6:Map- image: The map and area elements Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic: This code creates an interactive image map that allows users to click on specific parts of an image to navigate to different web pages. Brief Explanation: 1. Tag: o Displays an image (workplace.jpeg) with the attribute usemap="#workmap", linking it to the element. 2. Tag: o Defines a clickable image map using name="workmap". The name matches the usemap value in the tag. 3. Tags: o Specifies clickable regions on the image. o Attributes:  shape: Defines the clickable area's shape:  rect (rectangle), circle, etc.  coords: Coordinates specifying the area's position and size.  alt: Alternative text for accessibility.  href: URL to navigate to when the area is clicked. Example Areas:  A rectangular area for the computer.  Another rectangle for the phone.  A circular area for the cup of coffee. Each area leads to a different webpage (computer.htm, phone.htm, or coffee.htm).