DEV Community

Val Philip Lorejo
Val Philip Lorejo

Posted on

CSS Fundamentals TIL Blog

CSS: Cascading Style Sheets

CSS is used to help style HTML content in a webpage since html by itself may be bland.

Two methods of writing CSS code, with CSS ruleset or inline code. CSS ruleset contains brackets while inline code contains elements from html like tags

CSS ruleset has 5 terms:
Selector, Declaration Block, Declaration, Property and Value

CSS inline style also has 5 terms almost similar to ruleset:
Opening tag, attribute, declaration, property and value

when writing using CSS inline code, can add multiple styles by the use of semicolons (Inline code rarely used for websites, but could be used if deemed necessary.)

Can separate HTML and CSS files separately for better readability through the use of external style sheets and in order for those files to be connected a link tag should be within the head section with the attributes href and rel, with href showing the location of the said file and rel showing the kind of relationship between those files.

In CSS ruleset, using * is the universal selector

Use of Class Attribute:
The class attribute can be used to organize any kind of content within a tag, so if some content is tied to a class, that class instead can be used to manipulate that content for styling, making it much more easier to style multiple things instead of one by one or to specifically select one thing. Multiple Classes can be separated by spacing.

Difference between class and id attribute:
Class can take multiple values while id only takes in one, used once per page, class is more broader while id seems to be more specific. Class starts off with period while id starts off with hashtag when getting called in CSS

-Type, Class Id: Least specific to most specific

-Descendant combinators are when you can also select elements that are nested within another element
-Chaining is when you can specify an element using its type and its class together so that it can ignore other types with the same class.

-The more specific code will be applied instead of the general code

-Can separate selectors through the use of commas

-Difference between foreground and background color, foreground is the color element itself is in while background is the background of the said element

-Using background image in CSS utilizes a URL

-!Important can override any style, best not to use it, very hard to override

Top comments (0)