Introduction to CSS
Download as PPTX, PDF1 like217 views
CSS (Cascading Style Sheets) is a rule-based language that applies styling to HTML elements. There are three main ways to apply CSS styles: inline styles, internal style sheets within <style> tags in the <head>, and external style sheets linked via <link> tags. CSS controls elements' properties like color, font size, width, and more using selectors, declarations, and properties. Common selectors include element selectors that style all elements of a type, and ID selectors that target elements with unique IDs. CSS separates structure from presentation, allowing for easier maintenance and interchangeable styling.
More Related Content
Similar to Introduction to CSS (20)
Introduction to CSS
- 2. CSS • CSS Stands for “Cascading Style Sheets”. • CSS is a rule based language that applies styling to your HTML elements. You write CSS rules in elements, and modify properties of those elements such as color, background color, width, font size, etc. • CSS form the presentation layer of the user interface. It tells the browser how the element is to be presented to the user.
- 3. WHY CSS? • CSS removes the presentation attributes from the structure allowing reusability, ease of maintainability, and an interchangeable presentation layer. • HTML was never meant to be a presentation language. • CSS allows us to make global and instantaneous changes easily.
- 4. USING STYLE SHEETS CSS is applied to a web page using three different methods: Inline style Internal style sheet External style sheet We will be using External Style Sheets.
- 5. INLINE STYLE Applies styles directly to the elements by adding declarations into the Tags. <p style=“color: red;”> This is a paragraph </p> <p style=“font-size: 30px;”> This is another paragraph </p>
- 6. INTERNAL STYLE SHEETS Applies styles to HTML by placing the CSS rules inside the tag <style> which is written inside the <head> tag. <head> <style type=“text/css”> p{ color: red; } </style> </head>
- 7. EXTERNAL STYLE SHEETS Applies styles as a separate file with a .css extension. The file is then referenced from inside the <head> section by a link to the file. <head> <link rel=“stylesheet” type=“text/css” href=“mystyle.css”/> </head> Where mystyle.css is the name of my CSS file.
- 8. SYNTAX body { Background-color: black; color: green; } Selector Property Value Declaration
- 9. CSS SELECTORS CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more. Element Selector ID Selector
- 10. ELEMENT SELECTOR • Element Selector selects based on the element name. • For Example, You can select all the <p> elements on a page like this: p { color: red; Text-align: center; } All the paragraph on the page will be aligned centered and color will be red.
- 11. 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. <p id=“firstp”> #firstp { This is a paragraph. color: blue; </p> } HTML CSS