Main content
This is the main content. This is the main content. This is the main content.
Lab 2 - Cascading Style SheetsStyling with the STYLE attributeStyle attribute allows configuring look and feel right on the element. Although it's very convenient it is considered bad practice and you should avoid using the style attribute ID selectorsInstead of changing the look and feel of all the elements of the same name, e.g., P, we can refer to a specific element by its ID Here's another paragraph using a different ID and a different look and feel Class selectorsInstead of using IDs to refer to elements, you can use an element's CLASS attribute This heading has same style as paragraph aboveDocument structure selectorsSelectors can be combined to refer elements in particular places in the document This paragraph's red background is referenced as ColorsForeground colorThe text in this paragraph is red butthis text is green Background colorThis background of this paragraph is red butthe background of this text is green and the foreground white BordersSolid fat red border Dashed thin blue border PaddingPadded top left Padded bottom right Padded all around MarginsMargin bottom Margin left right Margin all around Rounded cornersRounded corners on the top Rounded corners at the bottom Rounded corners all around Different rounded corners DimensionPortrait Landscape Square RelativePortrait Landscape Square Absolute positionPortrait Landscape Square Fixed positionCheckout the blue square that says "Fixed position" stuck all the way on the right and half way down the page. It doesn't scroll with the rest of the page. Its position is "Fixed".Fixed position Z indexPortrait Landscape Square Float![]() ![]() ![]() ![]() Yellow Blue Red ![]() Grid layoutLeft halfRight halfLeft thirdRight two thirdsMain contentThis is the main content. This is the main content. This is the main content. FlexColumn 1 Column 2 Column 3 Column 1 Column 2 Column 3 Column 1 Column 2 Column 3 |