CSS Cascading Style Sheet - Web Design 2024-25 PDF

CSS Cascading Style Sheet F27WD Web Design and Databases Dr Md Azher Uddin 2024-25 Part 1/2 CSS Fundamentals What is CSS? CSS is a language to design and create a great-looking web pages. With CSS you can define how HTML elements are displayed. CSS is imple...

CSS Cascading Style Sheet F27WD Web Design and Databases Dr Md Azher Uddin 2024-25 Part 1/2 CSS Fundamentals What is CSS? CSS is a language to design and create a great-looking web pages. With CSS you can define how HTML elements are displayed. CSS is implemented using styles. A style is a rule that describes how to format a specific part of an HTML document. A style sheet is a set of style rules. Language ≠ Programming language CSS Fundamentals You can create a style and apply it to many elements based on a selector. You use a selector to locate and select elements based on tag name, class name, ID, and more. You can create a style that works with images, and you can create a style that works only with hyperlinks etc. You can also create a named style that you can apply to any element. The reusability of CSS is powerful. Applying Style Sheets Inline style sheet within a tag. Applies only to that particular occurrence of that tag. Embedded (also called Internal) style sheet Defined within the head section of a page. Applies to that page only. External style sheet defined in a separate, hence external, file. Inline Style … Pros Cons  Highly specific to the element on  Hard to maintain: it is bad for which it is defined. reusability because you will need to copy this style to each HTML  You don’t need a selector. document you want to style.  It is handy to override styles that  HTML/CSS coupled: it violates the are defined elsewhere. primary goal of separation between structure and presentation. Embedded Style p { font-size:14px; } Pros Cons  Affects all matched elements  HTML/CSS coupled: Still, it does not provide file  Useful when you want to have a single, separation. stand-alone webpage that contains  It only provides reuse everything needed to render. within the one file it  It can be located within the or contains it. the elements.  You need to use  *Better in. SELECTORS External Style separate CSS file p{ font-size:14px; } mystyle.css Pros Cons  Easy to maintain: Write  It can become once for whole site harder to manage  HTML & CSS decoupled:  You need to use Themes !!! SELECTORS External Style separate CSS file p{ font-size:14px; } mystyle.css Pros Cons  Easy to maintain: Write  It can become once for whole site harder to manage  HTML & CSS decoupled:  You need to use Themes !!! SELECTORS What is in a webpage 3 images 1 external JS: main.min.20181002.js 3 embedded JS 2 external CSS: non-critical.min.20180912.css legacy.min.20180604.css 1 embedded CSS 5 inline CSS (2 embedded JSON) CSS fundamentals - selectors A selector connects the style rule to your HTML. selector { propert y : value ; propert y : value ; … } CSS fundamentals - selectors selector {  element-type: (div) propert y :  id (#name) v a lue;  class (.name) propert y : } v a lue; … CSS fundamentals – Element-type selectors An element type selector is based on the name of the tag. In this example, the tag name (button) is the selector and the style will be applied to every button in your HTML document. button { background-color: white; color: red; } If your HTML document contains 50 buttons, the style of all 50 buttons would be set. This is desirable in some scenarios, but if you want to set the style on a single button or a subset of buttons, you should use the ID or the CLASS selectors. CSS fundamentals – Element-type selectors An id selector is based on the id of the element. For example, to set the style on a single button, you can assign an id to the button and then specify the id as the selector, prefixed with the hash (#) symbol. HTML CSS Save #btnSave { background-color: white; color: red; } In this example, it doesn’t matter which type of element is being accessed; all that matters is that the id is btnSave. The id must be unique across an HTML document. You cannot have two elements with the same id. CSS fundamentals – Element-type selectors A class selector is a style with a class name of your choice, prefixed with the period (.) symbol. HTML CSS OK.myStyle { Cancel background-color: black; color: orange; } Class styles promote reuse because they can be used on any element as needed. CSS fundamentals – Using an External style body { background-color: gray; color: red; } test.html … … CSS Fundamentals – Selectors HTML element CSS rule p { font-size: 14px; }.bp { color: gray; } #headline { font- size:20px; } CSS Backgrounds CSS Text Color The CSS id Selector The CSS class Selector CSS Fundamentals – Box model top left right bottom CSS Fundamentals – Box model The margin is the space outside the border, between the border and the next element. The padding is the space inside the border, between the border and the content. If the border is being displayed, the margin and padding settings will have distinct effects. If the border is not being displayed, it can be difficult to differentiate margin and padding settings. CSS Fundamentals – Box model main { margin: 15px; border: 10px; padding: 25px; background-color: yellow; border-style: solid; border-color: green; }  CSS Fundamentals – Box model main { margin-top: 0px; margin-right: 5px; top clockwise margin-bottom: 10px; margin-left: 1px; padding: 1px 2px 3px 4px; left right border: 15px; background-color: yellow; padding-top: 1px; padding-right: 2px; border-style: solid; padding-bottom: 3px; border-color: green; bottom padding-left: 4px; } Creating layouts with The div tag defines a division or a section in an HTML document. Can be used to group block- elements and format them with CSS. Hence, div represents a rectangular block of content.  Creating layouts with defaultDiv.css File div { background-color: green; height: 100px; width: 100px; Div Demo }  defaultDiv.css File Creating layouts with.div-1 { background-color: blue; height: 50px; width: 50px; }.div-2 { Div Demo background-color: red; height: 100px; width: 100px; }.div-3 { background-color: yellow; height: 200px; width: 200px; } CSS Fundamentals – Properties Typography Colors Positioning font-size color background-color position font-weight background-image width font-family border-color Height line-height margin text-align padding border http://htmldog.com/reference/cssproperties/ view all http://www.w3schools.com/cssref/ Alternative properties to You can create complex and sophisticated layouts with div However, web layouts don’t need to be done using only. CSS offers two other elements and properties for styling web pages. Flexbox: a layout module that was designed to create mobile pages webpages that display well on small devices such as smartphones. Grid Layout: a layout module created to manipulate HTML pages as grids. Both, Flexbox and Grid make easier the design web pages without having to use floats and positioning.  Alternative properties to Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts Flexbox HTML example: Home Search Logout Before we turned it into a Flexbox layout these div’s are stacked on top of each other like this: Flexbox When we give it a CSS display: flex; the items will be places nicely on a line. header { display: flex; } To move the logout button to the far right side, we’ll simply target that element and give it a margin: header > div:nth-child(3) { margin-left: auto; } Which results in the following: More on Flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Grid Layout The Grid Layout offers a grid-based layout system. This layout has both rows and columns This makes it easier to design web pages without having to use floats and positioning. Grid Layout A grid layout consists of a parent element, with one or more child elements. An HTML element becomes a grid container when its display property is set to grid or inline-grid. All direct children of the grid container automatically become grid items. Grid Layout Grid Layout