CSS Fundamentals
Published:
This lesson covers CSS Fundamentals
CSS Fundamentals
Cascading Style Sheets, CSS
- declarative language used to alter the appearance or styling of a web page.
- define a set of formatting rules, which the browser applies when it renders page.
- tell the browser to use a particular font for the page text, a certain color for the first paragraph in an article, or a picture for the page’s background.
Why Two Different Languages?
- separation of concerns
- Well-designed software keeps separate things separate, so that it’s easy to change one without dealing with the other.
- keep the data (content) in a program separate from the presentation (appearance) of that data
- Benefits
- allow the user to choose different “themes” for a site, or you could change the formatting for different audiences (e.g., larger text for vision-impaired users, more compact text for mobile users, or different styles for cultures with different aesthetic sensibilities).
- allow to change the look of an entire web site by only editing one file. This is an application of the Don’t Repeat Yourself (DRY) principle.
- dynamically adjust the look of your page by applying new style rules to elements in response to user interaction (clicking, hovering, scrolling, etc.), without changing the content.
- Users who don’t care about about the visual appearance (e.g., blind users with screen readers, automated web indexers) can move quickly and effectively engage with the content without needing to determine what information is “content” and what is just “aesthetics”
- Good programming style in web development thus keeps the semantics (HTML) separate from the appearance (CSS). Your HTML should simply describe the meaning of the content, not what it looks like!
- separation of concerns
CSS Rules
my-project/ |-- css/ |-- style.css or main.css or index.css |-- index.html<head> <link rel="stylesheet" href="css/style.css"> </head>relis short for relation. It specifies the relation between the tag and href.- also possible to include CSS code directly in your HTML by embedded it in a
CSS Syntax
selctor{ property: value; propoerty: value }h1{ font-family: 'Arial'; color: white; background-color: #333; /* dark gray */ }
CSS Properties
- key is to determine the name of the property and its valid value
- font-family
- font names with white space must be in quotes or double quotes
- can also be comma separated list with browser picking the first that is available
- e.g. font-family: ‘Helvetica Nue’, ‘Helvetica’, ‘Arial’, sans-serif;
- font-size
- size of text and value must include units e.g. 12px
- font-weight
- boldness e.g. bold or 700
- color
- text color, named color or hex value e.g. red or #333
- background-color
- specifies background color of the element
- border
- border for the element e.g. 3px dashed red
CSS Selectors
selects html element to apply rule
Element Selector
p{ color: purple; } body{ color: white; background-color: black; }
Class Selector
/* css */ .highlighted{ background-color: yellow }<!-- html --> <p> This is not highlighted </p> <p class='highlighted'> This is highlighted </p>class in css is written with dot followed by class name
CSS class names should start with a letter, and can contain hyphens, underscores, and numbers.
- Words are usually written in lowercase and separated by hyphens rather than camelCased or snake_cased.
Class selectors can be used to apply a single, consistent styling to multiple different types of elements:
<!-- HTML --> <h1 class="alert-flashing">I am a flashing alert!</h1> <p class="alert-flashing">So am I!<p>
HTML elements can also contain multiple classes
<!-- .alert OR .flashing --> <p class="alert flashing">I have TWO classes: "alert" and "flashing"</p> <p class="alert-flashing">I have ONE class: "alert-flashing"</p>
Class selectors are often commonly used with <div> (block) and (inline) elements.
These HTML elements have no semantic meaning on their own, but can be given appearance meaning through their class attribute. This allows them to “group” content together for styling
<div class="cow"> <p>Moo moo moo.</p> <p>Moooooooooooooooooooo.</p> </div> <div class="sheep"> <p>Baa baa <span class="dark">black</span> sheep, have you any wool?</p> </div>
Id Selector
Every HTML element can have an id attribute, but unlike the class attribute the value of the id must be unique within the page.
No two elements can have the same value for their id attributes.
Id selectors start with a # sign, followed by the value of the id
/* Style the one element with id="sidebar" */ #sidebar { background-color: lightgray; }<div id="sidebar"> This div contains the sidebar for the page </div>
Cascade
Multiple rules can be applied to the same element
CSS rules are additive [all multiple rules are applied to the same element]
/* CSS */ p { /* applies to all paragraphs */ font-family: 'Helvetica' } .alert { /* applies to all elements with class="alert" */ font-size: larger; } .success { /* applies to all elements with class="success" */ color: #28a745; /* a pleasant green */ }<!-- HTML --> <p class="alert success"> This paragraph will be in Helvetica font, a larger font-size, and green color, because all 3 of the above rules apply to it. </p>Inherited
<div class="content"> <!-- has own styling --> <div class="sub-sec"> <!-- has own styling + .content styling --> <ol class="demo-list"> <!-- own styling (ol AND .demo-list rules) + .sub-sec + .content --> <!-- li styling + .demo-list + .sub-sec + .content --> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> </div> </div>
Rule Specificity
Rules are applied in the order they are defined in the CSS file - Last Rule wins
/* Two rules, both alike in specificity */ p { color: red; } p { color: blue; }<p>This text will be blue, because that rule comes last!</p>Exception: Selector Specificity
More specific selectors (#id) take precedence over less specific ones
- .class, is more specific than tag
/* css */ .alert { color: red; } div { color: blue; }<!-- html --> <div class="alert">This text will be red, even though the `div` selector is last, because the `.alert` selector has higher specificity so is not overridden.</div>