1 / 6

### Introduction to CSS: Understanding Styles and Code Structure in Web Development ###

This lecture introduces Cascading Style Sheets (CSS), a crucial component of web design that enhances the appearance of HTML elements. Unlike programming languages, CSS is purely for styling, allowing developers to structure their pages with elements like divs, classes, and IDs. Learn the code structure, including selectors and common CSS properties, to manipulate text, backgrounds, sizes, and more. You'll also discover how to include CSS in HTML documents, either through external stylesheets or inline styles. Gain insights into making your web pages visually appealing and organized. ###

zan
Télécharger la présentation

### Introduction to CSS: Understanding Styles and Code Structure in Web Development ###

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WDD Lecture 4 Intro to CSS

  2. What is CSS • CSS: Cascading Style Sheet • Like HTML, not a programming language. • File containing stylings for “selected” elements • File has .css file extension • Gives the web its look. Lab1/Lab2 did not have css. The last step of Lab3 shows the difference css can make. • Structuring html using divs, ids, and classes is the primary way that we will apply css to html

  3. How to code CSS • CSS code structure: #myFavoriteLinks { Float: left; Width: 500px; } • Analysis of Code Structure: <selecter> { <css-property> : <css-value>; } • CSS can have as many of these as desired. Each set of brackets can hold multiple property-value pairs.

  4. CSS Selectors • The first component, the <selector> comes before the {}. • Selector determines on which element the css is applied. • Common Types of selectors: • By ID: #elementIDValue (replace elementIDValue with the actual value) • Must be Unique IDs • By Class: .elementClassValue (replace elementClassValue with actual value) • Does not need to be unique, used to style multiple elements • By Element Type: instead of by class or id, you can select based on what type of element it is • Exe: to style all h1 as red use this code H1 { Color: red; }

  5. Some Common CSS Properties • Like HTML, there are a wide variety of different css properties to use based on what you want to do • Common Properties: • Color: sets text color • Background-color: sets background color • Width/height: sets height or width of css element • Text-decoration: set bold/underline/italic of text • Font-size: sets font size • Background-image: set the background as an image • Each of these has potential values to use, look these up using google

  6. Including CSS on the Page • <Link> html element • <link rel=“stylesheet” type=“text/css” href=“style.css”/> (Do not copy and past) • Everything but hrefchanges • Href points to where the css file is • <style> html element <style type=“text/css”> -Put all your css here as if it were in a file </style> • Style attribute on an html element <p style=“color:yellow;”>Some paragraph text</p>

More Related