Downloaded 12 times
More Related Content
Similar to Cascading style sheets (CSS-Web Technology)
Cascading style sheets (CSS-Web Technology)
- 1. Cascading Style Sheets “TheFashion Quotient of your Webpage.” Presented by- Mayank Timbal -160280116104 Devyanshu Seghal -16028011 Hiren Vegda -160280116111
- 2. Introduction Cascading StyleSheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
- 3. What is CSS? CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages and HTML elements, including the design, layout and variations in display for different devices and screen sizes. External stylesheets are stored in CSS files.
- 4. CSS Saves aLot of Work!
- 5.
- 6. CSS How To... ThreeWays to Insert CSS 1. External style sheet : With an external style sheet, you can change the look of an entire website by changing just one file! Example: <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
- 7. mystyle.css body { background-color:light blue; } h1 { color: navy; margin-left: 20px; }
- 8. 2. Internal stylesheet An internal style sheet may be used if one single page has a unique style. Example: <head> <style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } </style> </head>
- 9. 3. Inline style An inline style may be used to apply a unique style for a single element. Example: <h1 style="color:blue;margin-left:30px;">This is a heading</h1>
- 10. Manipulating Texts Text Decoration •Using text decoration property we can include special features in the text. • Various properties of text decoration are • Underline • Overline • Line through • Syntax: p.linethrough{text-decoration:line-through} • p.overline{text-decoration:overline} • p.underline{text-decoration:underline} • p.normal{text-decoration:normal}
- 12. Text Alignment Usingcascading style sheet we can align the text. This alignment can be done using following properties such as- Text-align:left – aligning the text to the left Text-align:right – aligning the text to the right Text-align:center – aligning the text at the center The alignment of an image can be done using the property float and its value can be left , right and none. img{float:left}
- 13. This text isaligned left This text is aligned right This text is aligned center
- 14. Using Fonts Font-Families Thefont-family denotes different types of fonts such as Arial , Times New Roman , Script , monospace and so on. h1{ font-family:Arial;} h2{ font-family:script;} h3{ font-family:Garamond;} Output: This text in Arial This text in script This text in Garamond
- 15. Font sizes Thisproperty is used to specify the size of the font. One can specify the font size in points(pts) , pixels(px) or in percentage(%). We can also specify the font size using the relative values such as small , medium , large. h1{ font-size:28pt} h2{ font-size:28px} h3{ font-size:large} h4{ font-size:28%}
- 17. Font variants andFont Styles The font variation can be achieved by making setting the font in upper case or in lower case. h1{ font-variant : small-caps } h2{ font-variant : normal } Various font styles are- Normal Italic oblique
- 18. Font weights Variousfont styles are- Normal(by default) Bold Bolder Lighter h1{ font-weight : normal;} h1{ font-weight : bold;} h1{ font-weight : bolder;} h1{ font-weight : lighter;}
- 19. Font Shorthands Wecan specify more than one font properties in a list p { font-family : Courier New; font-style : italic; font-weight : bold; font-size : 28pt; }
- 20. Borders There isa property called border-style which controls the element’s content border. Syntax: h4.none { border-style : none } h4.dotted { border-style : dotted }
- 22. Selectors In CSS,selectors declare which part of the markup a style applies to by matching tags and attributes in the markup itself. Selectors may apply to the following: all elements of a specific type, e.g. the second-level headers h2 elements specified by attribute, in particular: id: an identifier unique within the document class: an identifier that can annotate multiple elements in a document elements depending on how they are placed relative to others in the document tree.
- 23. The Box Model Browsers load HTML elements with default position values. This often leads to an unexpected and unwanted user experience, while limiting the views you can create. In this lesson you will learn about the box model, an important concept to understand how elements are positioned and displayed on a website. If you have used HTML and CSS, you have unknowingly seen aspects of the box model. For example, if you have set the background color of an element, you may have noticed that the color was applied not only to the area directly behind the element, but also to the area to the right of the element. Also, if you have aligned text, you know it is aligned relative to something. What is that something? All elements on a web page are interpreted by the browser as "living" inside of a box. This is what is meant by the box model. For example, when you change the background color of an element, you change the background color of its entire box.
- 24. Introduction The boxmodel comprises the set of properties which define parts of an element that take up space on a web page. The model includes the content area's size (width and height) and the element's padding, border, and margin. The properties include: Width and height — specifies the width and height of the content area. Padding — specifies the amount of space between the content area and the border. Border — specifies the thickness and style of the border surrounding the content area and padding. Margin — specifies the amount of space between the border and the outside edge of the element.
- 26. Height & Width An element's content has two dimensions: a height and a width. By default, the dimensions of an HTML box are set to hold the raw contents of the box. The CSS height and width properties can be used to modify these default dimensions. p { height: 80px; width: 240px; } In this example, the height and width of paragraph elements are set to 80 pixels and 240 pixels, respectively — the px in the code above stands for pixels. Pixels allow you to set the exact size of an element's box (width and height). When the width and height of an element are set in pixels, it will be the same size on all devices — an element that fills a laptop screen will overflow a mobile screen.
- 27. Borders A borderis a line that surrounds an element, like a frame around a painting. Borders can be set with a specific width, style, and color. width — The thickness of the border. A border's thickness can be set in pixels or with one of the following keywords: thin, medium, or thick. style — The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid. color — The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords. The default border is medium none color, where color is the current color of the element. If width, style, or color are not set in the CSS file, the web browser assigns the default value for that property. p { border: 3px solid coral; }
- 28. Padding The spacebetween the contents of a box and the borders of a box is known as padding. Padding is like the space between a picture and the frame surrounding it. In CSS, you can modify this space with the padding property. p.content-header {border: 3px solid coral; padding: 10px;} The code in this example puts 10 pixels of space between the content of the paragraph (the text) and the borders, on all four sides. The padding property is often used to expand the background color and make content look less cramped. If you want to be more specific about the amount of padding on each side of a box's content, you can use the following properties: padding-top padding-right padding-bottom padding-left Each property affects the padding on only one side of the box's content, giving you more flexibility in customization.
- 29. Margin So faryou've learned about the following components of the box model: content, borders, and padding. The fourth and final component of the box model is margin. Margin refers to the space directly outside of the box. The margin property is used to specify the size of this space. p { border: 1px solid aquamarine; margin: 20px; } The code in the example above will place 20 pixels of space on the outside of the paragraph's box on all four sides. This means that other HTML elements on the page cannot come within 20 pixels of the paragraph's border. If you want to be even more specific about the amount of margin on each side of a box, you can use the following properties: margin-top margin-right margin-bottom margin-left Each property affects the margin on only one side of the box, providing more flexibility in customization.
- 30. Overflow All ofthe components of the box model comprise an element’s size. Sometimes, these components result in an element that is larger than the parent's containing area. How can we ensure that we can view all of an element that is larger than its parent's containing area? The overflow property controls what happens to content that spills, or overflows, outside its box. It can be set to one of the following values: Hidden - when set to this value, any content that overflows will be hidden from view. Scroll - when set to this value, a scrollbar will be added to the element's box so that the rest of the content can be viewed by scrolling. Visible - when set to this value, the overflow content will be displayed outside of the containing element. Note, this is the default value. p { overflow: scroll; } The overflow property is set on a parent element to instruct a web browser how to render child elements. For example, if a div’s overflow property is set to scroll, all children of this div will display overflowing content with a scroll bar.
- 31. Resetting Defaults Allmajor web browsers have a default style sheet they use in the absence of an external style sheet. These default style sheets are known as user agent style sheets. In this case, the term "user agent" is a technical term for the browser. User agent style sheets often have default CSS rules that set default values for padding and margin. This affects how the browser displays HTML elements, which can make it difficult for a developer to design or style a web page. Many developers choose to reset these default values so that they can truly work with a clean slate. * { margin: 0; padding: 0;} The code in the example above resets the default margin and padding values of all HTML elements. It is often the first CSS rule in an external style sheet.
- 32. Summary In thislesson, we covered the four properties of the box model: height and width, padding, borders, and margins. Understanding the box model is an important step towards learning more advanced HTML and CSS topics. Let's take a minute to review what you learned. The box model comprises a set of properties used to create space around and between HTML elements. The height and width of a content area can be set in pixels or percentage. Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties. Padding is the space between the content area and the border. It can be set in pixels or percent. Margin is the amount of spacing outside of an element's border. Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element. Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin. margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width. The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent's content area. The visibility property can hide or show elements.