Web programming css
- 1. WEB PROGRAMMING Cascading Style Sheets (CSS) Dr.M.UMADEVI ASSISTANT PROFESSOR DEPARTMENT OF CS SACWC CUMBUM
- 2. Cascading Style Sheets (CSS) • SS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. • The reason of using CSS is to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. • More importantly, CSS enables you to do this independent of the HTML that makes up each web page. • There are three types of CSS which are given below: • Inline CSS • Internal or Embedded CSS • External CSS
- 3. • Why we learn CSS? Styling has been an essential property for any website since many decades. It increases the standards and overall look of the website which makes it easier for the user to interact with it • Base for web development: HTML and CSS is the basic skill that every web developer should know. It is the basic skill that is required for building a website.
- 4. • Makes your website look attractive: A website that’s dull and plain will not attract the user most probably, so adding some style would surely make your website presentable to the user. • Makes the design come live: A web developer is responsible in making the design given to him as a live product. CSS is used for styling to develop the design of the website. • Increases user experience of website: A website with a simple yet beautiful UI would help the users to go through the website easily. CSS is used to make the user interface better. • More career opportunities: Since CSS is a basic requirement while learning Web Development, therefor there are abundant career opportunities for it. As a freelancer too you can land up to many projects. •
- 5. • Basic Format: It is the basic structure of HTML webpage and we use CSS style inside webpage. In a web page, we use internal CSS (i.e. adding CSS code inside <head> tag of HTML code) <!DOCTYPE html> <html> <head> <!-- Head section of web page --> <title></title> <!-- Stylesheet of web page --> <style></style> </head> <body> <!-- Body section of web page --> </body> </html>
- 6. Style sheet contain one or more CSS Rules body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } 4 Selector Property Value Declaration Block
- 8. CSS Properties Control many style properties of an element: ● Coloring ● Size ● Position ● Visibility ● Many more: (e.g. p: { text-decoration: line-through; }) ● Also used in animation
- 9. Properties
- 10. CSS box model • CSS box model is a container which contains multiple properties including borders, margin, padding and the content itself. • It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements. • The web browser renders every element as a rectangular box according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are given below: • Borders • margins • padding • Content
- 11. CSS box –model property
- 12. • Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the width and height of border. Margin Area: This area consists of space between border and margin. The dimensions of Margin area are the margin-box width and the margin-box height. It is useful to separate the element from its neighbors. Padding Area: It includes the element’s padding. This area is actually the space around the content area and within the border box. Its dimensions are given by the width of the padding-box and the height of the padding- box. Content Area: This area consists of content like text, image, or other media content. It is bounded by the content edge and its dimensions are given by content box width and height.
- 14. Adding Styles to HTML
- 15. Thank you