Understanding CSS in Amity School of Engineering & Technology

Slide Note

CSS, or Cascading Style Sheets, plays a crucial role in web development by specifying how documents are presented to users. This lecture series from Amity School of Engineering & Technology covers the basics of CSS, including its relationship with HTML, how browsers interpret CSS rules to style web content, and the fundamental concepts of CSS code and selectors. Gain insights into how CSS affects HTML, how to apply CSS rules to elements effectively, and the overall working process of CSS in web design.

nile Follow

Uploaded on Apr 16, 2024 | 6 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Amity School of Engineering & Technology CSS Lecture 11

Amity School of Engineering & Technology CSS CSS is a language for specifying how documents are presented to users how they are styled, laid out, etc. A document is usually a text file structured using a markup language HTML is the most common markup language, but you will also come across other markup languages such as SVG or XML.

Amity School of Engineering & Technology CSS Presenting converting it into a usable form for your audience. Browsers,like Firefox, Chrome or Intern et Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer. a document to a user means

Amity School of Engineering & Technology Cascading Style Sheet CSS code is simple written instructions that tell web browsers. How to display things on a page. For Example make text bold. position things a page. set the font style for a page or paragraph etc.

Amity School of Engineering & Technology How does CSS affect HTML? Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from: A set of properties, which have values set to update how the HTML content is displayed, for example I want my element's width to be 50% of its parent element, and its background to be red.

Amity School of Engineering & Technology Cont.. A selector, which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphsinmyHTMLdocument. A set of CSS rules a stylesheet determines how a webpage should look contained within

Amity School of Engineering & Technology How does CSS actually work? When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:

Amity School of Engineering & Technology Cont.. 1. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style. 2. The browser displays the contents of the DOM.

Amity School of Engineering & Technology Cont.. Load HTML Parse HTML Create DOM tree Display Attached Style to DOM node Load CSS Parse CSS

Amity School of Engineering & Technology HTML CODE <p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p>

Amity School of Engineering & Technology In DOM P "Let's use:" SPAN | "Cascading" SPAN | "Style" SPAN "Sheets"

Amity School of Engineering & Technology How to apply your CSS to your HTML There are three different ways to apply CSS to an HTML document. 1. Inline 2. Internal 3. External

Amity School of Engineering & Technology Inline Inline styles are CSS declarations that affect one element only, a style attribute: contained within

Amity School of Engineering & Technology Example <html> <head> <title>My CSS experiment</title> </head> <body> <h1 style="color: blue; background-color: yellow; border: 1px solid black;">Hello World! </h1> <p style="color:red;">This is my first CSS example </p> </body> </html>

Amity School of Engineering & Technology Internal <html> <head> <title>My CSS experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } P { color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html>

Amity School of Engineering & Technology External An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML <link> element.

Amity School of Engineering & Technology Example HTML FILE <html> <head> <title>My CSS experiment</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html>

Amity School of Engineering & Technology CSS File h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }

Amity School of Engineering & Technology What is DOM A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings. Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up.

Amity School of Engineering & Technology How to specify a rules? Some example H2 { color : blue } P { font -size :12pt; font-family: verdana }

Amity School of Engineering & Technology Difference between Id and Class ID s are Unique Each element can have only one ID Each page can have only one element with that ID When you used id for one you can not used id for different element.

Amity School of Engineering & Technology Cont.. <p id= main > I have an id </p> <p id= main > </p> ID like a driver license number (you can not have two driver licence with same number)

Amity School of Engineering & Technology Class Classes are NOT unique You can use the same class on multiple elements. You can use multiple classes on the same element.

Amity School of Engineering & Technology Cont.. <p class= chapter >I am a chapter</p> <p class= chapter > I .</p> <p id = main class= class1 class2 class3..class n > hi</p>

Amity School of Engineering & Technology Example #t_color { color:red; } #t_style { font-family:arial; font-size:20px; }

Amity School of Engineering & Technology Cont.. <p id= t_color >test id only</p> <p id= t_color >The box id text</p> <p id= t_color t_style >not allow</p> <p class= t1_color >test class only</p> <p class= t1_color t2_style >the box class</p>

Amity School of Engineering & Technology Cont.. The unique only means one element can not have more than one id attribute like class selector. A simple way to look at it is that an id is unique to only one element. A class is not unique and applied to multiple elements.

Amity School of Engineering & Technology Priority ID gets higher priority than class in CSS Example: HTML <div id= main class= myclass > id vs class</div> CSS .myclass { Color:red; } #main { color:blue; }

Amity School of Engineering & Technology Universal, Child, and Adjacent Selectors we have covered HTML selectors, Class and ID selectors, and how to combine selectors to target specific element boxes.

Amity School of Engineering & Technology Universal selectors Using an asterisk ( * ), you can target everything under the page. You can use it by itself to set global styles for a page, or as a descendant of a selector to set styles of everything within something.

Amity School of Engineering & Technology example * { margin: 0; padding: 0; }

Amity School of Engineering & Technology Child selectors A greater-than symbol ( > ) can be used to specify something that is a child of something else, that is, something immediately nested within something

Amity School of Engineering & Technology Cont.. #genus_examples > li { border: 1px solid red }

Amity School of Engineering & Technology Cont.. <ul id="genus_examples"> <li>Cats <ul> <li>Panthera</li> <li>Felis</li> <li>Neofelis</li> </ul> </li> <li>Apes <ul> <li>Pongo</li> <li>Pan</li> <li>Homo</li> </ul> </li> </ul>

Amity School of Engineering & Technology Cont.. a red border would be drawn around Cats and Apes only, rather than around every single list item (which would be the case with#genus_examples li { border: 1px solid red }). This is because the likes of Panthera and Felis are grandchildren of genus_examples , not children.

Amity School of Engineering & Technology HTML SPAN TAG The <span> element is an inline element and does not break into lines unless the break <br /> tag is used and the defined text (content) between the <span> open and </span> close tags is displayed as a line (by default without using other elements). Inline elements are text elements in the HTML file and can be defined within the line of another element.

Amity School of Engineering & Technology DIV tag <div> tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS. The difference between the div tag and the span tag is that the div tag is used with blocklevel elements whilst the span tag is used with inline elements.

Amity School of Engineering & Technology Example <html> <head> <title> </title> <style> .text span {color:red;} span { color:blue;} h1{color:green;} h1{color:black;} </style> </head> <body> <h1> <p> <span class="text"><span>Text for span</span></span> </p> </h1> </body> </html>