Nidhi's blog
Simple Basics of CSS to create a Cafe Menu

Simple Basics of CSS to create a Cafe Menu

Polkam Srinidhi's photo
Polkam Srinidhi
·

4 min read

Table of contents

You can use CSS to set the color, font, size, and other aspects of HTML elements. You'll learn CSS by designing a menu page for aa Cafe webpage.

Step 1: To attach style element in HTML
Up until HTML, you have been limited regarding the presentation and appearance of the content you create. To start taking control, add a style element within the head element. Eg: <style>----</style>

Syntax of type selectors: With one or more type selector with same values
\=> element { property: value; }

\=> selector1, selector2 { property: value; }

Step 2: to put all the styles in a separate file and link to HTML

  1. Create a styles.css (.css) file.

  2. Nest a self-closing link element in the head element. Give it a rel attribute value stylesheet and an href attribute value of styles.css inside head element of HTML file.

  •           <link rel="stylesheet" href="styles.css">

  1. For the styling of the page to look similar on mobile as it does on a desktop or laptop, you need to add a meta element with a special content attribute inside head element of HTML.

     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

Properties List:

General syntax for properties in CSS
element{
property: value;
}

Property NameDefinitionSyntaxCan also be
1. text-alignTo align Texttext-align: center;-
2a. background-colorTo color backgroundbackground-color: brown;burlywood
2b. background-imageTo attach imagebackground-image: url(im.com.jpg);-
3a. widththe width of layoutwidth-80%;-
3b. max-widththe width of layoutmax-width: 80%;200px
4a.margin-rightmargin checkmargin-right: 25px;-25px
4b. margin-leftmargin checkmargin-left: 25px;-25px;
4c. margin-topmargin checkmargin-top: auto;-
4d. margin-bottomTo set margin either to right or left as requiredmargin-bottom: auto;-
5. displayto displaydisplay: inline-block;block
6. paddingTo have some space between the content and the sides.padding-left: 20px;Padding-left, padding-right, padding-top, padding-bottom
7a. font-familyTo make it look different from the default font of your browser.font-family: sans-serif;Impact, Impact,serif(fallback value)
7b. font-styleTo style the fontsfont-style: italic;-
7c. font-sizeTo resize or set a size to fontfont-size: 30px;-
8. heightThe heightheight: 3px;-
9a. border-colorborder colorborder-color: brown;grey, brown, white
9b. border-widthwidth of the borderborder-width: 1px;(default)-
10. colorTo color a particular selectorcolor: black;grey, brown, white

Styling elements:

  1. For Design Layouts: div element(inside body element of HTML file) with attributes 'id' of value menu.

<div id="menu"> </div>

  1. id Selector: An id selector is defined by placing the hash symbol # directly in front of the element's id value.

#menu { width: 300px; }

  1. Comments in CSS: /* comment here */

  2. Class Selector: A class selector is defined by a name with a dot directly in front of it.

    .class-name{ styles }

  3. Class Attribute: To apply the class's styling to the elements with a value.

  4. Pseudo-selector:

    a. You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like,

    element-name:visited { propertyName: propertyValue; }

    b. You change properties of a link when the mouse hovers over them by using a pseudo-selector that looks like,

    a:hover { propertyName: propertyValue; }

    c. You change properties of a link when the link is actually being clicked by using a pseudo-selector that looks like,

    a:active { propertyName: propertyValue; }

Source: Freecodecamp/Responsivewebdesign

Final Output:

source: www.freecodecamp.org

CSSnewbiebeginnerweb