{"id":3726,"date":"2023-07-18T00:58:22","date_gmt":"2023-07-18T00:58:22","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3726"},"modified":"2025-08-29T23:43:36","modified_gmt":"2025-08-29T23:43:36","slug":"course-notes-css-intro","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-one-html-css\/week-two\/course-notes-css-intro\/","title":{"rendered":"Course Notes: CSS Intro"},"content":{"rendered":"\n

SIMPLE SELECTORS<\/strong><\/h1>\n\n\n\n

Element selectors<\/strong>: has no symbol, just the element name (p<\/code>, a,<\/code> ul<\/code>, li<\/code>, h3<\/code>, etc), targets all elements of a given type<\/p>\n\n\n\n

Class selectors<\/strong>: has a dot .<\/code> followed by a class name, the class name can be anything but cannot have spaces, elements can have more than one class<\/p>\n\n\n\n

ID selectors<\/strong>: has a pound #<\/code> followed by an ID name of a given element, the ID name can be anything but cannot have spaces, each ID name must be unique within the document – unpredictable behavior occurs if multiple elements have the same ID<\/p>\n\n\n\n

Universal selector<\/strong>: is the class name of a single star *<\/code> that allows the selection of all elements in a page. Think twice before using this selector because its use in large web pages will make your page load slowly.<\/p>\n\n\n\n

ATTRIBUTE SELECTORS<\/strong><\/h1>\n\n\n\n

[attr]<\/code> selects all elements with the attribute [attr] whatever its value, name of the attr can be anything but cannot have spaces<\/p>\n\n\n\n

[attr=val]<\/code> selects all elements with the attribute [attr] but only if its value is val<\/p>\n\n\n\n

[attr~=val]<\/code> selects all elements with the attribute [attr] but only if val is one of a space-separated list of words contained in attr\u2019s value<\/p>\n\n\n\n

PSEUDO-CLASSES & PSEUDO-ELEMENTS<\/strong><\/h1>\n\n\n\n

Pseudo-classes:<\/strong> how to edit how an element acts in a certain state<\/em>, a colon \u2018:\u2019 and keyword following a selector (selector:keyword). Don\u2019t try to memorize all of the possible iterations, here are the ones you’ll use the most:<\/p>\n\n\n\n

a<\/code> {how the link will act while active]<\/p>\n\n\n\n

a:visited<\/code> {how the link will act after being clicked on}<\/p>\n\n\n\n

a:hover<\/code> {how the link will act while being hovered over with the cursor}<\/p>\n\n\n\n

a:active<\/code> {how the link will act while being clicked on}<\/p>\n\n\n\n

a:focus<\/code> {how the link will act when clicked on or while using tab to navigate page elements}<\/p>\n\n\n\n

Pseudo-elements:<\/strong> how to select a certain part of an element, two colons \u2018::\u2019 and keyword following a selector ([element^=text::keyword) so selecting a specific type of element that\u2019s followed by specific text<\/p>\n\n\n\n

::first-letter<\/code> controls the first letter of a paragraph<\/p>\n\n\n\n

::first-line<\/code> controls the first line of a paragraph<\/p>\n\n\n\n

::selection<\/code> controls the part of a document that has been highlighted by the<\/p>\n\n\n\n

user<\/p>\n\n\n\n

COMBINATORS AND GROUPS OF SELECTORS<\/strong><\/h1>\n\n\n\n

Group of selectors<\/strong> (A, B<\/strong>) any element matching A and\/or B, separated with a comma because it\u2019s a list<\/p>\n\n\n\n

Descendant combinatory<\/strong> (A B<\/strong>) any element matching B that is a child of an element matching A, nothing separating the elements because they\u2019re being combined<\/p>\n\n\n\n

Child combinator<\/strong> (A > B<\/strong>) any element matching B that\u2019s a direct child<\/em> of an element matching A<\/p>\n\n\n\n

Adjacent sibling combinatory<\/strong> (A + B<\/strong>) any element matching B that is the next sibling <\/em>(next child of the same element) of an element matching A<\/p>\n\n\n\n

General sibling combinatory<\/strong> (A ~ B<\/strong>) any element matching B that is one of the next siblings<\/em> (next children *plural* of the same parent) of an element matching A<\/p>\n\n\n\n

CSS VALUES AND UNITS<\/strong><\/h1>\n\n\n\n

Numeric values: specify an element\u2019s length, width, border thickness, or font size. The two numeric value units that are used:<\/p>\n\n\n\n

    \n
  1. pixels (px)- absolute units, will always be the same size regardless of other settings. Used for margin, padding, etc border-width.<\/li>\n\n\n\n
  2. (em) relative unit, 1em is the same as the font size of the current element. Example: could be used when creating a custom bullet to size to be scaled to fit the font size of the list<\/li>\n<\/ol>\n\n\n\n

    Unit-less values: Used to completely remove the margin or padding of an element just use zero. Used to edit line height with the value acting as a multiplying factor. Also used to control the number of times an animation will play (animation-iteration-count).<\/p>\n\n\n\n

    Percentages: specify an element\u2019s size relative to a parent container, percentage of their parent container\u2019s width, visual size will change as the window is resized<\/p>\n\n\n\n

    Liquid layout- shifts as the browser viewport size changes, used to ensure that it will always fit the screen across various device screen sizes<\/p>\n\n\n\n

    Fixed width layout- stays the same regardless<\/p>\n\n\n\n

    COLORS<\/strong><\/h1>\n\n\n\n

    Keywords<\/strong>– list of 165 different words that represent a color, pure colors such as red, blue, black, white, etc<\/p>\n\n\n\n

    Hexadecimal<\/strong>– can represent ANY color you want to use, consist of a pound symbol (#) followed by 6 hexadecimal numbers (values between 0 and f: 0123456789abcdef), pairs of values represent one of the color channels (red\/green\/blue) and the specific value out of all 256 available for each<\/p>\n\n\n\n

    RGB<\/strong>– rgb(_,_,_) function where each channel is represented by a decimal number 0-255<\/p>\n\n\n\n

    Opacity<\/strong>– the transparency of the selected element and its children<\/p>\n\n\n\n

    CASCADE AND INHERITANCE<\/strong><\/h1>\n\n\n\n

    CSS (Cascading Style Sheets)<\/strong>: cascade\/order of rules is key, what determines<\/p>\n\n\n\n

      \n
    1. Importance !important<\/code> this declaration will always win over all others, use sparingly<\/li>\n\n\n\n
    2. Specify- how specific a selector is, or how many elements it could<\/em> match\n