Lecture 1: Introduction to CSS PDF

Sulaimani Polytechnic University Chamchamal Technical Institute Department of Information Technology 3rd semester Lecture 1 Introduction to CSS Zanyar Ahmed 2024  Outline Explain Cascading Style Sheets...

Sulaimani Polytechnic University Chamchamal Technical Institute Department of Information Technology 3rd semester Lecture 1 Introduction to CSS Zanyar Ahmed 2024  Outline Explain Cascading Style Sheets. Describe the CSS design goals. Explain the working of CSS State the syntax of a style rule. Describe the types of style sheets. Describe the various selectors. Describe comments. Text and Font Style 2  Need of Style Sheets ◼ CSS (Cascading Style Sheets) is used to style HTML elements. ◼ Style Sheet is a collection of rules that specifies the appearance of data in an HTML document. ◼ CSS describes how HTML elements should be displayed. ◼ 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.  Cascading Style Sheet (CSS) A rule-based language with formatting instructions for the content specified in an HTML page Separates HTML content from its formatting You can embed CSS code within HTML code, or saved as a separate file with extension.css Formatting instructions for an element are referred to as a rule set. The rule defines how the content specified within an element should be displayed in a Web browser. The task of combining and matching rules from different files is referred as cascading. Cascading Style Sheet cont..)  CSS-Benefits  Code Reusability  Saves time by specifying the formatting options of an element only once and applying to multiple HTML pages  Less HTML Code  Helps in reducing the file size of HTML documents by specifying the formatting instructions in another file  Device Independence  Designed for different devices to provide the same look and feel of the HTML page across them. What are advantages of using CSS? CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. Offline Browsing − CSS can store web applications locally with the help of an offline catche. Platform Independence − The Script offer consistent platform independence and can support latest browsers as well.  Working of CSS ◼ Embeds the CSS code within the HTML code or link the HTML file to the CSS file ◼ Steps involved in applying a style sheet to an HTML page: ◼ User requests for a Web page from the browser using the URL ◼ Server responds with the HTML file and related files such as image files, audio files, and external.css files, if any ◼ Browser executes the CSS code using the rendering engine and applies the styles to the HTML file ◼ Web page is displayed in the browser. Software that applies the formatting instructions to the Web page and displays the formatted content on the screen  CSS Syntax A CSS rule-set consists of a selector and a declaration block: 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 Multiple Properties and Selectors ◼ Multiple property-value pairs for a selector is separated by a semicolon (;) within the declaration block ◼ Multiple selectors are grouped to specify a single property ◼ Specify multiple properties for multiple selectors within a single statement  Styling HTML with CSS ✓ CSS can be added to HTML in the following ways: Inline style may be used to apply a unique style for a single element.. An internal style sheet is also included within the HTML document and is defined using the style element. An external style sheet is a separate file where you can declare all the styles that you want to use on your website. 1-Inline Styles Are placed directly Inline Styles Cannot be reused at inside an HTML any point of time in a element Web page Web designer cannot use the style builder to create an inline style The Code use of inline style.  2-Internal Styles Placed inside the Type attribute of the style element section of a particular Web specifies the content type, which is page source code text/css Internal Styles Style rules appear in a declaration block for each HTML element under the style element Styles can be re-used in the same Web page in which they are placed  3- External Style Sheet External CSS is defined External CSS are widely in a separate file and is used to provide a saved with the.css External Style Sheet consistent look across the extension Web pages of a Web site Provides the benefit of body.css reusability by implementing common style rules for multiple HTML pages HTML Code Linked to external style sheet file body.css  Types of Selectors ◼ Selectors refer to the HTML elements with the styles you want to apply to them The five different types of CSS selectors are as follows: Universal selector Group selector Type selector Selectors ID selector Class selector  1. Type Selector Specifies the element Styles are specified only name along with the once for an HTML element styles to be applied to and are applied to all the that element occurrences of that elements Results in application of the specified styles to all the occurrence of that element in a Web page  2. Class Selector Applies styles to the Class selector starts with a Matches elements, content of all those period followed by the whose class attribute is elements having the same value of the class attribute set in an HTML page class attribute  3. ID Selector ID selector starts with the hash symbol (#) followed by the id attribute’s value and the declaration block Matches an element whose id attribute is Applies styles to the set in an HTML page content of all those elements 4. Universal Selector Represented by an Can be applied to all asterisk (*) sign elements in the document Applies the specified styles to the content of all the elements  5-Group Selector We can group selectors using a comma (,) separator. The following declaration block will apply to any element that matches either of the selectors in the group: h1, h2, h3 { color: Maroon; } Main header Header level 2 Header level 3  Class v/s Id Class Id We can apply a class to various The Id is unique in a page, and we elements so that it could be many can only apply it to one specific times on a single page. element. The class is assigned to an element The name of the Id starts with the and its name starts with "." followed "#" symbol followed by a unique id by the name of the class. name. We can attach multiple class We can attach only one ID selector to selectors to an element. an element. Syntax: Syntax:.class{ #id{ // declarations of CSS // declarations of CSS } }  Comments ◼ Descriptive text to provide information about the CSS code ◼ Makes the program more readable ◼ Marked with special characters, which are ‘’ ◼ Can have single-line and multi-line comments What is an attribute selector? You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text − Input [type = "text"] { color: green; }  Psuedo Classes 1-3  Following table lists the different states of an element: Sometimes unknowingly the same Web page get open that you have already visited. You might feel the need for a mechanism that could differentiate the already visited links from the remaining ones. This is possible by using pseudo classes. Pseudo classes allow the users to apply different styles to the elements such as buttons, hyperlinks, and so on.  Psuedo Classes 2-3 State Description active Defines a different style to an element that is activated by the user. hover Defines a different style to an element when the mouse pointer is moved over it. link Defines a different style to an unvisited hyperlink. visited Defines a different style to the visited hyperlink.  Syntax for declaring Pseudo classes are as follows: selector_name: state_name {property: value}  Psuedo Classes 3-3  Pseudo classes specify the styles to be applied on an element depending on its state.  In CSS3, a selector can contain multiple pseudo-classes.  These pseudo-classes should not be mutually exclusive. a:link { color: white; background-color: black; border: 2px solid white; Specifies the styles for an } unvisited link a:visited { color: white; background-color: brown; border: 2px solid white; Specifies the styles for a visited } link a:hover { color: black; background-color: white; Specifies the styles when a border: 2px solid black; mouse hovers over it }  What are Pseudo-Elements? A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element Syntax The syntax of pseudo-elements: selector::pseudo-element { property: value; } p::first-line { color: #ff0000; } p::selection { color: red; background: yellow; }  CSS Background. w3schools CSS background properties are used to define the background effects of an element. CSS properties used for background effects: ❖ background-color ❖ background-image ❖ background-repeat ❖ background-attachment ❖ background-position 30  CSS background-color example h1 { background-color: green; } div { background-color: lightblue; } p{ background-color: yellow; } CSS background-color example! This is a text inside a div element. This paragraph has its own background color. We are still in the div element. 31 CSS background example2 32 CSS background example2 Output 33  Text and Font Style 1-2  The text properties specify and control the appearance of the text in a Web page.  A user can change the color of a text, increase or decrease the space between Property Description color It is used for specifying the color of the text. It is used in specifying the horizontal alignment of text-align text in an element. It is used for specifying the decoration of the text text-decoration in an element. It is used for specifying the indentation of first line text-indent of text in an element in length or %. It is used in specifying the casing of text in an text-transform element. It is used for increasing or decreasing the space word-spacing 34 between words.  Text and Font Style 2-2  The font properties allow you to specify the font for the text and change the different font attributes of the text such as font, size, and style of the text.  Following table lists the different font properties. Property Description It is used for specifying the font and can specify a generic family or a specific family name such font-family as “Serif” or “Times New Roman”. It is used for specifying the size of the font and font-size can have an absolute or relative value. font-style It is used for specifying the style of the font. 35  Example” Text and Font Style “ 1.Home.HTML code 3. Output 2. it2nd.css 36  Color Values CSS colors can be defined as a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00) and the highest value is 255 (hex #FF). The table below shows the result of combining Red, Green, and Blue light sources:  Question: What is CSS? What are advantages of using CSS? What are the components of a CSS Style? What is deference ID and Class selector? Explain with sample example? What are the various ways of using CSS in an HTML page? What is an external Style Sheet? Explain with sample example? Thank you for your Attention! 39