Media and Web Development
ICOM-101-01 / MTEC-617-01
Week 3 ● Introduction to CSS
SELECTORS
CSS Selectors are a mechanism in Cascading Style Sheets (CSS) that allows designers and developers to select HTML elements on a web page and apply styles to them. They use patterns to match the elements and apply the styles to the elements that match the selector pattern. Selectors can match elements based on their tag name, class name, id, attribute, or a combination of these factors. CSS selectors offer a powerful and flexible way to control the look and layout of a web page and make it easier to maintain a consistent style throughout the site.
LAYOUT
Layout in CSS refers to the arrangement and organization of elements on a web page. CSS provides various layout techniques, such as float, display, position, and flexbox, which allow designers and developers to control the size, position, and flow of elements. These techniques allow for the creation of complex layouts with rows, columns, and grids, which can be used to structure the content of a web page
COLOR / FONT
Color and fonts are two important aspects of design in CSS. CSS allows you to specify the color of elements using a variety of color models, such as RGB, HEX, and HSL. The CSS font properties, such as font-family, font-size, and font-weight, allow you to control the appearance of text on a web page. By using CSS, you can easily change the color scheme and typography of your website, which can have a significant impact on its overall look and feel. Additionally, CSS provides techniques like Google Fonts and web safe fonts, which allow you to incorporate a wide range of custom fonts into your web pages, providing further opportunities for creative expression and enhancing the user experience
WHAT IS CSS?
CSS is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
CSS MAKES THE WEB LOOK LIKE IT DOES!
CSS MAKES THE WEB LOOK LIKE IT DOES!
CSS RULES
The 2000 key/value pairs that make websites look nice.
There are thousands of css rules.
We'll learn some together as we go, you'll learn some on your own as you research specific functionality, and the rest you can find on w3schools css reference.
We'll learn some together as we go, you'll learn some on your own as you research specific functionality, and the rest you can find on w3schools css reference.
CSS SELECTORS
Selectors allow us to choose which elements our css rules are applied to.
We can select child tags based on their parents.
Apply an underline style to all p tags that are children of a div tag.
This is a general descendent selector.
This is a general descendent selector.
In addition to general descendent selector, we can select direct descendents, or siblings.
Classes and IDs are html attributes, just like href and src from last week.
Each element may only have one ID, and an ID can only be applied to one element.
Classes can be applied to multiple elements, and an element may have many classes.
Class and ID names can mostly be whatever you want, but must always start with an a-z character.
We can select by class in our css with a dot (.) followed by the class name.
And we can select by id with the hash symbol (#) followed by the id name.
The easiest way to define colors is using one of the 140 named colors supported by modern browsers.
We can also define colors with the rgba function. Values between 0 and 255 for Red/Green/Blue, and 0.0 to 1.0 for alpha (opacity).
Most commonly, colors are defined with hex codes. This is similar to the RGB notation, but instead of decimal 0 - 255, we use hexadecimal 0 - FF.
At then end of the day, the browser doesn't care which of these color formats you use. You should have familiarity with all them, but use whatever you feel most comfortable with.
At then end of the day, the browser doesn't care which of these color formats you use. You should have familiarity with all them, but use whatever you feel most comfortable with.
The distance between the content and the border is known as the padding.
The distance between the a box and its neighbor is known as its margin.
Homework
Fork your assignment from last week ( or start a new project if you like )
● Add some CSS to style your HTML
● Use the CSS Box model to add padding, margin, or border styles to an
element
● Change the color or background-color of an element
● Change the font of an element from the default
■ Extra credit : Load a font from google fonts
● Use at least one class attribute to selectively style some HTML
● If you didn't last week, add an img and a tag to your document
● Add some CSS to style your HTML
● Use the CSS Box model to add padding, margin, or border styles to an
element
● Change the color or background-color of an element
● Change the font of an element from the default
■ Extra credit : Load a font from google fonts
● Use at least one class attribute to selectively style some HTML
● If you didn't last week, add an img and a tag to your document
