Module 4.pdf
Document Details
Uploaded by WellIntentionedMagnolia
Brainware University
2023
Tags
Related
Full Transcript
Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Study Material HTML, CSS AND CSS Preprocessor...
Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Study Material HTML, CSS AND CSS Preprocessor (BCA20002) Module 4 Advance Cascading Style Sheet Table of Contents Topic Number Topic 1 Grouping, Dimension 2 Display, Positioning, Floating, Align 3 Pseudo class, Navigation Bar 4 Image Sprites Attribute sector, CSS Color 5 Creating page Layout and Site Designs Grouping and Dimension The Nesting & Grouping concept is very important for a web developer to write precise codes. You can group and nest items to reduce the amount of code that you write, which will reduce the length of your code and allow pages to load faster. It is a way to simplify your code. With the help of Nesting and Grouping, we can be more specific in our code. In this article, we will see how nesting & grouping helps to optimize the code & make it efficient & increases readability. Nesting: The nesting property in CSS facilitates nesting one style rule inside another, with the selector of the child rule that is relative to the selector of the parent rule. It helps to increase the modularity and maintainability of CSS stylesheets & hence increase the overall readability of the code. For instance, if you write a structured CSS module, instead of specifying the separate selectors Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 for every HTML element ie, by using many classes or ID selectors, you can simply specify properties to selectors within other selectors. While nesting the CSS properties, HTML elements form a tree-structured shape. Nesting is a shortcut to create CSS rules for multiple selectors for a specific property. So, instead of rewriting the same set of properties for the different selectors, we can simply nest selectors inside other selectors. For this reason, we are not only reducing the size of the code but also reducing the overall loading time. Syntax: class1_selector class2_selector id_selector { property: value; } Example: table tr th { background-color: beige; } Approach: Select the id/class selector & add a space to separate one from the other. Add the style properties for the elements. Grouping: Grouping is used to select the multiple elements together to apply the common styling properties to them. For this reason, it helps to reduce the length of the code that has multiple selectors with the same properties. This makes code easy to read. Page load times and development time for code are reduced as well when using grouping. Instead of writing this long code, specifying the same properties to different selectors: h1 { padding: 5px; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 color: grey; } p{ padding: 5px; color: grey; } We can group them and write like this & we need the comma(,) to group the various selectors. h1, p { padding: 5px; color: grey; } Approach: Add tag inside tag. Add various tags inside tag with content. Inside tag, we can group our selectors containing the same properties. Example: In this example, we will group various selectors together. h1, h2, p, a { text-align: center; color: green; } Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 GeeksForGeeks Smaller heading! This is anchor tag This is a paragraph. CSS Dimensions To specify the height and width of an element you can use height and width properties. It does not specify the borders, margins, and padding, it just sets the height and width inside the border, margins, and padding for an HTML element. CSS Dimension Properties PROPERTY DESCRIPTION height Sets the height of an element max-height Sets the maximum height of an element max-width Sets the maximum width of an element min-height Sets the minimum height of an element Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 min-width Sets the minimum width of an element width Sets the width of an element CSS Height and Width Values The CSS height and width properties might have the following values Auto This is the default. The browser calculates the height and width Length Specify the height and width in px, cm, etc. % Specify the height and width in percent of the containing block Initial Provides the height and width to its default value Inherit The height and width will be inherited from its parent value CSS Height and Width with Example The height and width of a element: div { height: 250px; width: 70%; background-color: #618685; } Set the height and width of an element This div element has a height of 250px and a width of 70%: Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Display, Positioning, Floating, Align The display property in CSS is used to specify how an element should be displayed on the webpage. It controls the layout and visibility of an element. The display property is useful in setting the inner and outer display types of an element. Possible Values The value passed to the display property is a keyword. These keyword values are categorised in six different groups, which are as follows: Outside Values (): Values under this head specify the outer display type of an element. inline: Makes the element behave like an inline element, allowing other elements to appear beside it on the same line. Examples: , , , etc. block: Makes the element behave like a block-level element, taking up the entire width of its parent container and creating a new line before and after it. Examples: , , , etc. Inside Values (): Values under this head specify the inner display type of an element. flow: Element displays its contents using flow layout (block and inline layout) Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 flow-root: Element displays a block box, referring to its formatting roots. table: Defines a block-level box, behaving like a HTML elements. flex: Defines a block-level box, behaves as per the flexbox model. grid: Defines a block-level box, behaves as per the grid model. ruby: Defines an inline-level element and behaves as per ruby formatting model. List Item Values (): Makes the element behave like a list item marker, typically used with elements. A single value represents a single list-item. Can be used along with list-style-type and list-style-position. The list-item can be paired with any outside display value and the flow or flow-root inside display values. Internal Values (): Layouts with complex internal structure, such as, table and ruby use this property to display their content. table-row-group: Behaves like HTML element. table-header-group: Behaves like HTML element. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 table-footer-group: Behaves like HTML element. table-row: Behaves like HTML element. table-cell: Behaves like HTML element. table-column-group: Behaves like HTML element. table-column: Behaves like HTML element. table-caption: Behaves like HTML element. ruby-base: Behaves like HTML element. ruby-text: Behaves like HTML element. ruby-base-container: Generated as anonymous boxes. ruby-text-container: Behaves like HTML element. Box Values (): Defines whether a display box is generated by an element or not. contents: Display of the element is replaced by its contents, i.e. its children and pseudo-elements. none: Turns off the display of the element and its descendants. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Precomposed Values (): A single-keyword value that is precomposed. Requires separate keyword for block and inline level elements. inline-block: Makes an element display as an inline-level block container. Same as inline flow-root. inline-table: Specifies that an element should behave like a table, but still be inline within a block-level context. Same as inline table. inline-flex: Allows an element to have a flexible box layout while participating in an inline-level context. Same as inline flex. inline-grid: Specifies that a grid container should be treated as an inline-level element. Same as inline grid. All the HTML elements. DOM Syntax object.style.display = 'display:inline-flex'; CSS display - inline Value Here is an example for display:inline: li { display: inline; font-size: 2rem; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 border: 1px solid red; margin: 5px; } Display - Inline Item1 Item2 Item3 Item4 CSS display - block Value Here is an example for display:block: li { display: block; font-size: 2rem; border: 1px solid red; margin: 5px; background-color:aquamarine; width: 200px; } Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Display - Block Item1 Item2 Item3 Item4 CSS — Advanced Positioning Position Property The position property is used to position the elements anywhere in our page or window. Position property accepts four different values and each value has its own use cases. The different values are: static, relative, absolute, and fixed. Let's discuss each of them one by one. Position Static This is the default value for the position property and this does not accept any box-offset property. Each and every element have static position property by default. Position Relative It accepts all the box off-set properties i.e left, right, top & bottom. The position relative element will always remain in the normal flow of the page, unlike floated elements. If we position any relatively it’s original position will be maintained, no elements can take its original position........box { position: relative; left: 60px; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 top: 60px; } Here, the box will move 60 pixels from left and 60px from down from its original position. Position Absolute The Absolute positioned element take reference from the element which is positioned as relative or to make an element absolutely positioned we need to make any parent element relatively positioned. When we apply absolute position property on any element then that element goes out of the normal flow and also loses its original position. The next element takes the position of that element................... box { width: 100px; height: 100px; background: green; }.parent-box { position: relative; }.box-2 { position: absolute; right: 0; bottom: 0; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 } If we want to position the absolute element with relative to its parent then we need to position its parent relatively....... Position Fixed Position fixed is similar to absolute positioning. The only difference is that fixed positioning always works with respect to window viewport and does not scroll with content as we scroll the page........box { position: fixed; right: 60px; bottom: 60px; } Z-index property Z-index property is used as indexing the elements. This Indexing is used to decide which element will be displayed first if having same positioning properties. We can decide the order that which element will be at the top and which will be at the bottom with ‘z-index’ property. The z-index property only works with relative, absolute and fixed elements. The element with the highest z-index value will appear on the top and with the lowest value will at the bottom. 1 Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 2 3.parent-box { height: 200px; background: #bada55; position: relative }.box { width: 100px; height: 100px; position: absolute; }.box-1 { left: 10px; top: 10px; background: red; z-index: 1; }.box-2 { left: 30px; top: 30px; background: blue; z-index: 2; }.box-3 { left: 50px; top: 50px; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 background: green; z-index: 3 } Here,.box-3 will be displayed at top of the page while.box-1 will be at the bottom of the page. CSS Float The CSS float property specifies whether a box should float or not. Floating Elements with CSS You can float elements to the left or right, but only applies to the elements that generate boxes that are not absolutely positioned. Any element that follows the floated element will flow around the floated element on the other side. The float property may have one of the three values: Value Description left The element floats on the left side of its containing block. right The element floats on the right side of its containing block. none Removes the float property from an element. How Elements Float A floated element is taken out of the normal flow and shifted to the left or right as far as possible in the space available of the containing element. Other elements normally flow around the floated items, unless they are prevented from doing so by their clear property. Elements are floated horizontally, which means that an element can only be floated left or right, not up or down. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Example img { float: left; } If several floating elements are placed adjacently, they will float next to each other if there is horizontal room. If there is not enough room for the float, it is shifted downward until either it fits or there are no more floating elements present. Example.thumbnail { float: left; width: 125px; height: 125px; margin: 10px; } Turning off Float Using Clear Property Elements that comes after the floating element will flow around it. The clear property specifies which sides of an element's box other floating elements are not allowed. Example.clear { clear: left; } CSS Align The align in CSS is used for positioning the items along with setting the distribution of space Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 between and around content items. We can align the items either horizontally or vertically. The various methods and techniques are used to center them, by taking care of the left and the right margin, etc. The various method for aligning & its usage are discussed below: margin:auto: This property is used to align a block element into the center. Using margin: auto will not work in IE8 unless a !DOCTYPE is declared. Example1: This example describes the CSS align using the margin: auto property..center { margin: auto; width: 60%; border: 3px solid #73AD21; padding: 10px; } GeeksforGeeks Center Align Elements Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 This is div element on which margin auto is used to horizontally align it into center position: absolute; We can align the items using this property. (static, relative, fixed, absolute, sticky). Example 2: This example describes the CSS align using the position: absolute; property. Note: The position properties top, bottom, left, and right will not work unless the position property is set first..right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px; } Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 GeeksforGeeks Right Align Absolute positioned elements can overlap other elements. text-align: center; We can align any text written in HTML at the center. we can use this property in various kinds of tags. Example 3: This example describes the CSS align using the text-align: center; property..center { Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 text-align: center; border: 3px solid green; } GeeksforGeeks BOTH TEXTS ARE AT CENTER This text is centered. padding: To vertically align-items we can use padding. Example 4: This example describes the CSS align using the padding property..center { Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 padding: 70px 0; border: 3px solid green; } GeeksforGeeks Center Vertically This is vertically centered. padding & text-align; To align the text both vertically and horizontally using a combination of padding and text-align: center. Example 5: This example describes the CSS align using the padding & text-align properties. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24.center { padding: 70px 0; border: 3px solid green; text-align: center; } GeeksforGeeks Here we use padding and text-align to center the div element vertically and horizontally: This text is vertically and horizontally centered. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Pseudo class, Navigation Bar A pseudo-class is used to define a special state of an element. For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus Syntax The syntax of pseudo-classes: selector:pseudo-class { property: value; } Anchor Pseudo-classes Links can be displayed in different ways: Example a:link { color: #FF0000; } a:visited { color: #00FF00; } Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 a:hover { color: #FF00FF; } a:active { color: #0000FF; } Pseudo-classes and HTML Classes Pseudo-classes can be combined with HTML classes: When you hover over the link in the example, it will change color: Example a.highlight:hover { color: #ff0000; } All CSS Pseudo Classes Selector Example Example description :active a:active Selects the active link Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 :checked input:checked Selects every checked element :disabled input:disabled Selects every disabled element :empty p:empty Selects every element that has no children :enabled input:enabled Selects every enabled element :first-child p:first-child Selects every elements that is the first child of its parent :first-of-type p:first-of-type Selects every element that is the first element of its parent :focus input:focus Selects the element that has focus :hover a:hover Selects links on mouse over Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 :in-range input:in-range Selects elements with a value within a specified range :invalid input:invalid Selects all elements with an invalid value :lang(language) p:lang(it) Selects every element with a lang attribute value starting with "it" :last-child p:last-child Selects every elements that is the last child of its parent :last-of-type p:last-of-type Selects every element that is the last element of its parent :link a:link Selects all unvisited links :not(selector) :not(p) Selects every element that is not a element :nth-child(n) p:nth-child(2) Selects every element that is the second child of its parent Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 :nth-last-child(n) p:nth-last-child(2) Selects every element that is the second child of its parent, counting from the last child :nth-last-of- p:nth-last-of- Selects every element that is the second element type(n) type(2) of its parent, counting from the last child :nth-of-type(n) p:nth-of-type(2) Selects every element that is the second element of its parent :only-of-type p:only-of-type Selects every element that is the only element of its parent :only-child p:only-child Selects every element that is the only child of its parent :optional input:optional Selects elements with no "required" attribute :out-of-range input:out-of-range Selects elements with a value outside a specified range Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 :read-only input:read-only Selects elements with a "readonly" attribute specified :read-write input:read-write Selects elements with no "readonly" attribute :required input:required Selects elements with a "required" attribute specified :root root Selects the document's root element :target #news:target Selects the current active #news element (clicked on a URL containing that anchor name) :valid input:valid Selects all elements with a valid value :visited a:visited Selects all visited links All CSS Pseudo Elements Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Selector Example Example description ::after p::after Insert content after every element ::before p::before Insert content before every element ::first-letter p::first-letter Selects the first letter of every element ::first-line p::first-line Selects the first line of every element ::marker ::marker Selects the markers of list items ::selection p::selection Selects the portion of an element that is selected by a user CSS Navigation bar A Navigation bar or navigation system comes under GUI that helps the visitors in accessing information. It is the UI element on a webpage that includes links for the other sections of the website. A navigation bar is mostly displayed on the top of the page in the form of a horizontal list of links. It Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 can be placed below the logo or the header, but it should always be placed before the main content of the webpage. It is important for a website to have easy-to-use navigation. It plays an important role in the website as it allows the visitors to visit any section quickly. Let's discuss the horizontal navigational bar and vertical navigational bar in detail. Horizontal Navigation Bar The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page. Let's see how to create a horizontal navigation bar by using an example. Example In this example, we are adding the overflow: hidden property that prevents the li elements from going outside of the list, display: block property displays the links as the block elements and makes the entire link area clickable. We are also adding the float: left property, which uses float for getting the block elements to slide them next to each other. If we want the full-width background color then we have to add the background-color property to rather than the element. ul { Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 list-style-type: none; margin: 0; padding: 0px; overflow: hidden; background-color: lightgray; } li { float: left; } li a { display: block; color: blue; font-size:20px; text-align: center; padding: 10px 20px; text-decoration: none; }.active{ background-color: gray; color: white; } li a:hover { background-color: orange; color: white; } Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Home Java HTML CSS Vertical Navigation Bars You often see vertical navigation bars in a left or right sidebar. To simplify the 'how to' we are just going to display the bar in a window, we will get to sidebars in the HTML/CSS Case Study Section. Lets see how we can create a vertical navigation bar. Advanced CSS - Lesson 5 - Navigation #nav { margin: 0; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 padding: 0; line-height: 1; width: 140px; list-style: none; } #nav li #current { background: url(https://server2client.com/images/bg_nav.png); color: #fff; } #nav a { background: url(https://server2client.com/images/bgGradient3.png); color: #000; margin: 0; padding: 5px 22px 5px 22px; border-top: 4px solid #fff; border-bottom: 1px solid #fff; border-left: 5px solid #fff; font-weight: 500; font-size: 1.2em; display: block; text-decoration: none; } #nav a:hover{ background: url(https://server2client.com/images/bg_nav.png); color: #fff; } Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Vertical Navigation Bar Home HTML A CSS A Case Study Reference Image Sprites Attribute sector, CSS Color Image Sprites An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Image Sprites - Simple Example Instead of using three separate images, we use this single image ("img_navsprites.gif"): With CSS, we can show just the part of the image we need. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 In the following example the CSS specifies which part of the "img_navsprites.gif" image to show: Example #home { width: 46px; height: 44px; background: url(img_navsprites.gif) 0 0; } Example explained: - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS width: 46px; height: 44px; - Defines the portion of the image we want to use background: url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px) This is the easiest way to use image sprites, now we want to expand it by using links and hover effects. Image Sprites - Create a Navigation List We want to use the sprite image ("img_navsprites.gif") to create a navigation list. We will use an HTML list, because it can be a link and also supports a background image: Example #navlist { position: relative; } Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 #navlist li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; } #navlist li, #navlist a { height: 44px; display: block; } #home { left: 0px; width: 46px; background: url('img_navsprites.gif') 0 0; } #prev { left: 63px; width: 43px; background: url('img_navsprites.gif') -47px 0; } #next { left: 129px; width: 43px; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 background: url('img_navsprites.gif') -91px 0; } Example explained: #navlist {position:relative;} - position is set to relative to allow absolute positioning inside it #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and padding are set to 0, list-style is removed, and all list items are absolute positioned #navlist li, #navlist a {height:44px;display:block;} - the height of all the images is 44px Now start to position and style for each specific part: #home {left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px #home {background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px) #prev {left:63px;width:43px;} - Positioned 63px to the right (#home width 46px + some extra space between items), and the width is 43px #prev {background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width 46px + 1px line divider) #next {left:129px;width:43px;} - Positioned 129px to the right (start of #prev is 63px + #prev width 43px + extra space), and the width is 43px #next {background:url('img_navsprites.gif') -91px 0;} - Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider) ADVERTISEMENT Image Sprites - Hover Effect Now we want to add a hover effect to our navigation list. Tip: The :hover selector can be used on all elements, not only on links. Our new image ("img_navsprites_hover.gif") contains three navigation images and three images to Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 use for hover effects: Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image. We only add three lines of code to add the hover effect: Example #home a:hover { background: url('img_navsprites_hover.gif') 0 -45px; } #prev a:hover { background: url('img_navsprites_hover.gif') -47px -45px; } #next a:hover { background: url('img_navsprites_hover.gif') -91px -45px; } Example explained: #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - For all three hover images we specify the same background position, only 45px further down Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 CSS Color In CSS, a color can be specified by using a predefined color name: CSS Color property is used to set the color of HTML elements. This property is used to set font color, background color, etc. The color of an element can be defined in the following ways: Built-In Color RGB Format RGBA Format Hexadecimal Notation HSL HSLA Built-In Color: These are a set of predefined colors which are used by its name. For example: red, blue, green etc. Syntax: h1 { color: color-name; } Example: Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 CSS color property h1 { color: green; text-align: center; } GeeksforGeeks RGB Format: The RGB(Red, Green, Blue) format is used to define the color of an HTML element by specifying the R, G, B values range between 0 to 255. For example: RGB value of Red color is (255, 0, 0), Green color is (0, 255, 0), Blue color is (0, 0, 255) etc. Syntax: h1 { Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 color: rgb(R, G, B); } Example: CSS color property h1 { color: rgb(0, 153, 0); text-align: center; } GeeksforGeeks RGBA Format: The RGBA format is similar to the RGB, but the difference is RGBA contains A (Alpha) which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 h1 { color:rgba(R, G, B, A); } Hexadecimal Notation: The hexadecimal notation begins with # symbol followed by 6 characters each ranging from 0 to F. For example: Red #FF0000, Green #00FF00, Blue #0000FF etc. Syntax: h1 { color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F); } HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format uses the cylindrical coordinate system. Hue: Hue is the degree of the color wheel. Its value lies between 0 to 360 where 0 represents red, 120 represents green and 240 represents blue color. Saturation: It takes a percentage value, where 100% represents completely saturated, while 0% represents completely unsaturated (gray). Lightness: It takes percentage value, where 100% represents white, while 0% represents black. Syntax: h1 { color:hsl(H, S, L); } HSLA: Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 The HSLA color property is similar to HSL property, but the difference is HSLA contains A (Alpha) which specifies the transparency of elements. The value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and 1.0 represents not transparent. Syntax: h1 { color:hsla(H, S, L, A); } Text Color: It is used to set the color of the text. Syntax: h1 { color:color_name; } Background Color: It is used to set the background color of an HTML element. Syntax: h1 { background-color:color_name; } Border Color: It is used to set the border color of an element. Border-style is used to set the border Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 type. Syntax: h1 { border-style:solid/dashed/dotted border-color:color_name; } List of Colors: Following is the list of a few CSS colors. Basic Colors Named Numeric Color name Hex rgb Decimal black #000000 0,0,0 silver #C0C0C0 192,192,192 gray #808080 128,128,128 white #FFFFFF 255,255,255 maroon #800000 128,0,0 red #FF0000 255,0,0 purple #800080 128,0,128 fuchsia #FF00FF 255,0,255 Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 green #008000 0,128,0 lime #00FF00 0,255,0 olive #808000 128,128,0 yellow #FFFF00 255,255,0 navy #000080 0,0,128 blue #0000FF 0,0,255 teal #008080 0,128,128 aqua #00FFFF 0,255,255 Creating page Layout and Site Designs CSS Website Layout plays a crucial role in defining its visual structure, organization, and responsiveness when designing a website. In this article, we’ll learn various CSS techniques to create effective website layouts with CSS. A website can be divided into various sections comprising of header, menus, content, and footer based on which there are many different layout designs available for developers. Different layouts can be created by using a div tag and using CSS property to style it. Structure of Website Layout Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 1. Header Section The header section typically appears at the top of a website or just below the top navigation menu. It often includes the website name or logo. 2. Navigation Menu A navigation bar/menu provides links for easy website navigation. 3. Content Section The content section is the main body of the website. The user can divide the content section in an n- column layout. The most common layouts are: 1-Column Layout: It is mostly used for mobile layout. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 2-Column Layout: This website layout is mostly used for tablets or laptops. 3-Column Layout: This website layout is mostly used for desktops. Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 The user can also create a responsive layout where the layout will get changed as per screen size. Consider the below example where if the idth of the screen is more than 600px then there will be a 3- column layout and if the width of the screen is between 400px to 600px then there will be a 2- column layout and if the screen size is less than 400px then the 1-column layout will display. Website Layout *{ box-sizing: border-box; }.header { background-color: green; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 padding: 15px; text-align: center; }.nav_menu { overflow: hidden; background-color: #333; }.nav_menu a { float: left; display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; }.nav_menu a:hover { background-color: white; color: green; }.columnA,.columnB,.columnC { float: left; Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 width: 31%; padding: 15px; text-align: justify; } h2 { color: green; text-align: center; } @media screen and (max-width:600px) {.columnA,.columnB,.columnC { width: 50%; } } @media screen and (max-width:400px) {.columnA,.columnB,.columnC { width: 100%; } } Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 GeeksforGeeks Algo DS Language Column A Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Column B Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Column C Dept. of Computational Sciences Brainware University, Kolkata Programme Name: Bachelor of Computer Applications Course Name: HTML,CSS and CSS preprocessor (BCA20002) Class: BCA2C Academic Session: 2023-24 Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. 4. Footer Section A footer section is placed at the bottom of the webpage and it generally consists of information like contact info, copyrights, About us etc. Dept. of Computational Sciences Brainware University, Kolkata
