Web Engineering CSS By Assistant Prof Malik M Ali
Overview of CSS CSS : Cascading Style Sheet a style is a formatting rule. That rule can be applied to an individual tag element, to all instances of a certain tag within a document to all instances of a certain tag across a group of documents Let us define a style for an unordered list <ul style="list-style-type: square"> - inline style It will be defined for that particular element only.
Problem 1: What if we have many <ul> tags on the same page? Solution: Define style rules in your HTML page s Head i.e. use Internal Style sheet Problem 2: What if we have many <ul> tags on multiple pages? Solution: Define style rules in a separate file with the extension.css i.e. use External Style Sheet
How to define Internal Style Sheet Internal style sheets are defined inside head section of html page using <style> tag. <head> <style type= text/css > ul { list-style-type: square; } Ol { list-style-type: lower-alpha; } </style> </head>
Example
External Style Sheet
How to attach external style sheet
Defining CSS Rules A rule is made up of two parts Selector: The selector is the portion of the rule that dictates exactly how the web browser should select the elements to apply the style to. CSS includes a variety of selectors Properties
Border, Margin and Padding
Universal Selector The Universal selector indicates that the style should apply to any element in the web page Example * { } Font-family: Arial;
Type Selectors The Type selector allows you to create a style that applies to all instances of a specific type of HTML element. p{ font-family: Arial; } h1{ font-size: 14px; } h1,h2,h3 { color: red; }
Type Selectors <style> hr { color: green; background-color: green; height: 5px; width: 50%; text-align: left; } </style>
Type Selector Example
ID Selectors An ID selector is another special type of CSS selector that allows you to create styles that target elements with specific ID values. ID selectors are distinguished from other selector types by prefixing them with a hash mark (#) #title { font-size: larger; font-weight: bold; }
ID Selector Exercise Question
Class Selectors A Class selector is a special type of CSS selector that allows you to apply a style to any element with a specific class name. The class name is defined in HTML using the class attribute, which is present on almost every element. Class selectors are distinguished from other selector types by prefixing them with a single period (.).title{ font-size: larger; font-weight: bold; }
Exercise Question Copy two paragraphs of lorem ipsum text from some online text generator Paste each paragraph in a div Define common style attributes inside mydiv class Define two other classes named scheme1 and scheme2 one for each div for different style values
Descendant Selectors Descendant selectors allow you to create styles that target HTML elements that are descendants of a specific type of element. The following sample demonstrates a style that will be applied to any <span> tag that is a descendant of a <div> div span { } font-family: Arial;
Practice Example
Child Selectors The Child selector is similar to the Descendant selector except unlike the Descendant selector, which searches the entire descendant hierarchy of an element, the Child selector restricts its element search to only those elements that are direct children of the parent element. div > span { } font-family:arial;
Attribute Selectors Attribute selectors enable you to define a style that is applied to elements based on the existence of element attributes rather than the actual element name. input[type=text] { width: 150px; display: block; margin-bottom: 10px; background-color: yellow; } input[type=button] { width: 120px; margin-left: 35px; display: block; }
Adjacent Selectors Adjacent selectors enable you to select HTML elements that are immediately adjacent to another element type. For example, in an unordered list, you might want to highlight the first list item and then have all the following items use a different style li { color: maroon; } li+li { color: silver; }
Pseudo-Classes Those classes having some kind of intelligence First-Child Pseudo-Class: The first-child pseudo-class allows you to indicate that the rule should select the first child element M of an element N. Example: #title p:first-child { font-size: xx-small; }
Pseudo-classes Example Apply previously defined First-Child pseudo class to the following HTML code <div id="title"> Bahria University <p>management Sciences</p> <p>computer Science</p> This text is outside the paragraph tag </div>
Pseudo Classes related to anchor tags
Practice Exercise
Paragraph Formatting Text-indent: Indents only the first line of the paragraph. Example: p { text-indent: 20px} Padding: adds specific amount of space between the border of an element and its contents. Applies equally to all lines of text in a paragraph. Example: p { padding: 20px }, padding-left, right, top and bottom Margin: This adds a specified amount of white space around an element, on the outside of the element. It applies equally to all lines of text in the paragraph. Example: p { margin: 20px }
Paragraph formatting text-indent n px, padding: n px, margin: n px (top px, right px, bottom px, left px) text-align: left/right/center/justify line-height: n px /150% etc, word-spacing: npx, letter-spacing: npx font-size, font-family, background, color font-weight: bold/normal font-style: italic/normal text-decoration: underline / line-through / blink / none
Paragraph Formatting Borders border: size px color style; e.g. border: 20px red solid; border-style, border-top-style, border-bottomstyle border-color, border-top-color, border-bottomcolor, border-width: n px Border Styles: Solid, Dotted, Dashed, Double, Groove, ridge, inset, outset, none
Practice Question Fix following style properties Border-top-style Border-bottom-style Padding-top Padding-bottom
Div and Table Formatting Common style attributes of Div and Span Top, left, bottom, right, width, height, overflow, float, border, position Values for overflow: visible, hidden, scroll, auto Values for float: left, right, top, bottom Common style attributes of Tables Width, height, padding, margin, color, background-color, border-collapse: collapse, border: 5px solid red,
Practice Exercise Generate the following output using div type selector
Output of Exercise Question Common style attributes: Width, height, padding, float, border, text-align Uncommon style attributes: Color, background-color, font-family
Positioning CSS Elements The position property specifies the type of positioning method used for an element.there are four different position values: static relative fixed absolute Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Static Positioning Static positioned elements are not affected by the top, bottom, left, and right properties. An element with position static is not positioned in any special way; it is always positioned according to the normal flow of the page divstatic { position: static; border: 3px solid black; }
Relative Positioning Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element. divrelative { position: relative; left: 30px; border: 3px solid black; }
Relative Positioning
Position Fixed it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. A fixed element does not leave a gap in the page where it would normally have been located. divfixed { position: fixed; bottom: 0; right: 0; width: 300px; border: 3px solid blue; }
Position Absolute An element with position: absolute; is positioned relative to the nearest positioned ancestor. However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
divabsolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid Black; } Position Absolute
Position Absolute
How to define External Style Sheet Step I: Press ctrl + n in your visual studio environment. You will see Add New Item dialog box. Alternatively right click project name in solution explorer and then click Add menu item and then click Add new item Step II: Select style sheet item, set name for this file and press Add button. Step III: Add reference of this style sheet to your HTML page in head section as shown below <link href= mystyle.css type= text/css rel= stylesheet />
Exercise Question
Instructions for Exercise 03 The background of each fieldset is lightyellow The border of each fieldset is yellow, with 10px width e.g. border:10px solid yellow The fieldset needs to have margin-bottom:10px The width of each fieldset is 720px The width of each label is 180px The label text needs to have display:inline-block The label text needs to be right-align and top-align The labels of the checkbox and the radio needs to have width:auto For the words on both sides of the two range, you can use any appropriate style e.g. text-align:center The textarea needs to be width:360px and height:50px
Inline styling is not allowed Style rules are added so that the label and input elements become significantly larger when the mouse is moved over them (and return to normal size when the mouse moves away from them). Add following code to your html. It will show picture in the image box
Javascript code for viewing picture window.onload = function() { var files = document.queryselectorall("input[type=file]"); files[0].addeventlistener("change", function(e) { if(this.files && this.files[0]) { var reader = new FileReader(); reader.onload = function(e) { document.getelementbyid("preview").setattribute( "src", e.target.result); } reader.readasdataurl(this.files[0]); } }); }
Navigation Bar Build two separate navigation bars as shown